:root {
  color-scheme: dark;
  --ink: #eaf4ff;
  --muted: #9fb2ca;
  --line: rgba(82, 167, 255, 0.22);
  --surface: rgba(10, 22, 40, 0.9);
  --band: #050914;
  --accent: #27d5ff;
  --accent-strong: #0088ff;
  --success: #55f28f;
  --warning: #ffd978;
  --danger: #ff7b7b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 149, 255, 0.16), transparent 32rem),
    radial-gradient(circle at 80% 8%, rgba(132, 72, 255, 0.14), transparent 30rem),
    var(--band);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: #7ee8ff;
  font-weight: 700;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.topbar {
  align-items: stretch;
  background: rgba(5, 9, 20, 0.92);
  border-bottom: 1px solid rgba(82, 167, 255, 0.10);
  box-shadow: 0 1px 0 rgba(82, 167, 255, 0.05), 0 12px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  display: flex;
  min-height: 80px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Inner row — max-width container, holds brand / nav / right-rail */
.topbar-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1480px;
  padding: 0 clamp(20px, 3.5vw, 48px);
  width: 100%;
}

/* ── Brand lockup ─────────────────────────────────────────────────────────── */
.brand {
  align-items: center;
  color: #f0f8ff;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: 12px;
  line-height: 1;
  text-decoration: none;
}

.brand-logo {
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  height: 86px;
  object-fit: contain;
  width: 86px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-name {
  color: #f0f8ff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-tagline {
  color: rgba(120, 165, 210, 0.68);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

/* ── Center nav ───────────────────────────────────────────────────────────── */
.nav-menu {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 0;
  justify-content: center;
  padding: 0 12px;
}

/* ── Direct nav link (no dropdown) ───────────────────────────────────────── */
.nav-link {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: rgba(170, 195, 228, 0.82);
  display: flex;
  font-size: 13.5px;
  font-weight: 600;
  height: 80px;
  letter-spacing: 0.01em;
  padding: 0 16px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.nav-link:hover {
  border-bottom-color: rgba(82, 167, 255, 0.28);
  color: #d8eeff;
}

/* ── Dropdown divider ─────────────────────────────────────────────────────── */
.nav-divider {
  border: none;
  border-top: 1px solid rgba(82, 167, 255, 0.12);
  margin: 6px 8px;
}

/* ── Nav group (dropdown trigger) ─────────────────────────────────────────── */
.nav-group {
  position: relative;
}

.nav-group summary {
  align-items: center;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: rgba(170, 195, 228, 0.82);
  cursor: pointer;
  display: flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 4px;
  height: 80px;
  letter-spacing: 0.01em;
  list-style: none;
  padding: 0 16px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

/* Small downward chevron — CSS only, not in markup */
.nav-group summary::after {
  color: inherit;
  content: "▾";
  font-size: 11px;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.2s;
}

.nav-group summary:hover {
  color: #d8eeff;
  border-bottom-color: rgba(82, 167, 255, 0.28);
}

.nav-group[open] summary {
  background: none;
  border-color: transparent;
  border-bottom-color: rgba(39, 213, 255, 0.75);
  color: var(--accent);
}

.nav-group[open] summary::after {
  opacity: 0.75;
  transform: rotate(180deg);
}

.nav-group[open] {
  z-index: 200;
}

/* ── Dropdown panel ───────────────────────────────────────────────────────── */
.nav-dropdown {
  background: rgba(6, 12, 28, 0.97);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 16px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  min-width: 210px;
  overflow: hidden;
  padding: 8px;
}

.nav-dropdown a {
  border-radius: 10px;
  color: #b0cce8;
  display: block;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.nav-dropdown a:hover {
  background: rgba(39, 213, 255, 0.09);
  color: #eaf7ff;
}

@media (min-width: 761px) {
  .nav-dropdown {
    left: 0;
    position: absolute;
    top: calc(100% + 4px);
    z-index: 200;
  }

  .nav-dropdown-right {
    left: auto;
    right: 0;
  }
}

/* ── Right rail ───────────────────────────────────────────────────────────── */
.nav-right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

/* Watchlist — prominent outlined pill */
.nav-watchlist {
  align-items: center;
  border: 1.5px solid rgba(82, 167, 255, 0.35);
  border-radius: 999px;
  color: #c5e0ff;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  padding: 8px 18px;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s, color 0.14s;
  white-space: nowrap;
}

.nav-watchlist:hover {
  background: rgba(39, 213, 255, 0.08);
  border-color: rgba(39, 213, 255, 0.55);
  box-shadow: 0 0 18px rgba(39, 213, 255, 0.14);
  color: #eef8ff;
}

/* Local — compact circular settings button, hides "Local" text, shows CN via ::before */
.nav-local > summary {
  align-items: center;
  background: transparent;
  border: 1.5px solid rgba(120, 160, 210, 0.28);
  border-bottom: 1.5px solid rgba(120, 160, 210, 0.28);
  border-radius: 50%;
  color: transparent;
  display: flex;
  font-size: 0;
  height: 38px;
  justify-content: center;
  padding: 0;
  transition: background 0.14s, border-color 0.14s;
  width: 38px;
}

.nav-local > summary::before {
  color: rgba(140, 175, 215, 0.92);
  content: "CN";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Hide chevron on the circle trigger */
.nav-local > summary::after {
  display: none;
}

.nav-local > summary:hover {
  background: rgba(82, 167, 255, 0.10);
  border-color: rgba(82, 167, 255, 0.45);
  border-bottom-color: rgba(82, 167, 255, 0.45);
}

.nav-local[open] > summary {
  background: rgba(39, 213, 255, 0.12);
  border-color: rgba(39, 213, 255, 0.55);
  border-bottom-color: rgba(39, 213, 255, 0.55);
}

.nav-local .nav-dropdown a {
  color: #8ab0d0;
}

.nav-local .nav-dropdown a:hover {
  color: #c8daf0;
}

.nav-section-label {
  color: rgba(120, 160, 200, 0.5);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 14px 4px;
  text-transform: uppercase;
}

.shell {
  margin: 0 auto;
  max-width: 1680px;
  padding: 34px 28px 56px;
  width: 100%;
}

.page-shell {
  margin: 0 auto;
  max-width: 1680px;
  padding: 34px 28px 56px;
  width: 100%;
}

.page-head,
.page-hero {
  align-items: end;
  background: linear-gradient(135deg, rgba(8, 18, 38, 0.92), rgba(4, 10, 22, 0.88));
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  overflow: hidden;
  padding: 22px;
  position: relative;
}

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 6px;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
  margin-bottom: 4px;
}

h2 {
  font-size: 18px;
  margin-bottom: 16px;
}

h3 {
  color: rgba(160, 195, 230, 0.68);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Section heading inside panels — thin separator anchors the title to content */
.panel h2,
.glass-panel h2,
.cc-panel h2 {
  border-bottom: 1px solid rgba(82, 167, 255, 0.07);
  color: rgba(210, 232, 252, 0.88);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  padding-bottom: 12px;
}

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

.panel {
  background: linear-gradient(160deg, rgba(8, 18, 38, 0.92), rgba(4, 10, 22, 0.92));
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 18px;
  overflow: hidden;
  padding: 22px;
}

.glass-panel,
.form-panel,
.checklist-panel {
  background: linear-gradient(160deg, rgba(8, 18, 38, 0.92), rgba(4, 10, 22, 0.92));
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  padding: 22px;
}

/* ── Paste a Deal ── */
.paste-deal-grid {
  align-items: start;
}

.paste-verdict-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.decision-badge-xl {
  font-size: 13px !important;
  padding: 8px 14px !important;
  white-space: nowrap;
}

.paste-item-name {
  color: #f0f7ff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0;
}

.paste-breakdown {
  margin-bottom: 18px;
}

.paste-breakdown th {
  color: #7a8a9a;
  font-weight: 400;
  text-align: left;
  width: 60%;
}

.paste-breakdown td {
  text-align: right;
}

.paste-breakdown .row-total th,
.paste-breakdown .row-total td {
  border-top: 1px solid rgba(82, 167, 255, 0.18);
  padding-top: 6px;
}

.paste-breakdown .row-edge td strong {
  font-size: 1.1em;
}

.row-edge-positive td {
  color: #7dffae;
}

.row-edge-negative td {
  color: #ff9b9b;
}

.paste-checklist {
  border-top: 1px solid rgba(82, 167, 255, 0.14);
  margin-bottom: 18px;
  padding-top: 14px;
}

.paste-check-row {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.paste-check-row div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.paste-check-row strong {
  font-size: 0.88em;
}

.paste-check-row small {
  color: #7a8a9a;
  font-size: 0.78em;
}

.paste-check-icon {
  flex-shrink: 0;
  font-size: 0.85em;
  font-weight: 700;
  margin-top: 1px;
  width: 16px;
}

.paste-check-ok .paste-check-icon { color: #7dffae; }
.paste-check-warn .paste-check-icon { color: #fcd34d; }
.paste-check-fail .paste-check-icon { color: #ff9b9b; }

.paste-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.warning-text {
  color: #fcd34d;
}

.grid,
.panel-grid {
  display: grid;
  gap: 18px;
}

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

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid rgba(82, 167, 255, 0.16);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  color: rgba(130, 175, 215, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

tbody tr:hover td {
  background: rgba(39, 213, 255, 0.025);
}

tr:last-child td {
  border-bottom: 0;
}

.list,
.link-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  display: grid;
  gap: 4px;
}

.link-list li,
.list.compact li {
  align-items: start;
  background: rgba(3, 10, 21, 0.58);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.link-list a,
.list.compact a {
  overflow-wrap: anywhere;
}

.list span {
  color: var(--muted);
}

.metric {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 4px;
}

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

.form,
.form-grid {
  display: grid;
  gap: 14px;
}

.filters {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

label {
  color: #aab8cf;
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
}

input {
  background: rgba(3, 10, 21, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 6px;
  color: #f4fbff;
  font: inherit;
  min-height: 42px;
  padding: 8px 10px;
}

input::placeholder,
textarea::placeholder {
  color: #6f8198;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(39, 213, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(39, 213, 255, 0.12);
  outline: 0;
}

textarea {
  background: rgba(3, 10, 21, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 6px;
  color: #f4fbff;
  font: inherit;
  padding: 8px 10px;
  resize: vertical;
}

pre.example {
  background: rgba(3, 10, 21, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 6px;
  overflow-x: auto;
  padding: 12px;
  white-space: pre-wrap;
}

select {
  background: rgba(3, 10, 21, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 6px;
  color: #f4fbff;
  font: inherit;
  min-height: 42px;
  padding: 8px 10px;
}

.primary-action,
button {
  background: linear-gradient(135deg, rgba(6, 78, 188, 0.90), rgba(0, 120, 220, 0.90));
  border: 1px solid rgba(39, 213, 255, 0.42);
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(0, 110, 220, 0.20);
  color: rgba(220, 245, 255, 0.96);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 40px;
  padding: 9px 16px;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}

.secondary-action,
button.secondary {
  background: rgba(7, 18, 33, 0.88);
  border: 1px solid rgba(63, 178, 255, 0.34);
  box-shadow: none;
  color: #eaf7ff;
}

.notice {
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 16px 18px;
}

.warning-panel,
.notice.warning {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.34);
  color: #ffd978;
}

.notice ul {
  margin-bottom: 0;
}

.notice.success {
  background: rgba(34, 197, 94, 0.13);
  border: 1px solid rgba(34, 197, 94, 0.38);
  color: #7dffae;
}

.notice.error {
  background: rgba(239, 68, 68, 0.13);
  border: 1px solid rgba(248, 113, 113, 0.42);
  color: var(--danger);
}

.list.compact li {
  grid-template-columns: minmax(160px, 0.25fr) minmax(0, 1fr);
}

.link-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.link-button {
  background: rgba(7, 18, 33, 0.88);
  border: 1px solid rgba(63, 178, 255, 0.34);
  border-radius: 6px;
  color: #eaf7ff;
  display: block;
  padding: 12px 14px;
  text-align: center;
}

.page-head .actions a,
.actions > a,
.secondary-action {
  background: rgba(5, 14, 32, 0.80);
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 8px;
  color: rgba(190, 220, 250, 0.88);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.page-head .actions a:hover,
.actions > a:hover {
  background: rgba(39, 213, 255, 0.07);
  border-color: rgba(39, 213, 255, 0.36);
  color: #eafbff;
}

.page-head .actions a:first-child,
.primary-action {
  background: linear-gradient(135deg, rgba(6, 78, 188, 0.90), rgba(0, 120, 220, 0.90));
  border-color: rgba(39, 213, 255, 0.50);
  box-shadow: 0 0 16px rgba(0, 120, 220, 0.22);
  color: rgba(220, 245, 255, 0.98);
}

.data-table {
  border-collapse: collapse;
  width: 100%;
}

.status-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 9px;
  text-transform: uppercase;
}

.link-button.compact-action {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 10px;
}

.muted-row {
  opacity: 0.55;
}

.reviewed-row {
  background: rgba(34, 197, 94, 0.08);
}

.best-move {
  border-color: rgba(34, 197, 94, 0.42);
}

.badge {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: #dbeafe;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  min-width: 58px;
  padding: 5px 8px;
  text-align: center;
}

.badge.good {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.42);
  color: #7dffae;
}

.badge.risky {
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
}

.badge.avoid {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.42);
  color: var(--danger);
}

.badge.buy {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.42);
  color: #7dffae;
}

.badge.maybe {
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
}

.badge.research,
.badge.research-more {
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(39, 213, 255, 0.42);
  color: #7ee8ff;
}

.badge.alert {
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
  margin: 2px 4px 2px 0;
  min-width: 0;
  white-space: nowrap;
}

.trust-badge-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.trust-badge {
  align-items: center;
  background: rgba(18, 31, 50, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  color: #dbeafe;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  margin: 2px 4px 2px 0;
  min-height: 22px;
  padding: 5px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.trust-badge.trust-high,
.trust-badge.freshness-fresh,
.trust-badge.market-raw-card,
.trust-badge.market-graded-card,
.trust-badge.market-sealed-product,
.trust-badge.market-booster-pack,
.trust-badge.market-booster-box {
  background: rgba(34, 197, 94, 0.13);
  border-color: rgba(34, 197, 94, 0.42);
  color: #7dffae;
}

.trust-badge.trust-medium,
.trust-badge.freshness-aging,
.trust-badge.market-binder-lot,
.trust-badge.market-collection,
.trust-badge.risk-flag {
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
}

.trust-badge.trust-low,
.trust-badge.freshness-stale,
.trust-badge.freshness-missing,
.trust-badge.market-unknown,
.trust-badge.safety-blocked {
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(248, 113, 113, 0.46);
  color: #ffb4b4;
}

.trust-badge.safety-blocked {
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.18);
}

.watchlist-form {
  grid-template-columns: 2fr 1fr 1fr 0.8fr;
}

.parse-summary {
  border-top: 1px solid rgba(82, 167, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 16px;
  padding-top: 14px;
}

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

.inline-form {
  display: inline;
}

.inline-form button {
  min-height: 0;
  padding: 8px 10px;
}

.inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.inline-options label {
  align-items: center;
  display: flex;
}

.action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field-group {
  display: grid;
  gap: 6px;
}

.section-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.beginner-steps {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.beginner-steps a {
  background: rgba(3, 10, 21, 0.7);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 8px;
  color: #eaf7ff;
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
}

.beginner-steps span {
  color: var(--muted);
  font-size: 13px;
}

.workflow-note {
  color: var(--muted);
  margin-bottom: 14px;
}

.empty-state {
  background: rgba(4, 12, 26, 0.55);
  border: 1px solid rgba(82, 167, 255, 0.08);
  border-radius: 12px;
  color: rgba(130, 165, 200, 0.65);
  font-size: 13px;
  padding: 28px 20px;
  text-align: center;
}

.command-hero {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 18px;
  max-width: 1180px;
}

.command-hero h1 {
  font-size: 40px;
  max-width: 760px;
}

.command-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.command-card {
  background: rgba(3, 10, 21, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-height: 230px;
  padding: 20px;
}

.command-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.command-card strong {
  font-size: 42px;
  line-height: 1;
}

.command-card p {
  color: var(--muted);
  min-height: 52px;
}

.command-button {
  align-self: end;
  background: var(--ink);
  border-radius: 6px;
  color: white;
  display: block;
  padding: 12px 14px;
  text-align: center;
}

.research-card {
  border-top: 5px solid #2f80ed;
}

.buy-card {
  border-top: 5px solid var(--accent);
}

.avoid-card {
  border-top: 5px solid var(--danger);
}

.sell-card {
  border-top: 5px solid #7a4a00;
}

.question-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto 18px;
  max-width: 1180px;
}

.question-panel {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 20px;
}

.research-panel {
  border-top: 5px solid #2f80ed;
}

.buy-panel {
  border-top: 5px solid var(--accent);
}

.avoid-panel {
  border-top: 5px solid var(--danger);
}

.sell-panel {
  border-top: 5px solid #7a4a00;
}

.question-head {
  display: grid;
  gap: 5px;
}

.question-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.question-head h2 {
  font-size: 22px;
  margin: 0;
}

.command-item-list {
  display: grid;
  gap: 12px;
}

.command-item {
  align-content: start;
  background: rgba(5, 14, 30, 0.80);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.command-item strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
}

.command-item span {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.command-item dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.command-item dl div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

.command-item dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.command-item dd {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.command-item p {
  color: var(--muted);
  margin: 0;
}

.command-item .command-button {
  align-self: start;
}

.command-empty {
  display: grid;
  gap: 8px;
}

.command-empty strong {
  color: var(--ink);
}

.command-empty span {
  color: var(--muted);
}

.badge.neutral {
  background: rgba(28, 48, 78, 0.55);
  border-color: rgba(82, 167, 255, 0.18);
  color: rgba(160, 195, 235, 0.80);
}

.badge.sell {
  background: rgba(218, 130, 0, 0.14);
  border-color: rgba(251, 180, 40, 0.40);
  color: #fbc740;
}

.workflow-panel {
  background: rgba(5, 12, 28, 0.82);
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
}

.workflow-lane {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.workflow-lane i {
  display: none;
}

.workflow-lane a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 14px;
}

.workflow-lane span {
  color: var(--muted);
  font-size: 13px;
}

.workflow-lane em {
  align-self: end;
  background: rgba(3, 10, 21, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 6px;
  color: rgba(190, 220, 250, 0.88);
  font-style: normal;
  font-weight: 700;
  padding: 8px 10px;
  text-align: center;
}

/* .warning-panel amber border is set in the combined .warning-panel, .notice.warning rule above */

.warning-list {
  display: grid;
  gap: 10px;
}

.warning-list div {
  background: rgba(239, 68, 68, 0.13);
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.warning-list span {
  color: var(--muted);
}

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

.collection-snapshot,
.dashboard-actions {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
}

.snapshot-grid div {
  background: rgba(3, 10, 21, 0.7);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.snapshot-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.snapshot-grid strong {
  font-size: 22px;
}

.pokemon-status-panel {
  border-top: 1px solid rgba(39, 213, 255, 0.42);
}

.pokemon-status-grid {
  margin-bottom: 12px;
}

.status-details {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-details div {
  background: rgba(3, 10, 21, 0.7);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.status-details span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-details strong {
  font-size: 15px;
}

.quick-actions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.quick-actions a {
  background: rgba(7, 18, 33, 0.88);
  border: 1px solid rgba(63, 178, 255, 0.34);
  border-radius: 8px;
  color: #eaf7ff;
  padding: 16px 12px;
  text-align: center;
}

.auto-seed-filters .grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.auto-import-controls {
  align-items: end;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(120px, 0.8fr)) minmax(140px, 0.7fr) auto;
}

.checkbox-label {
  align-items: center;
  display: flex;
  min-height: 42px;
}

.mode-notes {
  margin-top: 12px;
}

.lookup-filters {
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
}

.inventory-filters {
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) auto;
}

.radar-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.pokemon-api-search {
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.8fr) repeat(3, minmax(120px, 1fr)) auto;
}

.pokemon-api-bulk {
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
}

.import-actions {
  margin-top: 14px;
}

.card-thumb {
  border-radius: 6px;
  display: block;
  max-width: 56px;
  width: 56px;
}

.card-hero-image {
  border-radius: 8px;
  max-width: 240px;
  width: 100%;
}

.lookup-chip {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: #dbeafe;
  display: inline-block;
  font-size: 0.8rem;
  margin: 2px 4px 2px 0;
  padding: 4px 9px;
}

.lookup-chip.tcgplayer {
  background: rgba(39, 213, 255, 0.1);
  border-color: rgba(39, 213, 255, 0.3);
  color: #a5f3ff;
}

.lookup-chip.cardmarket {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #7dffae;
}

.lookup-chip.manual {
  background: rgba(255, 217, 120, 0.1);
  border-color: rgba(255, 217, 120, 0.3);
  color: #fde68a;
}

.summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 16px;
}

.summary-card span,
.summary-card small {
  color: var(--muted);
}

.summary-card strong {
  font-size: 24px;
}

.chart-row {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.sparkline {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  height: 70px;
}

.sparkline span {
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  display: block;
  flex: 1;
  min-width: 10px;
}

.bar-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 1.2fr) minmax(120px, 2fr) minmax(72px, 0.6fr);
  margin-bottom: 12px;
}

.bar-row div {
  background: #eef2f7;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.bar-row i {
  background: var(--accent);
  display: block;
  height: 100%;
}

.bar-row i.negative {
  background: var(--danger);
}

@media (max-width: 760px) {
  .topbar {
    min-height: auto;
  }

  .topbar-inner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
  }

  .nav-menu {
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    width: 100%;
  }

  .nav-link {
    height: auto;
    padding: 8px 12px;
  }

  .nav-group summary {
    height: auto;
    padding: 8px 12px;
  }

  .nav-right {
    flex-wrap: wrap;
    width: 100%;
  }

  .nav-group {
    align-items: flex-start;
  }

  .nav-dropdown {
    border-radius: 10px;
    min-width: 0;
    position: static;
    width: 100%;
  }

  .nav-dropdown a {
    padding-left: 14px;
  }

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

  .command-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .command-hero h1 {
    font-size: 32px;
  }

  .command-grid,
  .question-grid,
  .workflow-lane,
  .snapshot-grid,
  .status-details,
  .quick-actions {
    grid-template-columns: 1fr;
  }

  .workflow-lane i {
    color: var(--muted);
    display: block;
    font-style: normal;
    text-align: center;
  }

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

  .auto-seed-filters .grid.four {
    grid-template-columns: 1fr;
  }

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

  .beginner-steps {
    grid-template-columns: 1fr;
  }

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

  .panel {
    overflow-x: auto;
  }
}

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 149, 255, 0.16), transparent 32rem),
    radial-gradient(circle at 80% 8%, rgba(132, 72, 255, 0.14), transparent 30rem),
    #050914;
}

.topbar {
  background: rgba(5, 9, 20, 0.92);
  border-bottom-color: rgba(82, 167, 255, 0.10);
  box-shadow: 0 1px 0 rgba(82, 167, 255, 0.05), 0 12px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(160%);
}

.brand {
  color: #f0f8ff;
}

.nav-link {
  color: rgba(170, 195, 228, 0.82);
}

.nav-group summary {
  color: rgba(170, 195, 228, 0.82);
}

.nav-group[open] summary {
  background: none;
  border-color: transparent;
  border-bottom-color: rgba(39, 213, 255, 0.75);
  color: var(--accent);
}

.nav-group a {
  background: rgba(6, 12, 28, 0.97);
  color: #b0cce8;
}

.nav-group a:hover {
  background: rgba(39, 213, 255, 0.09);
}

.shell {
  max-width: 1680px;
  padding-left: 32px;
  padding-right: 32px;
}

.command-center-page {
  color: #e9f4ff;
  display: grid;
  gap: 22px;
  margin: 0 auto;
  width: 100%;
}

.command-center-page .eyebrow {
  color: #27d5ff;
  text-shadow: 0 0 18px rgba(39, 213, 255, 0.45);
}

.cc-hero {
  align-items: center;
  background:
    linear-gradient(115deg, rgba(8, 17, 31, 0.92), rgba(7, 10, 25, 0.68)),
    radial-gradient(circle at 74% 45%, rgba(0, 153, 255, 0.22), transparent 22rem);
  border: 1px solid rgba(87, 179, 255, 0.24);
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(0, 149, 255, 0.08), 0 22px 70px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 36px;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.75fr);
  min-height: 390px;
  overflow: hidden;
  padding: 46px 44px;
  position: relative;
}

.cc-hero::after {
  background-image:
    linear-gradient(rgba(39, 213, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 213, 255, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  position: absolute;
}

.cc-hero-copy,
.cc-card-stack {
  position: relative;
  z-index: 1;
}

.cc-hero h1 {
  color: #ffffff;
  font-size: 58px;
  line-height: 1.04;
  max-width: 860px;
  text-transform: uppercase;
}

.cc-subtitle {
  color: #b8c7dc;
  font-size: 18px;
  line-height: 1.55;
  max-width: 720px;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cc-actions.compact {
  margin-top: 8px;
}

.cc-button,
.command-center-page .section-title a,
.research-tools-grid a {
  background: rgba(5, 14, 32, 0.80);
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 8px;
  color: rgba(190, 220, 250, 0.88);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.cc-button:hover {
  background: rgba(39, 213, 255, 0.07);
  border-color: rgba(39, 213, 255, 0.36);
  color: #eafbff;
}

.cc-button.primary {
  background: linear-gradient(135deg, rgba(6, 78, 188, 0.90), rgba(0, 120, 220, 0.90));
  border-color: rgba(39, 213, 255, 0.50);
  box-shadow: 0 0 16px rgba(0, 120, 220, 0.22);
  color: rgba(220, 245, 255, 0.98);
}

.cc-card-stack {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 260px;
}

.tcg-card {
  aspect-ratio: 0.72;
  border-radius: 8px;
  box-shadow: 0 0 28px rgba(0, 149, 255, 0.28);
  color: #fff;
  display: grid;
  gap: 10px;
  height: 245px;
  padding: 18px;
}

.ghost-card {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.16), transparent 42%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin-left: -34px;
  transform: rotate(-8deg);
}

.ghost-card:first-child {
  margin-left: 0;
}

.ghost-card.cyan {
  border-color: rgba(39, 213, 255, 0.72);
  transform: translateY(-18px);
}

.ghost-card.violet {
  border-color: rgba(168, 85, 247, 0.72);
}

.ghost-card.amber {
  border-color: rgba(251, 146, 60, 0.72);
  transform: rotate(8deg);
}

.tcg-card span,
.tcg-card em {
  color: #b9cbe2;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.tcg-card strong {
  align-self: center;
  font-size: 24px;
  line-height: 1.1;
}

.cc-metric-strip {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cc-paste-prompt {
  align-items: center;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.9), rgba(5, 12, 23, 0.9));
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-left: 3px solid #0088ff;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 20px;
}

.cc-paste-prompt > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-paste-prompt strong {
  color: #e8f4ff;
  font-size: 0.95em;
}

.cc-paste-prompt span {
  color: #7a8a9a;
  font-size: 0.82em;
}

.cc-metric-card,
.cc-panel,
.question-panel,
.cc-status-bar {
  background: linear-gradient(160deg, rgba(8, 18, 38, 0.92), rgba(4, 10, 22, 0.92));
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cc-metric-card {
  color: #eaf7ff;
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 20px;
}

.cc-metric-card span,
.cc-metric-card em {
  color: #9fb2ca;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.cc-metric-card strong {
  font-size: 34px;
  line-height: 1;
}

.cc-metric-card.cyan {
  border-color: rgba(39, 213, 255, 0.4);
}

.cc-metric-card.violet {
  border-color: rgba(168, 85, 247, 0.42);
}

.cc-metric-card.green {
  border-color: rgba(34, 197, 94, 0.4);
}

.cc-metric-card.red {
  border-color: rgba(248, 113, 113, 0.42);
}

.cc-main-grid,
.cc-secondary-grid {
  display: grid;
  gap: 18px;
}

.cc-main-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.38fr) minmax(330px, 0.9fr);
}

.cc-secondary-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.9fr);
}

.cc-pulse-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pulse-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

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

.feed-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-main small {
  color: #7a8a9a;
  font-size: 0.78em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-panel {
  overflow: hidden;
  padding: 24px;
}

.cc-panel h2,
.question-panel h2 {
  color: #f8fbff;
  line-height: 1.2;
  margin-bottom: 0;
}

.cc-panel-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cc-panel .eyebrow,
.question-head span {
  margin-bottom: 8px;
}

.cc-lead,
.command-center-page .subtle,
.command-center-page .command-item p,
.command-center-page .command-item span,
.command-center-page .empty-state,
.command-center-page .empty-state span {
  color: #aab8cf;
}

.status-pill,
.decision-badge,
.risk-badge,
.status-dot {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.decision-badge {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #dbeafe;
}

.decision-badge.good,
.decision-badge.sell,
.decision-badge.green {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.42);
  color: #7dffae;
}

.decision-badge.research,
.decision-badge.cyan {
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(39, 213, 255, 0.42);
  color: #7ee8ff;
}

.decision-badge.avoid,
.decision-badge.warning {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.42);
  color: #ff9b9b;
}

.status-pill,
.status-dot,
.risk-badge {
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.34);
  color: #bde7ff;
}

.cc-reason-list {
  display: grid;
  gap: 11px;
  margin: 20px 0;
  padding: 0;
}

.cc-reason-list li {
  color: #c8d7ea;
  list-style: none;
  padding-left: 22px;
  position: relative;
}

.cc-reason-list li::before {
  color: #22c55e;
  content: "+";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.cc-feed {
  display: grid;
  gap: 10px;
}

.feed-row {
  align-items: center;
  background: rgba(3, 10, 21, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.16);
  border-radius: 6px;
  color: #edf7ff;
  display: grid;
  gap: 10px;
  grid-template-columns: 104px minmax(0, 1.25fr) minmax(110px, 0.55fr) minmax(92px, auto);
  min-height: 48px;
  padding: 10px 12px;
}

.feed-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-row small {
  color: #91a4bd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-row em {
  color: #63f59b;
  font-style: normal;
  font-weight: 900;
}

.feed-trust {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feed-trust .trust-badge {
  font-size: 10px;
  margin: 0;
  min-height: 20px;
  padding: 4px 7px;
}

.best-move-panel .trust-badge-row {
  margin: 12px 0 2px;
}

.command-center-page .command-item .trust-badge-row {
  margin: 0;
}

.command-center-page .command-item .trust-badge {
  display: inline-flex;
}

.command-more-note {
  border: 1px dashed rgba(82, 167, 255, 0.22);
  border-radius: 6px;
  color: #8fa6c2;
  font-size: 12px;
  font-weight: 800;
  padding: 9px 10px;
  text-align: center;
}

.radar-orb {
  align-items: center;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.34), rgba(34, 197, 94, 0.06) 34%, transparent 36%);
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  margin: 8px auto 18px;
  max-width: 132px;
}

.radar-orb span {
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 24px #22c55e;
  height: 14px;
  width: 14px;
}

.cc-status-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.cc-status-list div {
  align-items: center;
  border-bottom: 1px solid rgba(82, 167, 255, 0.12);
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
}

.cc-status-list dt {
  color: #91a4bd;
  font-weight: 800;
}

.cc-status-list dd {
  color: #eaf7ff;
  font-weight: 900;
  margin: 0;
}

.notice.warning {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.34);
  color: #ffd978;
  display: grid;
  gap: 4px;
  line-height: 1.45;
  margin: 18px 0 0;
}

.matrix-scroll {
  overflow-x: auto;
}

.matrix-panel {
  min-width: 0;
}

.research-matrix {
  min-width: 900px;
}

.research-matrix th,
.research-matrix td {
  border-bottom-color: rgba(82, 167, 255, 0.16);
  color: #c8d7ea;
  line-height: 1.35;
  padding: 12px 11px;
}

.research-matrix th {
  color: #7fb9e8;
  font-size: 11px;
  letter-spacing: 0;
}

.research-matrix td:first-child {
  max-width: 280px;
}

.research-matrix td:first-child a {
  color: #dff6ff;
  display: inline-block;
  font-weight: 900;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-status-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.workflow-step {
  align-items: center;
  background: rgba(3, 10, 21, 0.7);
  border: 1px solid rgba(82, 167, 255, 0.2);
  border-radius: 8px;
  color: #eaf7ff;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  min-height: 78px;
  padding: 12px 14px;
}

.workflow-step span {
  align-items: center;
  border: 1px solid rgba(39, 213, 255, 0.45);
  border-radius: 50%;
  color: #7ee8ff;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.workflow-step strong {
  font-size: 15px;
  line-height: 1.2;
}

.workflow-step small {
  color: #93a8c2;
  grid-column: 2;
  line-height: 1.35;
}

.workflow-step em {
  align-self: center;
  color: #7dffae;
  grid-column: 3;
  grid-row: 1 / span 2;
  font-style: normal;
  font-weight: 900;
}

.workflow-step.needs-data em,
.workflow-step.current em {
  color: #ffd978;
}

.workflow-step.later em {
  color: #91a4bd;
}

.research-tools-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tools-panel {
  grid-column: 1 / -1;
}

.command-sections {
  gap: 18px;
  max-width: none;
}

.command-center-page .question-panel {
  border-top-width: 1px;
  gap: 14px;
  padding: 20px;
}

.command-center-page .research-panel {
  border-color: rgba(39, 213, 255, 0.34);
}

.command-center-page .buy-panel {
  border-color: rgba(34, 197, 94, 0.34);
}

.command-center-page .avoid-panel {
  border-color: rgba(248, 113, 113, 0.34);
}

.command-center-page .sell-panel {
  border-color: rgba(251, 191, 36, 0.34);
}

.command-center-page .command-item,
.command-center-page .command-item dl div,
.command-center-page .empty-state {
  background: rgba(3, 10, 21, 0.64);
  border-color: rgba(82, 167, 255, 0.16);
}

.command-center-page .command-item {
  gap: 10px;
  padding: 13px;
}

.command-center-page .command-item strong {
  color: #f4fbff;
  font-size: 16px;
}

.command-center-page .command-item dl {
  gap: 9px;
}

.command-center-page .command-item dl div {
  padding: 9px;
}

.command-center-page .command-item dt {
  font-size: 10px;
}

.command-center-page .command-item dd {
  font-size: 14px;
}

.command-center-page .command-item dd {
  color: #eff8ff;
}

.command-center-page .command-button {
  background: linear-gradient(135deg, #043b91, #0077d9);
  border: 1px solid rgba(100, 211, 255, 0.55);
}

.cc-status-bar {
  align-items: center;
  color: #9fb2ca;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 16px 18px;
}

.cc-status-bar span {
  border-right: 1px solid rgba(82, 167, 255, 0.2);
  padding-right: 18px;
}

.cc-status-bar span:last-child {
  border-right: 0;
}

.system-ok {
  color: #55f28f;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .cc-main-grid,
  .cc-secondary-grid,
  .cc-pulse-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .workflow-status-grid {
    grid-template-columns: 1fr;
  }

  .research-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Homepage: deal radar metric strip ──────────────────────────────────────── */

.cc-deal-radar-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cc-deal-radar-card {
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.9), rgba(5, 12, 23, 0.9));
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(0, 149, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #eaf7ff;
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cc-deal-radar-card:hover {
  border-color: rgba(99, 179, 255, 0.48);
  box-shadow: inset 0 0 24px rgba(0, 149, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.3);
}

.cc-deal-radar-card span {
  color: #9fb2ca;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-deal-radar-card strong {
  font-size: 32px;
  line-height: 1;
}

.cc-deal-radar-card em {
  color: #6a7a8a;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.cc-deal-radar-card.good {
  border-color: rgba(34, 197, 94, 0.36);
}

.cc-deal-radar-card.good strong {
  color: #7dffae;
}

.cc-deal-radar-card.neutral {
  border-color: rgba(82, 167, 255, 0.32);
}

.cc-deal-radar-card.neutral strong {
  color: #93c5fd;
}

.cc-deal-radar-card.research {
  border-color: rgba(39, 213, 255, 0.32);
}

.cc-deal-radar-card.research strong {
  color: #7ee8ff;
}

.cc-deal-radar-card.primary {
  background: linear-gradient(160deg, rgba(6, 78, 188, 0.28), rgba(0, 136, 255, 0.14));
  border-color: rgba(100, 211, 255, 0.5);
}

.cc-deal-radar-card.primary strong {
  color: #60d4ff;
  font-size: 22px;
}

/* ── Homepage: empty state ──────────────────────────────────────────────────── */

.cc-radar-empty {
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.9), rgba(5, 12, 23, 0.9));
  border: 1px solid rgba(82, 167, 255, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 24px;
  padding: 28px 24px;
}

.cc-radar-empty > div:first-child strong {
  color: #e8f4ff;
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}

.cc-radar-empty > div:first-child span {
  color: #7a8a9a;
  font-size: 14px;
}

.cc-steps-panel {
  border-top: 1px solid rgba(82, 167, 255, 0.12);
  padding-top: 20px;
}

.cc-steps-panel h3 {
  color: #c8d8ea;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.cc-steps {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.cc-steps li {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.cc-step-num {
  align-items: center;
  background: rgba(0, 136, 255, 0.16);
  border: 1px solid rgba(100, 211, 255, 0.36);
  border-radius: 50%;
  color: #60d4ff;
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  margin-top: 1px;
  width: 26px;
}

.cc-step-body {
  display: grid;
  gap: 3px;
}

.cc-step-body strong {
  color: #e0eeff;
  font-size: 14px;
}

.cc-step-body span {
  color: #6a7a8a;
  font-size: 13px;
  line-height: 1.45;
}

.cc-step-body a {
  color: #4a9fd8;
  font-size: 13px;
  font-weight: 700;
  margin-top: 3px;
  text-decoration: none;
}

.cc-step-body a:hover {
  color: #7ac8f0;
}

/* ── Homepage: deals sections ───────────────────────────────────────────────── */

.cc-deals-section {
  display: grid;
  gap: 12px;
}

.cc-section-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.cc-section-head h2 {
  color: #e8f4ff;
  font-size: 17px;
  margin: 0;
}

.cc-section-head a {
  color: #4a9fd8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.cc-section-head a:hover {
  color: #7ac8f0;
}

.cc-deal-list {
  display: grid;
  gap: 8px;
}

.cc-deal-row {
  align-items: center;
  background: rgba(5, 14, 28, 0.7);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 6px;
  color: #eaf7ff;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 52px;
  padding: 12px 16px;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.cc-deal-row:hover {
  background: rgba(5, 14, 28, 0.92);
  border-color: rgba(99, 179, 255, 0.3);
}

.deal-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.deal-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-main small {
  color: #6a7a8a;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Homepage: status strip + advanced links ────────────────────────────────── */

.cc-status-strip {
  align-items: center;
  border-top: 1px solid rgba(82, 167, 255, 0.1);
  color: #4a5a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 16px;
  padding-top: 14px;
}

.cc-status-strip a {
  color: #4a7090;
  text-decoration: none;
}

.cc-status-strip a:hover {
  color: #6aa4c8;
}

.cc-advanced-links {
  border-top: 1px solid rgba(82, 167, 255, 0.08);
  padding-top: 10px;
}

.cc-advanced-links > summary {
  color: #3a4a5a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 0;
  text-transform: uppercase;
  user-select: none;
}

.cc-advanced-links > summary:hover {
  color: #5a7a9a;
}

.cc-advanced-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
}

.cc-advanced-grid a {
  color: #4a7090;
  font-size: 13px;
  text-decoration: none;
}

.cc-advanced-grid a:hover {
  color: #6aa4c8;
}

/* ── Responsive: homepage strips ────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cc-deal-radar-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shell {
    padding: 18px 14px 34px;
  }

  .cc-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 20px;
  }

  .cc-hero h1 {
    font-size: 34px;
  }

  .cc-card-stack {
    min-height: 210px;
  }

  .tcg-card {
    height: 190px;
    padding: 12px;
  }

  .cc-metric-strip,
  .cc-pulse-grid,
  .workflow-status-grid,
  .research-tools-grid {
    grid-template-columns: 1fr;
  }

  .cc-deal-radar-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-step {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .workflow-step em {
    grid-column: 2;
    grid-row: auto;
  }

  .feed-row {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .feed-row strong,
  .feed-row small,
  .research-matrix td:first-child a {
    white-space: normal;
  }

  .cc-status-list div {
    align-items: start;
    display: grid;
    gap: 4px;
  }
}

/* ── Homepage redesign: search-first "Trivago for TCG" layout ───────────── */

/* Hero */
.hp-hero {
  background:
    linear-gradient(130deg, rgba(4, 14, 30, 0.97) 55%, rgba(6, 18, 38, 0.82)),
    radial-gradient(ellipse at 72% 38%, rgba(0, 140, 255, 0.26), transparent 44%),
    radial-gradient(ellipse at 18% 68%, rgba(100, 40, 255, 0.16), transparent 38%);
  border: 1px solid rgba(87, 179, 255, 0.22);
  border-radius: 12px;
  box-shadow:
    inset 0 0 60px rgba(0, 136, 255, 0.07),
    0 28px 80px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  padding: 52px 48px 44px;
  position: relative;
}

.hp-hero::before {
  background-image:
    linear-gradient(rgba(39, 213, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 213, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hp-hero-inner {
  max-width: 820px;
  position: relative;
  z-index: 1;
}

.hp-hero-title {
  color: #ffffff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.06;
  margin-bottom: 16px;
  text-wrap: balance;
}

.hp-hero-sub {
  color: #a8c0d8;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 680px;
}

/* Search bar */
.hp-search-form {
  margin-bottom: 22px;
}

.hp-search-bar {
  align-items: center;
  background: rgba(6, 16, 32, 0.88);
  border: 1px solid rgba(100, 190, 255, 0.48);
  border-radius: 50px;
  box-shadow:
    0 0 0 4px rgba(39, 213, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.32);
  display: flex;
  gap: 0;
  max-width: 720px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.hp-search-bar:focus-within {
  border-color: rgba(39, 213, 255, 0.78);
  box-shadow:
    0 0 0 4px rgba(39, 213, 255, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.36);
}

.hp-search-input {
  background: transparent;
  border: none;
  border-radius: 0;
  color: #eaf4ff;
  flex: 1;
  font-size: 16px;
  min-height: 56px;
  outline: none;
  padding: 0 20px 0 24px;
}

.hp-search-input::placeholder {
  color: #4a6080;
  font-size: 15px;
}

.hp-search-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.hp-search-btn {
  background: linear-gradient(135deg, #0550c0, #0099ff);
  border: none;
  border-radius: 0 50px 50px 0;
  box-shadow: none;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  min-height: 56px;
  padding: 0 26px;
  transition: background 0.14s;
  white-space: nowrap;
}

.hp-search-btn:hover {
  background: linear-gradient(135deg, #0660d4, #00aeff);
}

.hp-hero-actions {
  gap: 10px;
  margin-top: 0;
}

/* Game chips */
.hp-game-chips-section {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.hp-game-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hp-game-chip {
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  user-select: none;
  white-space: nowrap;
}

.hp-game-chip.active {
  background: rgba(39, 213, 255, 0.12);
  border-color: rgba(39, 213, 255, 0.55);
  color: #7ee8ff;
}

.hp-game-chip.disabled {
  background: rgba(10, 20, 36, 0.5);
  color: #3a4d63;
  cursor: default;
  opacity: 0.7;
}

.hp-game-note {
  color: #3d5060;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

/* Value proposition strip */
.hp-value-strip {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hp-value-card {
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.88), rgba(4, 12, 24, 0.9));
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 20px;
}

.hp-value-catalog { border-top: 2px solid rgba(39, 213, 255, 0.6); }
.hp-value-deals   { border-top: 2px solid rgba(34, 197, 94, 0.6); }
.hp-value-research{ border-top: 2px solid rgba(168, 85, 247, 0.6); }
.hp-value-track   { border-top: 2px solid rgba(251, 146, 60, 0.6); }

.hp-value-eyebrow {
  color: #4a6a82;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-value-card strong {
  color: #d8eeff;
  font-size: 15px;
  line-height: 1.25;
}

.hp-value-card p {
  color: #6a8aa8;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* Catalog status strip */
.hp-catalog-strip {
  background: rgba(4, 12, 26, 0.72);
  border: 1px solid rgba(39, 213, 255, 0.2);
  border-radius: 10px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.hp-catalog-stat {
  border-right: 1px solid rgba(39, 213, 255, 0.12);
  display: grid;
  gap: 4px;
  padding: 18px 22px;
}

.hp-catalog-stat:last-child {
  border-right: none;
}

.hp-catalog-stat strong {
  color: #c4e4ff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.hp-catalog-stat span {
  color: #3d5872;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Main action cards grid */
.hp-action-section {
  display: grid;
  gap: 12px;
}

.hp-action-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hp-action-card {
  background: rgba(6, 14, 28, 0.8);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 10px;
  color: #e2f0ff;
  display: grid;
  gap: 8px;
  padding: 22px 18px 18px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.hp-action-card:hover {
  background: rgba(8, 20, 40, 0.92);
  border-color: rgba(99, 179, 255, 0.42);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.hp-action-radar  { border-top: 3px solid rgba(39, 213, 255, 0.7); }
.hp-action-paste  { border-top: 3px solid rgba(34, 197, 94, 0.7); }
.hp-action-hunt   { border-top: 3px solid rgba(168, 85, 247, 0.7); }
.hp-action-lookup { border-top: 3px solid rgba(251, 146, 60, 0.7); }
.hp-action-inventory { border-top: 3px solid rgba(251, 191, 36, 0.7); }

.hp-action-eyebrow {
  color: #3a5468;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-action-card strong {
  color: #dff2ff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.hp-action-card p {
  color: #5a7a9a;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.hp-action-link {
  align-self: end;
  color: #4a88b8;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  margin-top: 4px;
}

.hp-action-card:hover .hp-action-link {
  color: #6aacdc;
}

/* Admin & Data secondary section */
.hp-admin-section {
  border-top: 1px solid rgba(82, 167, 255, 0.06);
  margin-top: 4px;
  opacity: 0.66;
  padding-top: 12px;
}

.hp-admin-title {
  color: #243244;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.hp-admin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.hp-admin-links a {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  color: #2d4155;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
}

.hp-admin-links a:hover {
  border-color: rgba(255, 255, 255, 0.10);
  color: #4a6278;
}

/* ── Landing page footer strip ───────────────────────────────────────────── */

.ca-landing-footer {
  align-items: center;
  color: rgba(120, 155, 185, 0.55);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 0 12px;
  justify-content: center;
  padding: 18px 0 20px;
}

.ca-landing-footer a {
  color: rgba(140, 182, 220, 0.66);
  text-decoration: none;
  transition: color 0.12s;
}

.ca-landing-footer a:hover {
  color: rgba(180, 215, 245, 0.84);
}

.calf-sep {
  opacity: 0.35;
}

/* ── Site-wide beta footer ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid rgba(82, 167, 255, 0.08);
  color: rgba(120, 155, 185, 0.5);
  font-size: 12px;
  margin-top: 48px;
  padding: 20px 28px 28px;
  text-align: center;
}

.site-footer-brand {
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.site-footer-disclaimer {
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .hp-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .hp-catalog-stat:nth-child(2) {
    border-right: none;
  }

  .hp-catalog-stat:nth-child(3) {
    border-top: 1px solid rgba(39, 213, 255, 0.12);
  }

  .hp-catalog-stat:nth-child(4) {
    border-top: 1px solid rgba(39, 213, 255, 0.12);
  }
}

@media (max-width: 760px) {
  .hp-hero {
    padding: 30px 22px 26px;
  }

  .hp-hero-title {
    font-size: 32px;
  }

  .hp-hero-sub {
    font-size: 15px;
  }

  .hp-search-input {
    font-size: 14px;
    min-height: 48px;
  }

  .hp-search-btn {
    min-height: 48px;
    padding: 0 16px;
  }

  .hp-value-strip {
    grid-template-columns: 1fr;
  }

  .hp-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hp-catalog-strip {
    grid-template-columns: 1fr 1fr;
  }

  .hp-game-chips-section {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Homepage Visual Polish — home-* / feature-* / metric-* namespace
   These rules only activate on elements that use the new class names.
   They do not modify any other page.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */

.home-shell {
  gap: 14px;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 32px;
}

/* ── Hero panel upgrades ─────────────────────────────────────────────────── */

.home-hero {
  background:
    linear-gradient(155deg,
      rgba(4, 10, 22, 0.99) 0%,
      rgba(5, 12, 28, 0.97) 42%,
      rgba(8, 18, 42, 0.94) 100%),
    radial-gradient(ellipse at 72% 18%, rgba(0, 100, 255, 0.36), transparent 50%),
    radial-gradient(ellipse at 12% 80%, rgba(80, 20, 240, 0.24), transparent 44%),
    radial-gradient(ellipse at 52% 100%, rgba(39, 213, 255, 0.12), transparent 36%);
  border: 1px solid rgba(39, 213, 255, 0.30);
  border-radius: 36px;
  border-top-color: rgba(255, 210, 80, 0.18);
  box-shadow:
    0 0 0 1px rgba(255, 210, 60, 0.08),
    0 0 0 2px rgba(39, 213, 255, 0.04),
    0 0 120px rgba(0, 90, 255, 0.24),
    0 56px 140px rgba(0, 0, 0, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 140px rgba(39, 213, 255, 0.04);
  padding: 36px 56px 42px;
}

.home-hero::before {
  border-radius: 36px;
}

.home-hero::after {
  background: radial-gradient(ellipse at 50% 38%, rgba(39, 213, 255, 0.08), transparent 52%);
  border-radius: 36px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* ── Hero inner: centered content ────────────────────────────────────────── */

.home-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  z-index: 1;
}

.home-hero-inner .eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  opacity: 0.80;
}

.home-hero-inner .hp-hero-title {
  background: linear-gradient(135deg, #ffffff 28%, #b8d8ff 62%, #27d5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 58px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.home-hero-inner .hp-hero-sub {
  font-size: 18px;
  margin: 0 auto 18px;
  max-width: 580px;
  text-align: center;
}

/* ── Hero search bar: wide and tall ─────────────────────────────────────── */

.hero-search-form {
  margin: 0 auto 16px;
  max-width: 1000px;
  width: 100%;
}

.hero-search-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1.5px solid rgba(120, 200, 255, 0.52);
  box-shadow:
    0 0 0 5px rgba(39, 213, 255, 0.06),
    0 8px 40px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  max-width: 100%;
  min-height: 68px;
}

/* Light/cream override — the visual centrepiece */
.hero-search-light {
  background: rgba(238, 248, 255, 0.96);
  border: 1.5px solid rgba(180, 215, 245, 0.75);
  box-shadow:
    0 0 0 6px rgba(39, 213, 255, 0.07),
    0 10px 48px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero-search-light:focus-within {
  border-color: rgba(0, 130, 255, 0.65);
  box-shadow:
    0 0 0 6px rgba(0, 130, 255, 0.12),
    0 0 36px rgba(39, 213, 255, 0.16),
    0 10px 48px rgba(0, 0, 0, 0.60);
}

.hero-search-bar:focus-within {
  border-color: rgba(39, 213, 255, 0.80);
  box-shadow:
    0 0 0 5px rgba(39, 213, 255, 0.14),
    0 0 30px rgba(39, 213, 255, 0.14),
    0 8px 40px rgba(0, 0, 0, 0.56);
}

.hero-search-icon {
  align-items: center;
  color: #5a80a0;
  display: flex;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px 0 22px;
  user-select: none;
}

.hero-search-light .hero-search-icon {
  color: #4a6a8a;
  font-size: 18px;
}

.hero-search-bar .hp-search-input {
  font-size: 16px;
  min-height: 66px;
}

.hero-search-light .hp-search-input {
  background: transparent;
  border: none;
  color: #0a1628;
  font-size: 16px;
}

.home-hero .hp-search-input::placeholder {
  color: #6888a8;
  font-size: 15px;
}

.hero-search-light .hp-search-input::placeholder {
  color: #7a9ab8;
}

.hero-filter-button {
  align-items: center;
  border: 1px solid rgba(100, 150, 200, 0.32);
  border-radius: 6px;
  color: #5a7a9a;
  cursor: default;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  margin-right: 10px;
  padding: 7px 16px;
  user-select: none;
  white-space: nowrap;
}

.hero-search-bar .hp-search-btn {
  background: linear-gradient(135deg, #0448c0, #0088ff);
  box-shadow: 0 0 24px rgba(0, 136, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-height: 66px;
  padding: 0 34px;
}

.hero-search-light .hp-search-btn {
  background: linear-gradient(135deg, #0550d0, #0099ff);
  border-radius: 0 50px 50px 0;
  box-shadow: 0 0 28px rgba(0, 136, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  font-size: 15px;
  font-weight: 800;
  min-height: 66px;
  padding: 0 38px;
}

.hero-search-bar .hp-search-btn:hover {
  background: linear-gradient(135deg, #0558d8, #00a0ff);
  box-shadow: 0 0 32px rgba(0, 160, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-search-light .hp-search-btn:hover {
  background: linear-gradient(135deg, #0662e8, #00b0ff);
  box-shadow: 0 0 38px rgba(0, 170, 255, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ── CTA buttons: de-emphasised at hero bottom ───────────────────────────── */

.home-hero-cta {
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 0;
  opacity: 0.72;
}

.home-hero-cta .cc-button {
  font-size: 13px;
  min-height: 36px;
  padding: 8px 16px;
}

/* ── Game chip row ───────────────────────────────────────────────────────── */

.game-chip-row {
  border-top: 1px solid rgba(39, 213, 255, 0.12);
  justify-content: center;
  margin: 0 auto 16px;
  max-width: 1000px;
  padding-top: 14px;
}

.game-chip-row .hp-game-chips {
  gap: 8px;
  justify-content: center;
}

.game-chip-row .hp-game-chip {
  font-size: 13px;
  padding: 10px 18px;
}

.game-chip-row .hp-game-chip.active {
  background: rgba(39, 213, 255, 0.16);
  border-color: rgba(39, 213, 255, 0.72);
  box-shadow: 0 0 20px rgba(39, 213, 255, 0.24);
  color: #a0f0ff;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 22px;
}

.game-chip-row .hp-game-chip.disabled {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(82, 167, 255, 0.18);
  color: #3d5570;
  font-size: 12px;
  padding: 8px 16px;
}

.game-chip-row .hp-game-note {
  color: #2a3d54;
}

/* ── Feature strip ───────────────────────────────────────────────────────── */

.feature-strip {
  border-top: 1px solid rgba(39, 213, 255, 0.12);
  padding-top: 16px;
  text-align: left;
}

.feature-card {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 14px;
  padding: 18px 20px;
}

.feature-icon {
  border-radius: 10px;
  flex-shrink: 0;
  height: 44px;
  width: 44px;
}

.fc-catalog  {
  background: rgba(39, 213, 255, 0.18);
  box-shadow: 0 0 18px rgba(39, 213, 255, 0.12), inset 0 1px 0 rgba(39, 213, 255, 0.30);
}
.fc-deals    {
  background: rgba(34, 197, 94, 0.18);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.12), inset 0 1px 0 rgba(34, 197, 94, 0.30);
}
.fc-research {
  background: rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.12), inset 0 1px 0 rgba(168, 85, 247, 0.30);
}
.fc-track    {
  background: rgba(251, 146, 60, 0.18);
  box-shadow: 0 0 18px rgba(251, 146, 60, 0.12), inset 0 1px 0 rgba(251, 146, 60, 0.30);
}

.feature-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.feature-body strong {
  color: #e8f6ff;
  font-size: 14.5px;
  line-height: 1.25;
}

.feature-body p {
  color: #6080a0;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* ── Metric grid ─────────────────────────────────────────────────────────── */

.metric-grid {
  background: rgba(4, 10, 24, 0.90);
  border: 1px solid rgba(39, 213, 255, 0.28);
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(39, 213, 255, 0.07);
}

.metric-card {
  padding: 22px 28px;
}

.metric-card strong {
  color: #d8efff;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.metric-card span {
  color: #5a7892;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* ── Action card upgrades ────────────────────────────────────────────────── */

.home-action-card {
  background: rgba(5, 12, 26, 0.88);
  border: 1px solid rgba(82, 167, 255, 0.16);
  border-radius: 16px;
  padding: 24px 20px 20px;
  transition: border-color 0.20s, box-shadow 0.20s, transform 0.16s;
}

.home-action-card:hover {
  border-color: rgba(99, 179, 255, 0.34);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(39, 213, 255, 0.08);
  transform: translateY(-3px);
}

.home-action-icon {
  border-radius: 12px;
  flex-shrink: 0;
  height: 46px;
  margin-bottom: 14px;
  width: 46px;
}

.hac-radar     { background: rgba(39, 213, 255, 0.14); border: 1px solid rgba(39, 213, 255, 0.28); }
.hac-paste     { background: rgba(34, 197, 94, 0.14);  border: 1px solid rgba(34, 197, 94, 0.28); }
.hac-hunt      { background: rgba(168, 85, 247, 0.14); border: 1px solid rgba(168, 85, 247, 0.28); }
.hac-lookup    { background: rgba(251, 146, 60, 0.14); border: 1px solid rgba(251, 146, 60, 0.28); }
.hac-inventory { background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.28); }

/* ── Hero brand row ──────────────────────────────────────────────────────── */

.hero-brand-row {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
}

.hero-brand-mark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-brand-name {
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-brand-sub {
  color: #3d5872;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.hero-product-nav {
  align-items: center;
  display: flex;
  gap: 28px;
}

.hero-product-link {
  color: #6888a8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.14s;
}

.hero-product-link:hover {
  color: #b8d4f0;
}

/* ── Hero market strip ───────────────────────────────────────────────────── */

.hero-market-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 20px;
  padding-top: 18px;
}

.hero-market-item {
  align-items: flex-start;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 12px;
  padding: 0 20px;
}

.hero-market-item:first-child {
  padding-left: 0;
}

.hero-market-item:last-child {
  border-right: none;
  padding-right: 0;
}

.hero-market-icon {
  border-radius: 8px;
  flex-shrink: 0;
  height: 36px;
  margin-top: 2px;
  width: 36px;
}

.hmi-compare { background: rgba(39, 213, 255, 0.16); border: 1px solid rgba(39, 213, 255, 0.32); }
.hmi-deal    { background: rgba(34, 197, 94, 0.16);  border: 1px solid rgba(34, 197, 94, 0.32); }
.hmi-catalog { background: rgba(168, 85, 247, 0.16); border: 1px solid rgba(168, 85, 247, 0.32); }
.hmi-alerts  { background: rgba(251, 146, 60, 0.16); border: 1px solid rgba(251, 146, 60, 0.32); }

.hero-market-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hero-market-body strong {
  color: #dff0ff;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-market-body span {
  color: #4a6a88;
  font-size: 12px;
  line-height: 1.45;
}

/* ── Home shell: scoped overrides for action + feature card contrast ─────── */

.home-shell .hp-action-eyebrow {
  color: #4a6882;
}

.home-shell .hp-action-card p {
  color: #6a90b0;
}

.home-shell .hp-action-link {
  color: #5a98c8;
}

.home-shell .hp-action-card:hover .hp-action-link {
  color: #7ac8f0;
}

.home-shell .hp-action-card strong {
  color: #e4f4ff;
}

.home-shell .hp-value-card {
  border-color: rgba(82, 167, 255, 0.24);
}

.home-shell .hp-value-catalog { border-top: 2px solid rgba(39, 213, 255, 0.80); }
.home-shell .hp-value-deals   { border-top: 2px solid rgba(34, 197, 94, 0.80); }
.home-shell .hp-value-research{ border-top: 2px solid rgba(168, 85, 247, 0.80); }
.home-shell .hp-value-track   { border-top: 2px solid rgba(251, 146, 60, 0.80); }

.home-shell .hp-value-eyebrow {
  color: #5a8aaa;
}

/* ── Admin link strip: pill buttons ─────────────────────────────────────── */

.admin-link-strip {
  gap: 6px 8px;
}

.admin-link-strip a {
  background: rgba(6, 14, 28, 0.72);
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 999px;
  color: #2d4158;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}

.admin-link-strip a:hover {
  background: rgba(8, 18, 38, 0.92);
  border-color: rgba(82, 167, 255, 0.28);
  color: #4a6882;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .home-hero {
    border-radius: 24px;
    padding: 28px 32px 34px;
  }

  .home-hero-inner .hp-hero-title {
    font-size: 42px;
  }

  .hero-search-form,
  .game-chip-row {
    max-width: 100%;
  }

  .hero-product-nav {
    gap: 18px;
  }

  .hero-product-link {
    font-size: 13px;
  }

  .hero-market-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .hero-market-item {
    border-right: none;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .home-shell {
    padding-bottom: 40px;
  }

  .home-hero {
    border-radius: 18px;
    padding: 22px 18px 26px;
  }

  .hero-brand-row {
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .hero-brand-name {
    font-size: 18px;
  }

  .hero-product-nav {
    display: none;
  }

  .home-hero-inner .hp-hero-title {
    font-size: 26px;
  }

  .home-hero-inner .hp-hero-sub {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .hero-search-icon {
    display: none;
  }

  .hero-filter-button {
    display: none;
  }

  .hero-search-bar,
  .hero-search-light {
    min-height: 56px;
  }

  .hero-search-bar .hp-search-input,
  .hero-search-light .hp-search-input {
    min-height: 54px;
  }

  .hero-search-bar .hp-search-btn,
  .hero-search-light .hp-search-btn {
    font-size: 13px;
    min-height: 54px;
    padding: 0 18px;
  }

  .game-chip-row {
    margin-bottom: 12px;
    padding-top: 10px;
  }

  .game-chip-row .hp-game-chip.active {
    font-size: 13px;
    padding: 8px 14px;
  }

  .game-chip-row .hp-game-chip.disabled {
    font-size: 11px;
    padding: 7px 12px;
  }

  .hero-market-strip {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
  }

  .hero-market-item {
    border-right: none;
    padding: 0;
  }

  .hero-market-body strong {
    font-size: 13px;
  }

  .home-action-card {
    border-radius: 12px;
  }

  .metric-card {
    padding: 16px 18px;
  }

  .metric-card strong {
    font-size: 22px;
  }

  .home-hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .hp-action-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CardVago Cinematic Hero Stage — .cardnexus-* / .card-showcase / .market-rail
   Homepage-only. Does not affect admin, import, or any other page.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Stage container ─────────────────────────────────────────────────────── */

.cardnexus-hero-stage {
  background:
    /* console area readability — dark radial over upper center (opacity halved) */
    radial-gradient(ellipse at 50% 28%, rgba(2, 6, 18, 0.37) 0%, rgba(2, 6, 18, 0.13) 50%, transparent 74%),
    /* top edge fade — blends hero top into page frame */
    linear-gradient(to bottom, rgba(2, 6, 16, 0.82) 0%, transparent 22%),
    /* bottom edge fade — blends into page below */
    linear-gradient(to top, rgba(2, 5, 14, 0.68) 0%, transparent 18%),
    /* global mild darkening */
    linear-gradient(rgba(2, 5, 14, 0.28), rgba(2, 5, 14, 0.28)),
    /* cinematic scene */
    url('/static/images/cardnexus-hero-bg.png') center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 210, 80, 0.13);
  border-radius: 40px;
  box-shadow:
    0 0 100px rgba(0, 50, 180, 0.18),
    0 40px 120px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 820px;
  overflow: hidden;
  position: relative;
}

.cardnexus-hero-stage::before {
  /* edge vignette — subtle cinematic depth, not a dark frame (opacity halved to reduce right-edge frame) */
  background: radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(2, 5, 14, 0.16) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* subtle gold warmth over center — complements image's gold geometric accents */
.cardnexus-hero-stage::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 200, 60, 0.06) 0%, transparent 54%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* ── Stage headline (h1, visible as subtle eyebrow) ─────────────────────── */

.ca-stage-headline {
  color: rgba(39, 213, 255, 0.48);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0;
  padding-top: 28px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}

/* ── Floating glass search console ──────────────────────────────────────── */

.cardnexus-search-console {
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  background: rgba(5, 10, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-top-color: rgba(255, 210, 80, 0.08);
  border-radius: 22px;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  flex: 0 0 auto;
  margin: 20px auto 0;
  max-width: 1200px;
  padding: 24px 36px 22px;
  position: relative;
  width: calc(100% - 48px);
  z-index: 3;
}

.cardnexus-console-top {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.cardnexus-logo-lockup {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.cardnexus-logo-name {
  color: #e0f0ff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.cardnexus-logo-tag {
  color: rgba(39, 213, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.cardnexus-console-nav {
  display: flex;
  gap: 24px;
}

.cardnexus-console-nav a {
  border: none;
  color: rgba(180, 210, 240, 0.60);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0;
  text-decoration: none;
  transition: color 0.18s;
}

.cardnexus-console-nav a:hover {
  color: rgba(200, 230, 255, 0.90);
}

/* ── Search bar ──────────────────────────────────────────────────────────── */

.cardnexus-search-row {
  margin-bottom: 14px;
}

.cardnexus-search-bar {
  align-items: center;
  background: rgba(232, 244, 255, 0.95);
  border: 1.5px solid rgba(39, 213, 255, 0.18);
  border-radius: 14px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  display: flex;
  min-height: 70px;
  padding-right: 8px;
  transition: border-color 0.20s, box-shadow 0.20s;
}

.cardnexus-search-bar:focus-within {
  border-color: rgba(39, 213, 255, 0.52);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.32),
    0 0 0 3px rgba(39, 213, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.cardnexus-search-icon {
  align-items: center;
  color: rgba(10, 30, 70, 0.46);
  display: flex;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  padding: 0 12px 0 26px;
}

.cardnexus-search-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #0a1628;
  flex: 1;
  font: inherit;
  font-size: 16px;
  min-height: 70px;
  outline: none;
  padding: 0;
}

.cardnexus-search-input::placeholder {
  color: rgba(10, 30, 70, 0.40);
}

/* ── SearchAutocomplete adapter for the hero bar ────────────────── */
/* sa-root sits inside the white hero bar; suppress its own chrome  */
.cardnexus-search-bar .sa-root {
  flex: 1;
  min-width: 0;
}

.cardnexus-search-bar .sa-icon,
.cardnexus-search-bar .sa-kbd,
.cardnexus-search-bar .sa-spinner {
  display: none !important;
}

.cardnexus-search-bar .sa-root input[type="text"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #0a1628 !important;
  height: auto !important;
  min-height: 70px;
  padding: 0 !important;
  width: 100% !important;
}

.cardnexus-search-bar .sa-root input[type="text"]:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
}

.cardnexus-search-bar .sa-root input[type="text"]::placeholder {
  color: rgba(10, 30, 70, 0.40);
}

.cardnexus-search-bar .sa-dropdown {
  min-width: 0;
  width: 100%;
}

.cardnexus-filter-btn {
  align-items: center;
  background: rgba(10, 30, 70, 0.07);
  border: 1px solid rgba(10, 30, 70, 0.13);
  border-radius: 10px;
  color: rgba(10, 30, 70, 0.60);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  height: 44px;
  margin-right: 8px;
  padding: 0 16px;
  user-select: none;
  white-space: nowrap;
}

.cardnexus-search-bar .cardnexus-search-submit {
  background: linear-gradient(135deg, #0448c2 0%, #0076f5 100%);
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(0, 118, 245, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  height: 44px;
  letter-spacing: 0.02em;
  padding: 0 28px;
  transition: all 0.18s;
  white-space: nowrap;
}

.cardnexus-search-bar .cardnexus-search-submit:hover {
  background: linear-gradient(135deg, #0554d8 0%, #0085ff 100%);
  box-shadow: 0 0 44px rgba(0, 136, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ── Game chips ──────────────────────────────────────────────────────────── */

.cardnexus-game-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.ca-chip {
  align-items: center;
  border-radius: 50px;
  cursor: default;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 9px 20px;
  transition: all 0.18s;
  user-select: none;
  white-space: nowrap;
}

.game-chip-icon {
  flex-shrink: 0;
  height: 22px;
  object-fit: contain;
  width: 22px;
}

.ca-chip-active {
  background: rgba(39, 213, 255, 0.06);
  border: 1px solid rgba(39, 213, 255, 0.18);
  color: rgba(94, 232, 255, 0.78);
}

.ca-chip-active:hover {
  background: rgba(39, 213, 255, 0.14);
  border-color: rgba(39, 213, 255, 0.52);
  box-shadow: 0 0 16px rgba(39, 213, 255, 0.20);
  color: rgba(140, 242, 255, 0.96);
}

.ca-chip-active:first-child {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(200, 222, 248, 0.65);
}

.ca-chip-active:first-child:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: none;
  color: rgba(220, 238, 255, 0.85);
}

.ca-chip-soon {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(150, 175, 205, 0.28);
}

/* ── Value strip ─────────────────────────────────────────────────────────── */

.cardnexus-value-strip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4px;
  padding: 14px 0;
}

.ca-value-item {
  align-items: flex-start;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  gap: 12px;
  padding: 6px 20px;
}

.ca-value-item:first-child {
  padding-left: 0;
}

.ca-value-item:last-child {
  border-right: none;
  padding-right: 0;
}

.ca-value-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  margin-top: 2px;
  width: 32px;
}

.cavi-compare { background: rgba(39, 213, 255, 0.08);  border: 1px solid rgba(39, 213, 255, 0.14);  color: rgba(39, 213, 255, 0.82);  }
.cavi-deal    { background: rgba(34, 197, 94, 0.07);   border: 1px solid rgba(34, 197, 94, 0.13);   color: rgba(34, 197, 94, 0.82);   }
.cavi-catalog { background: rgba(168, 85, 247, 0.07);  border: 1px solid rgba(168, 85, 247, 0.13);  color: rgba(168, 85, 247, 0.82);  }
.cavi-alerts  { background: rgba(251, 146, 60, 0.07);  border: 1px solid rgba(251, 146, 60, 0.13);  color: rgba(251, 146, 60, 0.82);  }

.ca-value-item > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ca-value-item strong {
  color: rgba(215, 238, 255, 0.90);
  font-size: 13px;
  font-weight: 700;
}

.ca-value-item span {
  color: rgba(90, 130, 170, 0.88);
  font-size: 11px;
  line-height: 1.4;
}

/* ── Card showcase ───────────────────────────────────────────────────────── */

.card-showcase {
  align-items: flex-end;
  bottom: 74px;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 0 44px;
  position: absolute;
  right: 0;
  top: 200px;
  z-index: 1;
}

.card-showcase::before {
  background: linear-gradient(to bottom, rgba(5, 11, 24, 0.49) 0%, rgba(5, 11, 24, 0.24) 50%, transparent 100%);
  content: "";
  height: 130px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 8;
}

.showcase-card {
  background: rgba(6, 14, 30, 0.88);
  border-radius: 12px;
  box-shadow:
    0 8px 60px rgba(0, 0, 0, 0.80),
    0 0 30px rgba(39, 213, 255, 0.09);
  flex-shrink: 0;
  height: 360px;
  margin: 0 -22px;
  overflow: hidden;
  position: relative;
  width: 216px;
}

.showcase-card-main {
  box-shadow:
    0 8px 80px rgba(0, 0, 0, 0.92),
    0 0 64px rgba(39, 213, 255, 0.26),
    0 0 120px rgba(0, 80, 255, 0.18);
  height: 370px;
  width: 250px;
  z-index: 5;
}

.showcase-pos-1 { height: 310px; opacity: 0.50; transform: rotate(-13deg) translateY(30px); width: 200px; z-index: 1; }
.showcase-pos-2 { height: 310px; opacity: 0.76; transform: rotate(-6deg)  translateY(6px);  width: 222px; z-index: 2; }
.showcase-pos-3 {                opacity: 1.00; transform: rotate(0deg)   translateY(-16px);              z-index: 5; }
.showcase-pos-4 { height: 310px; opacity: 0.76; transform: rotate(6deg)   translateY(6px);  width: 222px; z-index: 2; }
.showcase-pos-5 { height: 310px; opacity: 0.50; transform: rotate(13deg)  translateY(30px); width: 200px; z-index: 1; }

.showcase-card-img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  width: 100%;
}

/* Placeholder slabs — card frame look when no real images in catalog */
.showcase-placeholder {
  background: rgba(6, 14, 30, 0.90);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* card art area — top 61% of the card frame */
.showcase-placeholder::before {
  border-radius: 8px;
  content: "";
  height: 61%;
  left: 9px;
  position: absolute;
  right: 9px;
  top: 10px;
}

/* shimmer top-to-bottom + bottom info tone */
.showcase-placeholder::after {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, transparent 28%),
    linear-gradient(to top, rgba(0, 0, 0, 0.22) 0%, transparent 28%);
  border-radius: 12px;
  content: "";
  inset: 0;
  position: absolute;
}

.sp-teal   { border: 1px solid rgba(39,  213, 255, 0.20); }
.sp-purple { border: 1px solid rgba(168,  85, 247, 0.20); }
.sp-gold   { border: 1px solid rgba(255, 200,  60, 0.26); }
.sp-blue   { border: 1px solid rgba( 60, 120, 255, 0.20); }
.sp-green  { border: 1px solid rgba( 34, 197,  94, 0.18); }

.sp-teal::before   { background: linear-gradient(145deg, rgba(39,  213, 255, 0.26) 0%, rgba(  0, 70, 150, 0.58) 100%); }
.sp-purple::before { background: linear-gradient(145deg, rgba(168,  85, 247, 0.26) 0%, rgba( 55, 10, 150, 0.58) 100%); }
.sp-gold::before   { background: linear-gradient(145deg, rgba(255, 190,  50, 0.34) 0%, rgba(150, 70,   5, 0.54) 100%); }
.sp-blue::before   { background: linear-gradient(145deg, rgba( 60, 100, 255, 0.26) 0%, rgba(  8, 40, 170, 0.58) 100%); }
.sp-green::before  { background: linear-gradient(145deg, rgba( 30, 190,  80, 0.26) 0%, rgba( 12, 72,  44, 0.58) 100%); }

/* ── Capability / comparison rail ───────────────────────────────────────── */

.market-rail {
  align-items: center;
  background: rgba(3, 7, 16, 0.44);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  bottom: 0;
  box-shadow: 0 -28px 72px rgba(0, 0, 0, 0.44);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  left: 0;
  min-height: 74px;
  padding: 18px 60px;
  position: absolute;
  right: 0;
  z-index: 4;
}

.market-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50px;
  color: rgba(185, 215, 245, 0.72);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  padding: 9px 22px;
  white-space: nowrap;
}

.market-chip-dim {
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(120, 160, 200, 0.40);
}

.source-chip-logo {
  border-radius: 2px;
  flex-shrink: 0;
  height: 16px;
  object-fit: contain;
}

/* ── Post-hero CTA strip ─────────────────────────────────────────────────── */

.ca-post-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 20px 0 8px;
}

/* ── Responsive: 1100px ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cardnexus-search-console {
    max-width: 920px;
    padding: 20px 26px 18px;
  }

  .card-showcase {
    padding: 0 24px;
    top: 210px;
  }

  .cardnexus-value-strip {
    gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .ca-value-item {
    border-right: none;
    padding: 0 8px;
  }

  .ca-value-item:first-child {
    padding-left: 0;
  }

  .ca-value-item:nth-child(even) {
    padding-right: 0;
  }

  .cardnexus-console-nav {
    gap: 18px;
  }

  .market-rail {
    padding: 16px 40px;
  }
}

/* ── Responsive: 760px ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .cardnexus-hero-stage {
    border-radius: 20px;
    min-height: 680px;
  }

  .ca-stage-headline {
    font-size: 10px;
    padding-top: 18px;
  }

  .cardnexus-search-console {
    padding: 16px 16px 14px;
    width: calc(100% - 20px);
  }

  .cardnexus-console-nav {
    display: none;
  }

  .cardnexus-logo-tag {
    display: none;
  }

  .cardnexus-search-bar {
    min-height: 58px;
    padding-right: 0;
  }

  .cardnexus-search-input {
    font-size: 15px;
    min-height: 58px;
  }

  .cardnexus-search-icon {
    display: none;
  }

  .cardnexus-filter-btn {
    display: none;
  }

  .cardnexus-search-bar .cardnexus-search-submit {
    border-radius: 0 12px 12px 0;
    font-size: 14px;
    height: auto;
    min-height: 58px;
    padding: 0 24px;
  }

  .cardnexus-value-strip {
    grid-template-columns: 1fr 1fr;
  }

  .ca-value-item strong {
    font-size: 12px;
  }

  .ca-value-item span {
    font-size: 10px;
  }

  .card-showcase {
    bottom: 66px;
    padding: 0 12px;
    top: 190px;
  }

  .showcase-card {
    height: 260px;
    margin: 0 -14px;
    width: 172px;
  }

  .showcase-card-main {
    height: 330px;
    width: 192px;
  }

  .showcase-pos-1,
  .showcase-pos-5 {
    display: none;
  }

  .showcase-pos-2,
  .showcase-pos-4 {
    height: 276px;
    width: 184px;
  }

  .market-rail {
    min-height: 66px;
    padding: 14px 18px;
  }

  .market-chip {
    font-size: 11px;
    padding: 7px 14px;
  }

  .ca-post-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARDNEXUS LANDING PAGE — Full-viewport background
   Scoped exclusively to body.cardnexus-landing — does not affect any other page.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Full-page immersive background — covers the entire viewport on the homepage */
body.cardnexus-landing {
  background:
    /* center radial — soft console-area readability, does not black it out */
    radial-gradient(ellipse at 50% 26%, rgba(2, 6, 18, 0.36) 0%, rgba(2, 6, 18, 0.14) 42%, transparent 66%),
    /* card-fan halo — anchored just above the featured card, fades into the fan; height ~50% of previous */
    linear-gradient(to bottom, transparent 14%, rgba(2, 5, 14, 0.36) 18%, rgba(2, 5, 14, 0.08) 26%, transparent 34%),
    /* bottom gradient — grounds page base */
    linear-gradient(to top, rgba(2, 5, 14, 0.80) 0%, rgba(2, 5, 14, 0.28) 26%, transparent 54%),
    /* edge vignette — pulls side columns darker so center scene breathes */
    radial-gradient(ellipse at 50% 38%, transparent 28%, rgba(2, 5, 14, 0.52) 100%),
    /* primary darkener — enough to read against, not enough to bury the scene */
    linear-gradient(rgba(2, 5, 14, 0.22), rgba(2, 5, 14, 0.22)),
    /* the cinematic scene */
    url('/static/images/cardnexus-hero-bg.png') center top / cover no-repeat;
  min-height: 100vh;
}

/* Hero: borderless glass panel — floats seamlessly over the cinematic body background.
   No outer frame; border-radius kept for overflow clipping of the card fan.
   Header is now the first flex item inside the hero, so no padding-top needed for it. */
body.cardnexus-landing .cardnexus-hero-stage {
  background:
    /* gentle center softening behind the console (opacity halved) */
    radial-gradient(ellipse at 50% 28%, rgba(2, 6, 18, 0.11) 0%, rgba(2, 6, 18, 0.04) 50%, transparent 74%),
    /* top edge blend */
    linear-gradient(to bottom, rgba(2, 6, 16, 0.14) 0%, transparent 22%),
    /* bottom edge blend */
    linear-gradient(to top, rgba(2, 5, 14, 0.14) 0%, transparent 20%);
  border: none;
  box-shadow: none;
  padding-top: 0;
}

/* Console: glass depth on landing page */
body.cardnexus-landing .cardnexus-search-console {
  background: rgba(5, 10, 24, 0.52);
  backdrop-filter: blur(36px) saturate(1.2);
  -webkit-backdrop-filter: blur(36px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding-bottom: 14px;
  padding-top: 18px;
}

/* Card-showcase top fade removed on landing — console glass provides the visual separation */
body.cardnexus-landing .card-showcase::before {
  display: none;
}

/* CTA buttons: glass pill style on the cinematic background */
body.cardnexus-landing .ca-post-hero-actions .cc-button {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50px;
  color: rgba(195, 222, 255, 0.82);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.015em;
  min-height: 46px;
  padding: 12px 32px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.cardnexus-landing .ca-post-hero-actions .cc-button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(39, 213, 255, 0.36);
  color: rgba(220, 240, 255, 0.96);
}

body.cardnexus-landing .ca-post-hero-actions .cc-button.primary {
  background: rgba(0, 100, 220, 0.28);
  border-color: rgba(39, 213, 255, 0.48);
  box-shadow: 0 0 24px rgba(0, 120, 255, 0.22);
  color: rgba(120, 215, 255, 0.96);
}

body.cardnexus-landing .ca-post-hero-actions .cc-button.primary:hover {
  background: rgba(0, 120, 255, 0.36);
  box-shadow: 0 0 36px rgba(0, 140, 255, 0.30);
}

/* Tertiary CTA: lower contrast, less glow — accessible but clearly subordinate */
body.cardnexus-landing .ca-post-hero-actions .cc-button.tertiary {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  color: rgba(155, 190, 225, 0.52);
}

body.cardnexus-landing .ca-post-hero-actions .cc-button.tertiary:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
  color: rgba(185, 215, 245, 0.72);
}

/* cn-hero-header: first row inside the search console panel on landing */
.cn-hero-header {
  margin-bottom: 8px;
}

/* Compact value proposition copy — above the search bar on landing */
.cn-hero-copy {
  margin-bottom: 12px;
  text-align: center;
}

.cn-hero-headline {
  color: rgba(215, 235, 255, 0.90);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 0 0 4px;
}

.cn-hero-sub {
  color: rgba(115, 155, 190, 0.62);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
}

/* Value strip: compact horizontal rail above the search bar on landing.
   Removes the boxed card look; uses a bottom border as a light separator. */
body.cardnexus-landing .cardnexus-value-strip {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  margin-bottom: 14px;
  margin-top: 0;
  padding: 6px 0 10px;
}

body.cardnexus-landing .ca-value-item strong {
  color: rgba(185, 215, 245, 0.75);
  font-size: 12px;
}

body.cardnexus-landing .ca-value-item span {
  color: rgba(90, 125, 160, 0.58);
}

body.cardnexus-landing .ca-value-icon {
  opacity: 0.72;
}

/* Topbar inside the hero: fully transparent — no fill, no blur, no shadow, no bar */
body.cardnexus-landing .topbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  position: relative;
}

/* topbar-inner fills the console's content box — console side padding provides alignment */
body.cardnexus-landing .topbar-inner {
  max-width: none;
  padding: 0;
  width: 100%;
}

/* Landing: hero fills from y=0; compact vertical rhythm leaves no wasted space */
body.cardnexus-landing .page-shell {
  padding-bottom: 8px;
  padding-top: 0;
}

body.cardnexus-landing .home-shell {
  gap: 12px;
}

body.cardnexus-landing .ca-post-hero-actions {
  padding: 8px 0 4px;
}

/* Source chips float transparently over the card fan — no dark rail band */
body.cardnexus-landing .market-rail {
  background: transparent;
  border-top: none;
  box-shadow: none;
  padding: 10px 60px;
}

/* Landing: card fan starts slightly higher — tightens gap between console and showcase */
body.cardnexus-landing .card-showcase {
  top: 182px;
}

/* Mobile: avoid iOS fixed-background bugs; topbar inner stays zero-padded */
@media (max-width: 760px) {
  body.cardnexus-landing {
    background-attachment: scroll;
  }
  body.cardnexus-landing .topbar-inner {
    max-width: none;
    padding: 0;
  }
}

/* Desktop viewport fit: on tall-enough screens the hero fills the remaining viewport
   so no scrollbar appears. Below this threshold the page scrolls as normal.
   78px = gap(12) + CTA(58) + page-shell-bottom(8) */
@media (min-width: 900px) and (min-height: 720px) {
  body.cardnexus-landing {
    overflow: hidden;
  }
  /* Zero out page-shell side padding so the hero fills the home-shell cleanly — eliminates visible right/left edge strips */
  body.cardnexus-landing .page-shell {
    padding-left: 0;
    padding-right: 0;
  }
  body.cardnexus-landing .cardnexus-hero-stage {
    height: calc(100vh - 78px);
    height: calc(100dvh - 78px);
    min-height: unset;
  }
}

/* ── Carousel controls ────────────────────────────────────────────────────── */

.carousel-btn {
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(5, 12, 30, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  /* bottom aligns button center with main card center:
     card-showcase bottom 74px + translateY 16px + half-card 250px − half-button 22px = 318px */
  bottom: 318px;
  color: rgba(190, 220, 255, 0.80);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  position: absolute;
  top: auto;
  transform: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 44px;
  z-index: 6;
}

.carousel-btn:hover {
  background: rgba(12, 28, 60, 0.72);
  border-color: rgba(39, 213, 255, 0.38);
  color: rgba(220, 240, 255, 0.96);
}

.carousel-btn-prev { left: 16px; }
.carousel-btn-next { right: 16px; }

/* Fan cards animate smoothly between positions on rotate */
.card-showcase .showcase-card {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Extra carousel cards beyond the visible 5 */
.card-showcase .showcase-card[data-cx-hidden] {
  display: none;
}

@media (max-width: 760px) {
  /* mobile card center: showcase bottom 66px + translateY 16px + half-card 165px − half-button 18px = 229px */
  .carousel-btn { bottom: 229px; height: 36px; top: auto; width: 36px; }
  .carousel-btn-prev { left: 8px; }
  .carousel-btn-next { right: 8px; }
}

/* ── Card Detail: Market Intelligence Profile ─────────────────────── */

/* Three-column hero: image left · market data centre · best deal right */
.cd-hero {
  background: linear-gradient(160deg, rgba(7, 16, 36, 0.94), rgba(3, 9, 22, 0.92));
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: 260px 1fr 296px;
  margin-bottom: 14px;
  overflow: hidden;
}

/* Thumbnail holder — no bg/border since hero is the panel */
.cd-card-frame {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

.cd-card-img {
  border-radius: 7px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.60),
    0 0 16px rgba(39, 213, 255, 0.07);
  max-height: 90px;
  max-width: 76px;
  object-fit: contain;
}

.cd-card-placeholder {
  align-items: center;
  color: rgba(90, 130, 170, 0.30);
  display: flex;
  height: 90px;
  justify-content: center;
}

/* Identity: plain text, no panel */
.cd-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cd-identity-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.cd-eyebrow {
  color: rgba(39, 213, 255, 0.60);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.cd-card-name {
  color: rgba(222, 242, 255, 0.97);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 2px;
}

.cd-card-meta {
  color: rgba(130, 175, 215, 0.58);
  font-size: 12px;
  margin-bottom: 0;
}

.cd-card-series {
  color: rgba(105, 150, 195, 0.44);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

/* Status badge */
.cd-status-badge {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.07em;
  padding: 4px 9px;
  text-transform: uppercase;
}

.cd-status-badge.available {
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
}

.cd-status-badge.limited {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.26);
  color: #fbbf24;
}

.cd-status-badge.stale {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #f87171;
}

.cd-status-badge.needs-research {
  background: rgba(70, 100, 140, 0.10);
  border: 1px solid rgba(70, 100, 140, 0.22);
  color: rgba(140, 182, 222, 0.65);
}

.cd-watchlist-active {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.32);
  color: #34d399;
}

.cd-watchlist-active:hover {
  background: rgba(16, 185, 129, 0.17);
  border-color: rgba(16, 185, 129, 0.50);
}

/* Right rail: fair value + signals */
.cd-hero-market {
  border-left: 1px solid rgba(82, 167, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 3px;
  min-width: 185px;
  padding-left: 18px;
}

.cd-hero-signals {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.cd-hero-meta-line {
  color: rgba(100, 145, 185, 0.48);
  font-size: 11px;
  margin: 2px 0 0;
}

.cd-fv-label {
  color: rgba(110, 158, 205, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.cd-fv-number {
  color: rgba(228, 248, 255, 0.99);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0;
}

.cd-fv-number.no-data {
  color: rgba(100, 140, 180, 0.32);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cd-fv-meta {
  align-items: center;
  color: rgba(120, 162, 202, 0.60);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  margin-bottom: 8px;
}

.cd-fv-meta-sep {
  color: rgba(82, 130, 175, 0.25);
  font-weight: 400;
}

.cd-confidence-badge {
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.cd-confidence-badge.good {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.cd-confidence-badge.warn {
  background: rgba(245, 158, 11, 0.10);
  color: #fbbf24;
}

.cd-confidence-badge.muted {
  background: rgba(80, 115, 155, 0.10);
  color: rgba(125, 168, 208, 0.52);
}

.cd-freshness {
  color: rgba(105, 150, 190, 0.46);
  font-size: 12px;
}

.cd-source-note {
  color: rgba(115, 158, 198, 0.50);
  font-size: 12px;
  line-height: 1.55;
}

.cd-fv-divider {
  border-top: 1px solid rgba(82, 167, 255, 0.07);
  flex-shrink: 0;
  margin: auto 0 14px;
  padding-top: 14px;
}

.cd-market-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Market snapshot panel */
.cd-price-range {
  border: 1px solid rgba(82, 167, 255, 0.08);
  border-radius: 10px;
  display: flex;
  margin-bottom: 4px;
  overflow: hidden;
}

.cd-range-item {
  border-right: 1px solid rgba(82, 167, 255, 0.08);
  flex: 1;
  padding: 14px 12px 12px;
  text-align: center;
}

.cd-range-item:last-child {
  border-right: none;
}

.cd-range-item-mid {
  background: rgba(39, 213, 255, 0.035);
}

.cd-range-label {
  color: rgba(105, 150, 190, 0.46);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cd-range-value {
  color: rgba(215, 238, 255, 0.94);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cd-range-secondary {
  color: rgba(175, 208, 238, 0.62);
  font-size: 18px;
}

.cd-snap-single {
  padding: 18px 0 14px;
}

.cd-snap-single-value {
  color: rgba(225, 248, 255, 0.98);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cd-snap-single-note {
  color: rgba(105, 150, 190, 0.46);
  font-size: 12px;
  margin-top: 5px;
}

.cd-snap-stats {
  align-items: center;
  color: rgba(105, 150, 190, 0.46);
  display: flex;
  font-size: 12px;
  gap: 8px;
  margin-top: 12px;
}

.cd-snap-dot {
  opacity: 0.45;
}

/* Price sources */
.cd-sources-table {
  display: flex;
  flex-direction: column;
}

.cd-source-row {
  align-items: center;
  border-top: 1px solid rgba(82, 167, 255, 0.05);
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 72px 68px 82px;
  padding: 10px 0;
}

.cd-source-row:first-child {
  border-top: none;
}

.cd-source-row-primary {
  background: rgba(39, 213, 255, 0.022);
  border-radius: 6px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}

.cd-source-id {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.cd-source-icon {
  border-radius: 3px;
  flex-shrink: 0;
  height: 15px;
  object-fit: contain;
  width: 15px;
}

.cd-source-icon-local {
  align-items: center;
  background: rgba(82, 167, 255, 0.08);
  border: 1px solid rgba(82, 167, 255, 0.16);
  border-radius: 3px;
  color: rgba(120, 168, 215, 0.60);
  display: flex;
  flex-shrink: 0;
  height: 15px;
  justify-content: center;
  width: 15px;
}

.cd-source-name {
  color: rgba(192, 220, 246, 0.86);
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-source-price {
  color: rgba(225, 245, 255, 0.94);
  font-size: 13px;
  font-weight: 700;
}

.cd-source-eur {
  color: rgba(39, 213, 255, 0.62);
  font-size: 12px;
}

.cd-source-date {
  color: rgba(105, 150, 190, 0.46);
  font-size: 12px;
}

/* Deal Intelligence — full-width recommendation card */
.cd-deal-panel {
  border-left: 3px solid rgba(82, 167, 255, 0.28);
}

.cd-deal-tone-good   { border-left-color: rgba(16, 185, 129, 0.55); }
.cd-deal-tone-warn   { border-left-color: rgba(245, 158, 11, 0.55); }
.cd-deal-tone-research { border-left-color: rgba(82, 167, 255, 0.38); }
.cd-deal-tone-avoid  { border-left-color: rgba(239, 68, 68, 0.55); }

.cd-deal-inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 230px;
}

.cd-deal-state-col {
  min-width: 0;
}

.cd-deal-hint {
  color: rgba(105, 150, 190, 0.46);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.cd-deal-label {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.cd-deal-tone-good   .cd-deal-label { color: #34d399; }
.cd-deal-tone-warn   .cd-deal-label { color: #fbbf24; }
.cd-deal-tone-research .cd-deal-label { color: rgba(165, 205, 242, 0.88); }
.cd-deal-tone-avoid  .cd-deal-label { color: #f87171; }

.cd-explanation {
  color: rgba(142, 182, 218, 0.76);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.cd-deal-right-col {
  border-left: 1px solid rgba(82, 167, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 24px;
}

/* Bloomberg-style signal readout */
.cd-intel-signals {
  display: grid;
  gap: 0;
  grid-template-columns: max-content 1fr;
  margin: 0;
}

.cd-intel-signals > * {
  border-top: 1px solid rgba(82, 167, 255, 0.05);
  padding: 5px 0;
}

.cd-intel-signals > :first-child,
.cd-intel-signals > :nth-child(2) {
  border-top: none;
}

.cd-intel-signals dt {
  color: rgba(100, 145, 185, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-right: 14px;
  text-transform: uppercase;
  white-space: nowrap;
}

.cd-intel-signals dd {
  color: rgba(195, 222, 248, 0.85);
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

/* badges inside signal grid stay compact */
.cd-intel-signals .cd-confidence-badge,
.cd-intel-signals .cd-coverage-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.07em;
  padding: 2px 7px;
}

.cd-intel-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
}

/* Pull odds */
.cd-pull-block {
  margin-bottom: 4px;
}

.cd-pull-number {
  color: rgba(225, 248, 255, 0.96);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cd-pull-label {
  color: rgba(115, 158, 198, 0.50);
  font-size: 12px;
  margin-top: 5px;
}

/* Card details — compact 2-col layout */
.cd-details-cols {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}

.cd-details-grid {
  display: grid;
  gap: 0;
  grid-template-columns: max-content 1fr;
  margin: 0;
}

.cd-details-grid > * {
  border-top: 1px solid rgba(82, 167, 255, 0.05);
  padding: 6px 0;
}

.cd-details-grid > :first-child,
.cd-details-grid > :nth-child(2) {
  border-top: none;
}

.cd-details-grid dt {
  color: rgba(105, 150, 190, 0.46);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding-right: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.cd-details-grid dd {
  color: rgba(198, 225, 248, 0.85);
  font-size: 13px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Research chips */
.cd-research-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cd-research-chip {
  align-items: center;
  background: rgba(3, 10, 24, 0.70);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 6px;
  color: rgba(155, 198, 238, 0.68);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  padding: 6px 12px;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.cd-research-chip:hover {
  background: rgba(39, 213, 255, 0.07);
  border-color: rgba(39, 213, 255, 0.26);
  color: rgba(218, 244, 255, 0.90);
}


/* ── Market Overview — unified market story panel ────────────────── */
.cd-market-overview {
  border-left: 3px solid rgba(82, 167, 255, 0.28);
}

.cd-overview-prices {
  border-left: 1px solid rgba(82, 167, 255, 0.07);
  min-width: 0;
  padding-left: 24px;
}

/* ── Collapsible panel (details/summary) ─────────────────────────── */
.cd-summary-row {
  align-items: center;
  color: rgba(210, 232, 252, 0.88);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

.cd-summary-row::-webkit-details-marker {
  display: none;
}

.cd-summary-chevron {
  color: rgba(100, 145, 185, 0.42);
  flex-shrink: 0;
  transition: transform 0.15s;
}

details[open] .cd-summary-chevron {
  transform: rotate(180deg);
}

/* ── Research toolbar — compact link row ─────────────────────────── */
.cd-research-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
  padding: 2px;
}

.cd-research-toolbar-label {
  color: rgba(105, 150, 190, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin-right: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Card detail responsive ──────────────────────────────────────── */

/* Collapse best-deal column at 1200px */
@media (max-width: 1200px) {
  .cd-hero {
    grid-template-columns: 240px 1fr;
  }

  .cd-hero-best-deal {
    border-left: none;
    border-top: 1px solid rgba(82, 167, 255, 0.08);
    flex-direction: row;
    gap: 16px;
    grid-column: 1 / -1;
    padding: 16px 20px;
  }

  .cd-hero-best-deal .cd-bd-heading {
    margin-bottom: 0;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    min-width: 120px;
  }

  .cd-bd-card {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .cd-bd-cta {
    margin-top: 0;
  }
}

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

  .cd-hero-left {
    border-bottom: 1px solid rgba(82, 167, 255, 0.08);
    border-right: none;
    flex-direction: row;
    gap: 14px;
    padding: 14px;
  }

  .cd-card-showcase {
    flex-shrink: 0;
    margin-bottom: 0;
    min-height: unset;
  }

  .cd-card-img-large {
    max-height: 110px;
  }

  .cd-hero-mid {
    border-left: none;
    border-top: 1px solid rgba(82, 167, 255, 0.08);
    padding: 14px;
  }

  .cd-fv-number {
    font-size: 28px;
  }

  .cd-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-hero-best-deal {
    flex-direction: column;
    grid-column: 1;
    padding: 14px;
  }

  .cd-bd-card {
    flex-direction: column;
  }

  .cd-ac-group-list {
    grid-template-columns: 1fr;
  }

  .cd-ac-card {
    border-right: none;
  }

  .cd-lml-head {
    display: none;
  }

  .cd-lml-row {
    grid-template-columns: 1fr 80px;
    gap: 8px;
  }

  .cd-lml-fv,
  .cd-lml-vs,
  .cd-lml-profit,
  .cd-lml-row > div:nth-child(6),
  .cd-lml-action {
    display: none;
  }

  .cd-details-cols {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .cd-details-grid + .cd-details-grid > :first-child,
  .cd-details-grid + .cd-details-grid > :nth-child(2) {
    border-top: 1px solid rgba(82, 167, 255, 0.05);
  }

  .cd-sparkline-wrap {
    margin-bottom: 8px;
  }
}

/* ── Coverage score — sources panel header ───────────────────────── */
.cd-coverage-header {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.cd-coverage-header h2 {
  margin-bottom: 0;
}

.cd-coverage-badge {
  border-radius: 5px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.cd-coverage-good {
  background: rgba(16, 185, 129, 0.10);
  color: #34d399;
}

.cd-coverage-warn {
  background: rgba(245, 158, 11, 0.10);
  color: #fbbf24;
}

.cd-coverage-muted {
  background: rgba(80, 115, 155, 0.10);
  color: rgba(128, 168, 208, 0.55);
}

.cd-coverage-note {
  margin-bottom: 14px;
}

/* ── Smart insights — bullet list in deal panel ──────────────────── */
.cd-insights-list {
  color: rgba(155, 195, 232, 0.72);
  font-size: 13px;
  line-height: 1.55;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.cd-insights-list li {
  border-bottom: 1px solid rgba(82, 167, 255, 0.05);
  padding: 5px 0;
}

.cd-insights-list li:first-child {
  padding-top: 0;
}

.cd-insights-list li:last-child {
  border-bottom: none;
}

/* ── Deal action — suggested next step ───────────────────────────── */
.cd-deal-action {
  align-items: center;
  color: rgba(140, 180, 215, 0.62);
  display: flex;
  font-size: 12px;
  gap: 5px;
  margin-top: 10px;
}

.cd-deal-action svg {
  flex-shrink: 0;
  opacity: 0.60;
}

/* ── Sparkline ───────────────────────────────────────────────────── */
.cd-sparkline-wrap {
  background: rgba(2, 8, 20, 0.55);
  border: 1px solid rgba(82, 167, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 14px 14px 8px;
}

.cd-sparkline {
  display: block;
  height: 38px;
  width: 100%;
}

.cd-sparkline-meta {
  align-items: center;
  color: rgba(100, 145, 185, 0.42);
  display: flex;
  font-size: 11px;
  gap: 6px;
  margin-top: 6px;
  padding-bottom: 2px;
}

/* ── Market Overview: unified story ─────────────────────────────── */
.cd-mo-top {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr auto;
  margin-bottom: 0;
}

.cd-mo-status {
  min-width: 0;
}

.cd-mo-status-label {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 2px 0 8px;
}

.cd-deal-tone-good .cd-mo-status-label    { color: #34d399; }
.cd-deal-tone-warn .cd-mo-status-label    { color: #fbbf24; }
.cd-deal-tone-research .cd-mo-status-label { color: rgba(165, 205, 242, 0.88); }
.cd-deal-tone-avoid .cd-mo-status-label   { color: #f87171; }

.cd-mo-prices {
  min-width: 220px;
}

.cd-mo-sources {
  border-top: 1px solid rgba(82, 167, 255, 0.07);
  margin-top: 14px;
  padding-top: 4px;
}

/* ── Market Insight narrative ────────────────────────────────────── */
.cd-insight-narrative {
  color: rgba(145, 188, 228, 0.72);
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 10px;
}

/* ── Internal app actions inside Market Overview ─────────────────── */
.cd-overview-app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* ── Action Center — Buy & Research grouped ──────────────────────── */
.cd-action-center {
  margin-bottom: 16px;
}

.cd-ac-groups {
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.cd-ac-group + .cd-ac-group {
  border-left: 1px solid rgba(82, 167, 255, 0.10);
}

.cd-ac-group-label {
  background: rgba(39, 213, 255, 0.03);
  border-bottom: 1px solid rgba(82, 167, 255, 0.08);
  color: rgba(39, 213, 255, 0.52);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 8px 14px;
  text-transform: uppercase;
}

.cd-ac-group-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cd-ac-card {
  align-items: center;
  background: rgba(4, 12, 28, 0.50);
  border: none;
  border-bottom: 1px solid rgba(82, 167, 255, 0.06);
  border-radius: 0;
  border-right: 1px solid rgba(82, 167, 255, 0.06);
  color: rgba(188, 216, 242, 0.86);
  display: flex;
  gap: 11px;
  padding: 11px 12px;
  text-decoration: none;
  transition: background 0.11s, color 0.11s;
}

.cd-ac-card:last-child {
  border-bottom: none;
  border-right: none;
}

.cd-ac-card:hover {
  background: rgba(39, 213, 255, 0.055);
  color: rgba(218, 244, 255, 0.96);
}

.cd-ac-logo {
  border-radius: 3px;
  flex-shrink: 0;
  height: 20px;
  object-fit: contain;
  width: 20px;
}

.cd-ac-logo-text {
  align-items: center;
  background: rgba(82, 167, 255, 0.10);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 3px;
  color: rgba(140, 190, 235, 0.76);
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.cd-ac-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cd-ac-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.cd-ac-desc {
  color: rgba(100, 145, 185, 0.50);
  font-size: 11px;
  line-height: 1;
}

.cd-ac-arrow {
  color: rgba(82, 130, 175, 0.30);
  flex-shrink: 0;
  transition: color 0.11s, transform 0.11s;
}

.cd-ac-card:hover .cd-ac-arrow {
  color: rgba(39, 213, 255, 0.55);
  transform: translateX(2px);
}

/* ── Adaptive sparkline height ───────────────────────────────────── */
.cd-sparkline-wrap.compact .cd-sparkline {
  height: 26px;
}

.cd-sparkline-wrap.expanded .cd-sparkline {
  height: 58px;
}

@media (max-width: 900px) {
  .cd-ac-groups {
    grid-template-columns: 1fr;
  }

  .cd-ac-group + .cd-ac-group {
    border-left: none;
    border-top: 1px solid rgba(82, 167, 255, 0.10);
  }

  .cd-mo-top {
    grid-template-columns: 1fr;
  }
}

/* ── Hero left panel: card showcase + identity ───────────────────── */
.cd-hero-left {
  border-right: 1px solid rgba(82, 167, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.cd-card-showcase {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-bottom: 16px;
  min-height: 180px;
}

.cd-card-img-large {
  border-radius: 10px;
  box-shadow:
    0 16px 60px rgba(0, 0, 0, 0.72),
    0 6px 24px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(39, 213, 255, 0.08);
  max-height: 345px;
  max-width: 100%;
  object-fit: contain;
}

.cd-card-placeholder-lg {
  align-items: center;
  color: rgba(90, 130, 170, 0.28);
  display: flex;
  height: 220px;
  justify-content: center;
}

.cd-card-meta-block {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cd-card-set {
  color: rgba(130, 175, 215, 0.56);
  font-size: 12px;
  margin-bottom: 0;
}

.cd-quick-stats {
  border: 1px solid rgba(82, 167, 255, 0.08);
  border-radius: 8px;
  display: flex;
  margin: 10px 0 12px;
  overflow: hidden;
}

.cd-qs-cell {
  border-right: 1px solid rgba(82, 167, 255, 0.08);
  flex: 1;
  padding: 7px 10px;
}

.cd-qs-cell:last-child {
  border-right: none;
}

.cd-qs-label {
  color: rgba(100, 145, 185, 0.42);
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cd-qs-val {
  color: rgba(200, 228, 252, 0.88);
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Hero right panel: market intelligence ───────────────────────── */
.cd-hero-mid {
  border-left: 1px solid rgba(82, 167, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px;
}

.cd-hero-status-label {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 2px;
}

.cd-status-fg-good     { color: #34d399; }
.cd-status-fg-warn     { color: #fbbf24; }
.cd-status-fg-research { color: rgba(165, 205, 242, 0.92); }
.cd-status-fg-avoid    { color: #f87171; }

/* Signal row: confidence/coverage badges + info pills */
.cd-signal-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cd-signal-pill {
  background: rgba(82, 167, 255, 0.05);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 20px;
  color: rgba(145, 188, 228, 0.58);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}

/* Price + sources compact area */
.cd-hero-value-area {
  border: 1px solid rgba(82, 167, 255, 0.08);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  overflow: hidden;
}

.cd-hero-value-left {
  padding: 14px 16px;
}

.cd-hero-sources {
  border-left: 1px solid rgba(82, 167, 255, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 185px;
}

.cd-hero-source-item {
  align-items: center;
  border-bottom: 1px solid rgba(82, 167, 255, 0.05);
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}

.cd-hero-source-item:last-child {
  border-bottom: none;
}

.cd-hero-src-name {
  color: rgba(148, 192, 232, 0.66);
  flex: 1;
  font-size: 12px;
  line-height: 1.25;
  min-width: 0;
}

.cd-hero-src-price {
  color: rgba(218, 244, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.cd-hero-no-data {
  padding: 4px 0;
}

.cd-hero-ctas {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}

/* Price History section header */
.cd-ph-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.cd-ph-obs-pill {
  background: rgba(82, 167, 255, 0.05);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 20px;
  color: rgba(145, 188, 228, 0.56);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Hero col 2: verdict block ───────────────────────────────────── */
.cd-hero-verdict {
  flex-shrink: 0;
}

/* ── Hero col 2: fair value block ────────────────────────────────── */
.cd-hero-fv-block {
  flex-shrink: 0;
}

/* Compact price range variant for hero col 2 */
.cd-price-range-compact .cd-range-item {
  padding: 8px 10px;
}

.cd-price-range-compact .cd-range-value {
  font-size: 16px;
}

.cd-price-range-compact .cd-range-secondary {
  font-size: 14px;
}

/* ── Metric cards (replace signal badges row) ────────────────────── */
.cd-metric-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 1fr);
}

.cd-metric-card {
  background: rgba(2, 8, 22, 0.52);
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 8px;
  padding: 5px 8px;
  text-align: center;
}

.cd-metric-label {
  color: rgba(100, 145, 185, 0.40);
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.cd-metric-value {
  color: rgba(200, 228, 252, 0.88);
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.cd-mval-good  { color: #34d399; }
.cd-mval-warn  { color: #fbbf24; }
.cd-mval-muted { color: rgba(128, 168, 208, 0.52); }

/* ── Best Current Opportunity (hero col 3) ───────────────────────── */
.cd-hero-best-deal {
  border-left: 1px solid rgba(82, 167, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
}

.cd-bd-heading {
  color: rgba(100, 145, 185, 0.40);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cd-bd-card {
  background: rgba(2, 8, 22, 0.50);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.cd-bd-card.cd-bd-opportunity {
  background: rgba(4, 20, 14, 0.65);
  border-color: rgba(16, 185, 129, 0.48);
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(16, 185, 129, 0.10);
}

.cd-bd-card.cd-bd-empty {
  align-items: center;
  justify-content: center;
}

.cd-bd-platform {
  align-items: center;
  display: flex;
  gap: 8px;
}

.cd-bd-platform-name {
  color: rgba(188, 218, 246, 0.86);
  font-size: 13px;
  font-weight: 600;
}

.cd-bd-price {
  color: rgba(228, 248, 255, 0.99);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cd-bd-vs {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cd-bd-vs-good    { color: #34d399; }
.cd-bd-vs-neutral { color: rgba(155, 195, 235, 0.65); }
.cd-bd-vs-bad     { color: #f87171; }

.cd-bd-profit-block {
  border-top: 1px solid rgba(52, 211, 153, 0.12);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 10px;
}

.cd-bd-profit-label {
  color: rgba(52, 211, 153, 0.52);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cd-bd-profit-value {
  color: #34d399;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cd-bd-cta {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
  text-align: center;
}

/* ── Live Market Listings table ──────────────────────────────────── */
.cd-lml-section {
  margin-bottom: 16px;
}

.cd-lml-header {
  align-items: center;
  border-bottom: 1px solid rgba(82, 167, 255, 0.07);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 12px;
}

.cd-lml-note {
  color: rgba(100, 145, 185, 0.40);
  font-size: 11px;
}

.cd-lml-table {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.cd-lml-head {
  color: rgba(100, 145, 185, 0.38);
  display: grid;
  font-size: 9px;
  font-weight: 700;
  gap: 10px;
  grid-template-columns: 1fr 78px 78px 68px 78px 116px 44px;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  text-transform: uppercase;
}

.cd-lml-row {
  align-items: center;
  border-bottom: 1px solid rgba(82, 167, 255, 0.05);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 78px 78px 68px 78px 116px 44px;
  padding: 12px 10px;
  text-decoration: none;
  transition: background 0.10s;
}

.cd-lml-row:last-child {
  border-bottom: none;
}

.cd-lml-row:hover {
  background: rgba(39, 213, 255, 0.04);
}

.cd-lml-marketplace {
  align-items: center;
  display: flex;
  gap: 10px;
}

.cd-lml-mp-name {
  color: rgba(198, 226, 250, 0.88);
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.cd-lml-mp-date {
  color: rgba(100, 145, 185, 0.42);
  display: block;
  font-size: 11px;
  margin-top: 1px;
}

.cd-lml-price {
  color: rgba(222, 246, 255, 0.96);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cd-lml-vs {
  font-size: 13px;
  font-weight: 700;
}

.cd-lml-vs-good    { color: #34d399; }
.cd-lml-vs-neutral { color: rgba(145, 188, 228, 0.58); }
.cd-lml-vs-bad     { color: #f87171; }

.cd-lml-badge {
  border-radius: 5px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
}

.cd-lml-badge-great {
  background: rgba(16, 217, 160, 0.14);
  border: 1px solid rgba(16, 217, 160, 0.32);
  color: #10d9a0;
}

.cd-lml-badge-good {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
}

.cd-lml-badge-fair {
  background: rgba(82, 130, 175, 0.07);
  border: 1px solid rgba(82, 130, 175, 0.16);
  color: rgba(155, 195, 230, 0.75);
}

.cd-lml-badge-warn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.24);
  color: #fbbf24;
}

.cd-lml-badge-neutral {
  background: rgba(82, 130, 175, 0.07);
  border: 1px solid rgba(82, 130, 175, 0.16);
  color: rgba(140, 180, 215, 0.68);
}

.cd-lml-badge-bad {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #f87171;
}

.cd-lml-action {
  align-items: center;
  color: rgba(39, 213, 255, 0.55);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 3px;
  transition: color 0.10s;
}

.cd-lml-row:hover .cd-lml-action {
  color: rgba(39, 213, 255, 0.90);
}

.cd-lml-fv {
  color: rgba(145, 188, 228, 0.58);
  font-size: 13px;
  font-weight: 600;
}

.cd-lml-profit {
  color: rgba(100, 145, 185, 0.38);
  font-size: 13px;
  font-weight: 600;
}

.cd-lml-profit-good {
  color: rgba(52, 211, 153, 0.82);
}

/* ── Market Recommendation Engine widget ─────────────────────────── */
.cd-recommendation {
  align-items: center;
  background: rgba(2, 8, 22, 0.40);
  border: 1px solid rgba(82, 130, 175, 0.16);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 9px 12px;
}

.cd-rec-good    { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.34); }
.cd-rec-warn    { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.28); }
.cd-rec-neutral { background: rgba(82, 130, 175, 0.06); border-color: rgba(82, 130, 175, 0.18); }
.cd-rec-bad     { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.24); }
.cd-rec-research { border-color: rgba(82, 130, 175, 0.14); }

.cd-rec-dot {
  border-radius: 50%;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

.cd-rec-good .cd-rec-dot     { background: #34d399; box-shadow: 0 0 7px rgba(52, 211, 153, 0.65); }
.cd-rec-warn .cd-rec-dot     { background: #fbbf24; box-shadow: 0 0 7px rgba(251, 191, 36, 0.58); }
.cd-rec-neutral .cd-rec-dot  { background: rgba(128, 170, 210, 0.60); }
.cd-rec-bad .cd-rec-dot      { background: #f87171; box-shadow: 0 0 7px rgba(248, 113, 113, 0.58); }
.cd-rec-research .cd-rec-dot { background: rgba(100, 145, 185, 0.38); }

.cd-rec-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cd-rec-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.cd-rec-good .cd-rec-label     { color: #34d399; }
.cd-rec-warn .cd-rec-label     { color: #fbbf24; }
.cd-rec-neutral .cd-rec-label  { color: rgba(175, 210, 242, 0.88); }
.cd-rec-bad .cd-rec-label      { color: #f87171; }
.cd-rec-research .cd-rec-label { color: rgba(145, 185, 225, 0.65); }

.cd-rec-detail {
  color: rgba(125, 168, 208, 0.55);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-rec-profit {
  color: rgba(52, 211, 153, 0.78);
  font-size: 11px;
  font-weight: 600;
}

/* ── Verdict block (hero col 2 — decision answer) ────────────────── */
.cd-verdict-block {
  flex-shrink: 0;
}

.cd-verdict-eyebrow {
  color: rgba(100, 145, 185, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.cd-verdict-label {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.cd-verdict-great    { color: #10d9a0; }
.cd-verdict-good     { color: #34d399; }
.cd-verdict-fair     { color: rgba(175, 210, 242, 0.72); }
.cd-verdict-warn     { color: #fbbf24; }
.cd-verdict-neutral  { color: rgba(175, 210, 242, 0.88); }
.cd-verdict-bad      { color: #f87171; }
.cd-verdict-research { color: rgba(145, 185, 225, 0.68); }

.cd-verdict-reason {
  color: rgba(145, 188, 228, 0.66);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 6px;
}

.cd-verdict-savings {
  color: #10d9a0;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}

.cd-verdict-confidence {
  color: rgba(100, 145, 185, 0.52);
  font-size: 11px;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.cd-verdict-caveat {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 6px;
  color: rgba(251, 191, 36, 0.78);
  font-size: 11px;
  margin: 4px 0 0;
  padding: 5px 9px;
}

/* ── Market Summary card (hero col 3) ────────────────────────────── */
.cd-ms-card {
  background: rgba(2, 8, 22, 0.50);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 14px 16px 12px;
}

.cd-ms-primary-row {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cd-ms-primary-label {
  color: rgba(100, 145, 185, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.cd-ms-primary-value {
  color: rgba(228, 248, 255, 0.99);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.cd-ms-no-data {
  color: rgba(100, 140, 180, 0.32);
  font-size: 18px;
}

.cd-ms-divider {
  border-top: 1px solid rgba(82, 167, 255, 0.07);
  margin-bottom: 10px;
}

.cd-ms-row {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.cd-ms-row-label {
  color: rgba(100, 145, 185, 0.46);
  font-size: 11px;
  font-weight: 600;
}

.cd-ms-row-value {
  color: rgba(195, 222, 248, 0.88);
  font-size: 12px;
  font-weight: 700;
}

.cd-ms-savings-row {
  align-items: baseline;
  background: rgba(16, 185, 129, 0.06);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  margin: 3px -4px 0;
  padding: 4px 4px;
}

.cd-ms-savings-value {
  color: #34d399;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cd-ms-conf-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 3px 0;
}

.cd-ms-sub-text {
  color: rgba(100, 145, 185, 0.38);
  font-size: 10px;
  margin-top: 4px;
}

/* ── Group separators in market listings ─────────────────────────── */
.cd-lml-group-sep {
  align-items: center;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.08em;
  padding: 8px 10px 4px;
  text-transform: uppercase;
}

.cd-lml-group-deal {
  color: rgba(52, 211, 153, 0.58);
}

.cd-lml-group-other {
  color: rgba(100, 145, 185, 0.38);
}

.cd-lml-row-deal {
  background: rgba(4, 20, 14, 0.40);
}

.cd-lml-row-deal:hover {
  background: rgba(16, 185, 129, 0.07);
}

/* ── Insufficient data notice (price history) ────────────────────── */
.cd-insufficient-data {
  align-items: flex-start;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 8px;
  color: rgba(145, 188, 228, 0.68);
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
}

.cd-insufficient-data svg {
  color: rgba(245, 158, 11, 0.65);
  flex-shrink: 0;
  margin-top: 1px;
}

.cd-insufficient-data-title {
  color: rgba(200, 228, 252, 0.85);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
}

.cd-insufficient-data-sub {
  color: rgba(140, 180, 215, 0.58);
  display: block;
  font-size: 12px;
  line-height: 1.55;
}

/* ── Price history section ───────────────────────────────────────── */
.cd-ph-section {
  margin-bottom: 16px;
}

/* ── Collapsible panel (details/summary wrapping a panel) ────────── */
.cd-collapsible {
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOOKUP VIEW TOGGLE
   ───────────────────────────────────────────────────────────────────────────── */

.view-toggle {
  display: flex;
  gap: 4px;
}

.view-btn {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.view-btn:hover,
.view-btn.active {
  background: rgba(39, 213, 255, 0.1);
  border-color: rgba(39, 213, 255, 0.38);
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD GRID (grid view)
   ───────────────────────────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1300px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .card-grid { grid-template-columns: 1fr; } }

/* ── Card tile ─────────────────────────────────────────────────────────────── */

.card-tile {
  background: rgba(7, 16, 34, 0.78);
  border: 1px solid rgba(82, 167, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  will-change: transform;
}

.card-tile:hover {
  border-color: rgba(39, 213, 255, 0.36);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.42),
    0 8px 24px rgba(0, 80, 180, 0.16),
    0 0 0 1px rgba(39, 213, 255, 0.1),
    0 0 40px rgba(39, 213, 255, 0.06);
  transform: translateY(-4px);
}

/* Lift the active card above sibling cards so the Find Deals dropdown is never
   covered. transform on :hover creates a stacking context; without an explicit
   z-index the card is ordered by DOM position, so later cards paint on top.
   :has() is the primary selector; .dropdown-open is the JS fallback class. */
.card-tile:has(.deal-menu:hover),
.card-tile:has(.deal-menu:focus-within),
.card-tile.dropdown-open {
  z-index: 50;
}

/* Stretched-link overlay: clicking anywhere on the tile opens Card Details.
   Interactive CTAs sit above it via z-index. */
.stretched-link::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.card-tile-ctas {
  position: relative;
  z-index: 1;
}

.card-tile-score-row {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.card-tile-price-source {
  color: rgba(100, 160, 200, 0.45);
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

/* ── Card image ─────────────────────────────────────────────────────────────── */

.card-tile-img {
  aspect-ratio: 5 / 7;
  background: rgba(5, 9, 20, 0.55);
  border-radius: 13px 13px 0 0;   /* clip image corners without overflow:hidden on tile */
  overflow: hidden;
  position: relative;
}

.card-tile-img img {
  display: block;
  height: 100%;
  object-fit: contain;
  transition: transform 0.15s ease;
  width: 100%;
}

.card-tile:hover .card-tile-img img {
  transform: scale(1.02);
}

.card-tile-img-placeholder {
  align-items: center;
  color: rgba(82, 167, 255, 0.22);
  display: flex;
  font-size: 11px;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Card body ──────────────────────────────────────────────────────────────── */

.card-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 16px 16px 14px;
}

.card-tile-name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
}

.card-tile-name:hover { color: var(--accent); }

.card-tile-meta {
  color: rgba(100, 140, 178, 0.6);
  font-size: 10.5px;
  line-height: 1.5;
}

.card-tile-price {
  color: #b8f0ff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── CardVago Score — branded component ─────────────────────────────────────── */

.cv-score {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
  padding: 8px 12px;
  text-align: center;
}

.cv-score-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.65;
  text-transform: uppercase;
}

.cv-score-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 2px;
}

.cv-score-desc {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Emerald — 90–100 */
.cv-score.score-premium {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
}

/* Cyan — 75–89 */
.cv-score.score-strong {
  background: rgba(39, 213, 255, 0.08);
  border: 1px solid rgba(39, 213, 255, 0.28);
  box-shadow: 0 0 20px rgba(39, 213, 255, 0.08);
  color: var(--accent);
}

/* Gold — 55–74 */
.cv-score.score-good {
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.26);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.08);
  color: #fcd34d;
}

/* Orange — 35–54 */
.cv-score.score-fair {
  background: rgba(249, 115, 22, 0.09);
  border: 1px solid rgba(249, 115, 22, 0.26);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.07);
  color: #fdba74;
}

/* Red — 0–34 */
.cv-score.score-basic {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.07);
  color: #fca5a5;
}

/* Compact inline version for table view */
.cv-score-inline {
  border-radius: 7px;
  gap: 0;
  padding: 5px 9px;
}

.cv-score-inline .cv-score-num   { font-size: 14px; margin-top: 1px; }
.cv-score-inline .cv-score-label { font-size: 7px; }
.cv-score-inline .cv-score-desc  { font-size: 7px; margin-top: 1px; }

/* ── Compact score pill — grid card tiles ────────────────────────────────────── */
/* Inherits background / border / box-shadow / color from .score-* tier classes.
   Overrides the base .cv-score column layout to a horizontal one-line pill.     */
.cv-score-compact {
  border-radius: 7px;
  flex-direction: row;
  gap: 5px;
  padding: 4px 10px;
  text-align: left;
}

.cv-sc-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  opacity: 0.65;
  text-transform: uppercase;
}

.cv-sc-num {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cv-sc-sep {
  font-size: 10px;
  opacity: 0.28;
}

.cv-sc-desc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* ── Signal badge ───────────────────────────────────────────────────────────── */

.signal-badge {
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.signal-badge.premium  { background: rgba(132,72,255,0.16); border: 1px solid rgba(132,72,255,0.38); color: #c4b5fd; }
.signal-badge.high-value { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.38); color: #fde68a; }
.signal-badge.chase    { background: rgba(39,213,255,0.1);  border: 1px solid rgba(39,213,255,0.3);  color: var(--accent); }
.signal-badge.holo     { background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.28);  color: #7dffae; }
.signal-badge.standard { background: rgba(148,163,184,0.08);border: 1px solid rgba(148,163,184,0.22);color: var(--muted); }

/* ── Card CTAs ──────────────────────────────────────────────────────────────── */

.card-tile-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
}

/* Shared token for all CTA buttons/links inside a tile */
.card-tile-ctas a,
.card-tile-ctas button.tile-cta {
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(82, 167, 255, 0.2);
  border-radius: 6px;
  color: #7ee8ff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
  padding: 5px 9px;
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  user-select: none;
  white-space: nowrap;
}

.card-tile-ctas a:hover,
.card-tile-ctas button.tile-cta:hover,
.deal-menu:hover .deal-trigger,
.deal-menu:focus-within .deal-trigger {
  background: rgba(39, 213, 255, 0.1);
  border-color: rgba(39, 213, 255, 0.38);
  color: var(--accent);
}

.card-tile-ctas .cta-tracked {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.32);
  color: #fde68a;
  cursor: default;
}

.card-tile-ctas .cta-market { background:rgba(34,197,94,0.08);  border-color:rgba(34,197,94,0.28);  color:#7dffae; }
.card-tile-ctas .cta-market:hover { background:rgba(34,197,94,0.15); border-color:rgba(34,197,94,0.45); }
.card-tile-ctas .cta-tcg   { background:rgba(39,213,255,0.08); border-color:rgba(39,213,255,0.25); color:#a5f3ff; }
.card-tile-ctas .cta-tcg:hover   { background:rgba(39,213,255,0.14); border-color:rgba(39,213,255,0.42); }

/* ── Find Deals dropdown ────────────────────────────────────────────────────── */

/* Wrapper is the single hover region — trigger + popup live inside it.
   Hovering either child keeps the menu open; leaving both closes it. */
.deal-menu {
  position: relative;
  z-index: 1;
}

/* Bridge pseudo-element fills the visual gap so the pointer never
   leaves the hover region while moving from trigger to popup. */
.deal-menu::after {
  content: "";
  height: 8px;   /* must be >= the top offset of .find-deals-menu */
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
}

.find-deals-menu {
  background: rgba(3, 7, 16, 0.99);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(82, 167, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1px;
  left: 0;
  min-width: 232px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  visibility: hidden;
  z-index: 200;
}

/* Show when the wrapper (trigger or popup) is hovered, or keyboard-focused */
.deal-menu:hover .find-deals-menu,
.deal-menu:focus-within .find-deals-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
  visibility: visible;
}

.find-deals-menu a {
  align-items: center;
  border-radius: 8px;
  color: rgba(180, 215, 242, 0.85);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.find-deals-menu a:hover { background: rgba(39, 213, 255, 0.08); color: var(--accent); }

.fdm-icon {
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.72;
  width: 18px;
  text-align: center;
}

.find-deals-menu .fdm-divider {
  border: none;
  border-top: 1px solid rgba(82, 167, 255, 0.1);
  margin: 4px 0;
}

.find-deals-menu .fdm-advanced {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* ── Primary / Secondary tile CTA tiers ─────────────────────────────────────── */

.tile-cta-primary {
  background: rgba(39, 213, 255, 0.11);
  border-color: rgba(39, 213, 255, 0.34);
  color: var(--accent);
  flex-grow: 1;
  font-size: 12px;
  justify-content: center;
}

.tile-cta-primary:hover,
.deal-menu:hover .tile-cta-primary,
.deal-menu:focus-within .tile-cta-primary {
  background: rgba(39, 213, 255, 0.2);
  border-color: rgba(39, 213, 255, 0.55);
  color: var(--accent);
}

.tile-cta-secondary {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--muted);
  font-size: 10px;
  padding: 4px 7px;
}

.tile-cta-secondary:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--ink);
}

/* ── No-image premium placeholder ───────────────────────────────────────────── */

.card-tile-no-img {
  aspect-ratio: unset !important;
  background: linear-gradient(150deg, rgba(4,10,22,0.95), rgba(8,18,40,0.8));
  border-radius: 16px 16px 0 0;
  display: flex;
  height: 68px;
  overflow: hidden;
}

.card-tile-no-img-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  margin: auto;
}

.cv-logo-mark {
  color: rgba(39, 213, 255, 0.18);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.card-tile-no-img-label {
  color: rgba(82, 167, 255, 0.2);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Result summary ─────────────────────────────────────────────────────────── */

.result-summary {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px;
}

.result-summary strong { color: var(--ink); }

/* ── Load More ──────────────────────────────────────────────────────────────── */

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.btn-load-more {
  background: rgba(10, 22, 40, 0.6);
  border: 1px solid rgba(82, 167, 255, 0.22);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 32px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-load-more:hover {
  background: rgba(39, 213, 255, 0.08);
  border-color: rgba(39, 213, 255, 0.32);
  color: var(--accent);
}

/* ── Best Match Hero ────────────────────────────────────────────────────────── */

.lookup-hero {
  background: linear-gradient(140deg, rgba(8,20,44,0.95) 0%, rgba(4,10,24,0.98) 100%);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(39, 213, 255, 0.04);
  display: flex;
  gap: 36px;
  margin-bottom: 40px;
  padding: 36px;
  position: relative;
}

.hero-img-col {
  flex-shrink: 0;
  width: 220px;
}

.hero-img-col img {
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.04);
  display: block;
  width: 100%;
}

.hero-img-placeholder {
  align-items: center;
  aspect-ratio: 5/7;
  background: rgba(5, 9, 20, 0.6);
  border-radius: 12px;
  color: rgba(82, 167, 255, 0.22);
  display: flex;
  font-size: 11px;
  justify-content: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-body-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-width: 0;
}

.hero-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-card-name {
  color: var(--ink);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-decoration: none;
}

.hero-card-name:hover { color: var(--accent); }

.hero-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.hero-price-row {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.hero-price {
  color: #b8f0ff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.hero-score-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Hero: PRIMARY Find Deals section ───────────────────────────────────────── */

.hero-find-deals-section {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 12px;
  padding: 16px 18px;
}

.hero-find-deals-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.hero-deal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hero-deal-link {
  background: rgba(10, 22, 40, 0.7);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 7px;
  color: #7ee8ff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}

.hero-deal-link:hover {
  background: rgba(39, 213, 255, 0.1);
  border-color: rgba(39, 213, 255, 0.38);
  color: var(--accent);
}

.hero-deal-link-advanced {
  color: var(--muted);
  font-style: italic;
}

/* ── Hero: SECONDARY actions row ────────────────────────────────────────────── */

.hero-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-secondary-btn {
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.hero-secondary-btn:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--ink);
}

/* ── Other matches divider ──────────────────────────────────────────────────── */

.other-matches-header {
  align-items: center;
  display: flex;
  gap: 14px;
  margin: 0 0 18px;
}

.other-matches-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.other-matches-header::after {
  background: rgba(82, 167, 255, 0.12);
  content: "";
  flex: 1;
  height: 1px;
}

@media (max-width: 640px) {
  .lookup-hero { flex-direction: column; gap: 22px; padding: 22px; }
  .hero-img-col { width: 110px; }
  .hero-card-name { font-size: 24px; }
  .hero-price { font-size: 22px; }
}

/* ── Card entry animation (stagger) ─────────────────────────────────────────── */

@keyframes cv-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-grid .card-tile {
  animation: cv-fade-up 0.24s ease both;
}

.card-grid .card-tile:nth-child(1)  { animation-delay: 0ms;   }
.card-grid .card-tile:nth-child(2)  { animation-delay: 25ms;  }
.card-grid .card-tile:nth-child(3)  { animation-delay: 50ms;  }
.card-grid .card-tile:nth-child(4)  { animation-delay: 75ms;  }
.card-grid .card-tile:nth-child(5)  { animation-delay: 100ms; }
.card-grid .card-tile:nth-child(6)  { animation-delay: 120ms; }
.card-grid .card-tile:nth-child(7)  { animation-delay: 140ms; }
.card-grid .card-tile:nth-child(8)  { animation-delay: 160ms; }
.card-grid .card-tile:nth-child(9)  { animation-delay: 175ms; }
.card-grid .card-tile:nth-child(10) { animation-delay: 190ms; }
.card-grid .card-tile:nth-child(n+11) { animation-delay: 200ms; }

/* ── Search shimmer (loading state on form submit) ───────────────────────────── */

@keyframes cv-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.cv-shimmer-tile {
  background: linear-gradient(
    90deg,
    rgba(10, 22, 40, 0.6) 25%,
    rgba(39, 90, 180, 0.06) 50%,
    rgba(10, 22, 40, 0.6) 75%
  );
  background-size: 1200px 100%;
  animation: cv-shimmer 1.4s infinite linear;
  border-radius: 16px;
  height: 320px;
}

/* ── Card results panel — must not clip the Find Deals dropdown ──────────────── */

/* .panel uses overflow:hidden to clip decorative backgrounds behind the border-
   radius. The card-results panel has no such content, so overflow:visible is
   safe here and allows the dropdown to escape the panel boundary. */
.lookup-cards-panel {
  overflow: visible;
}

/* The responsive rule sets overflow-x:auto on all panels; override it too. */
@media (max-width: 760px) {
  .lookup-cards-panel {
    overflow: visible;
  }
}

/* The card grid itself must never clip the dropdown. */
.card-grid {
  overflow: visible;
}

/* ── Hero price row ──────────────────────────────────────────────────────────── */

.hero-price-row {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin: 4px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TODAY / DISCOVER PAGE
   ───────────────────────────────────────────────────────────────────────────── */

/* Hero */
.today-hero {
  align-items: flex-end;
  background: linear-gradient(135deg, rgba(8, 18, 38, 0.92), rgba(4, 10, 22, 0.88));
  border: 1px solid rgba(82, 167, 255, 0.10);
  border-radius: 20px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
  padding: 34px 36px;
}

.today-hero-title {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 6px 0 10px;
}

.today-hero-sub {
  color: #8aadcc;
  font-size: 15px;
  margin: 0;
  max-width: 480px;
}

.today-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Signals strip — de-emphasised on the discover page */
.today-signals {
  margin-bottom: 16px;
  opacity: 0.72;
}

/* Discovery section heading */
.discover-section-head {
  margin-bottom: 20px;
}

.discover-section-title {
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  font-weight: 700;
  gap: 8px;
  margin: 0 0 4px;
}

.discover-icon {
  font-size: 1.2rem;
}

.discover-section-sub {
  color: #7a9ab8;
  font-size: 13px;
  margin: 0;
}

.discover-data-note {
  border-left: 2px solid rgba(39, 213, 255, 0.25);
  color: rgba(100, 150, 200, 0.7);
  font-size: 11.5px;
  margin: 0 0 18px;
  padding-left: 10px;
}

/* Pick of the Day — two-column premium hero */
.discover-pod {
  border-color: rgba(39, 213, 255, 0.20);
  box-shadow: 0 0 0 1px rgba(39, 213, 255, 0.05), 0 4px 40px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 28px 30px;
}

.today-best-move-label {
  color: rgba(39, 213, 255, 0.68);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.today-signal-panel {
  background: linear-gradient(160deg, rgba(14, 30, 58, 0.95), rgba(6, 14, 30, 0.95));
  border-color: rgba(39, 213, 255, 0.14);
}

.pod-layout {
  display: grid;
  gap: 32px;
  grid-template-columns: 260px 1fr;
}

@media (max-width: 680px) {
  .pod-layout { grid-template-columns: 1fr; }
}

.pod-img {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  display: block;
  width: 100%;
}

.pod-img-placeholder {
  align-items: center;
  aspect-ratio: 5 / 7;
  background: rgba(10, 22, 40, 0.6);
  border: 1px solid rgba(82, 167, 255, 0.12);
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

.pod-card-name {
  color: var(--ink);
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 6px;
  text-decoration: none;
}

.pod-card-name:hover { color: var(--accent); }

.pod-meta {
  color: #7a9ab8;
  font-size: 13px;
  margin: 0 0 14px;
}

.pod-price-row {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.pod-price {
  color: #b8f0ff;
  font-size: 1.8rem;
  font-weight: 700;
}

.pod-score-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.pod-find-deals { margin-bottom: 18px; }

.pod-find-deals-label {
  color: #7a9ab8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.pod-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE EXPERIENCE
   All rules are scoped to max-width breakpoints. Desktop (>1024px) is
   pixel-identical to the original. Nothing here changes desktop layout.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Prevent horizontal page scroll globally ──────────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ── Mobile hamburger button (hidden on desktop, flex on ≤768px) ───────────── */
.mobile-menu-btn {
  display: none !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid rgba(82, 167, 255, 0.28);
  border-radius: 10px;
  box-shadow: none;
  color: rgba(180, 210, 240, 0.80);
  cursor: pointer;
  flex-shrink: 0;
  height: 40px;
  min-height: unset;
  padding: 0;
  transition: background 0.14s, border-color 0.14s;
  width: 40px;
}
.mobile-menu-btn:hover {
  background: rgba(39, 213, 255, 0.08);
  border-color: rgba(39, 213, 255, 0.42);
  box-shadow: none;
}

/* ── Mobile nav backdrop ─────────────────────────────────────────────────── */
/* display:none !important by default — only the mobile media query re-enables it */
.mob-nav-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(2, 5, 14, 0.65);
  display: none !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.22s ease;
  z-index: 290;
}

/* ── Mobile nav drawer — slide in from right ─────────────────────────────── */
/* display:none !important by default — only the mobile media query re-enables it */
.mob-nav-drawer {
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  background: rgba(4, 8, 22, 0.97);
  border-left: 1px solid rgba(82, 167, 255, 0.14);
  bottom: 0;
  box-shadow: -24px 0 80px rgba(0, 0, 0, 0.65);
  display: none !important;
  flex-direction: column;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  width: min(320px, 88vw);
  z-index: 300;
}

.mob-nav-header {
  align-items: center;
  border-bottom: 1px solid rgba(82, 167, 255, 0.10);
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
}

.mob-nav-brand {
  gap: 10px;
}

.mob-nav-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 8px;
  box-shadow: none;
  color: rgba(160, 195, 230, 0.80);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  min-height: unset;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
  width: 36px;
}
.mob-nav-close:hover {
  background: rgba(39, 213, 255, 0.08);
  border-color: rgba(39, 213, 255, 0.36);
  box-shadow: none;
}

.mob-nav-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 10px 24px;
}

.mob-nav-link {
  align-items: center;
  border-radius: 10px;
  color: rgba(190, 220, 250, 0.82);
  display: flex;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  padding: 0 14px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.mob-nav-link:hover {
  background: rgba(39, 213, 255, 0.07);
  color: #eafbff;
}

.mob-nav-section {
  color: rgba(100, 145, 185, 0.50);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 14px 0 2px 14px;
  text-transform: uppercase;
}

.mob-nav-logout {
  color: rgba(255, 110, 110, 0.70);
}
.mob-nav-logout:hover {
  background: rgba(255, 80, 80, 0.07);
  color: rgba(255, 140, 140, 0.90);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLET — ≤1024px
   Only card grid changes; everything else stays desktop-identical.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE — ≤768px
   Full mobile treatment: nav collapse, hero compact, chips scroll, etc.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Topbar — single clean row: [brand] [watchlist] [hamburger] ─────────── */
  .topbar { min-height: 60px; }

  .topbar-inner {
    flex-wrap: nowrap;   /* a legacy ≤760px rule still leaks flex-wrap:wrap onto this element — reassert single-row */
    gap: 8px;
    justify-content: flex-start;   /* brand grows to fill; right items hug right */
    padding: 0 clamp(12px, 4vw, 20px);
  }

  /* Brand absorbs available space so right-side controls stay together */
  .brand { flex: 1; min-width: 0; }

  .brand-logo { height: 56px; width: 56px; }
  .brand-tagline { display: none; }
  .brand-name { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* nav-right: row of icon buttons */
  .nav-right { align-items: center; display: flex; flex-shrink: 0; flex-wrap: nowrap; gap: 6px; width: auto; }

  /* Hide desktop centre nav and CN admin button; show hamburger instead */
  .nav-menu  { display: none; }
  .nav-local { display: none; }   /* CN admin circle — access via drawer */
  .mobile-menu-btn { display: flex !important; }

  /* Backdrop: hidden globally; show only when drawer is open */
  .mob-nav-backdrop.is-open {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer: hidden globally; show only when open */
  .mob-nav-drawer.is-open {
    display: flex !important;
    transform: translateX(0);
  }

  /* Watchlist becomes square icon button */
  .nav-watchlist {
    border-radius: 10px;
    gap: 0;
    height: 40px;
    justify-content: center;
    min-height: 40px;
    padding: 0;
    width: 40px;
  }
  .nav-watchlist-label { display: none; }

  /* Landing: hero contains the topbar — same overrides apply */
  body.cardnexus-landing .nav-menu  { display: none; }
  body.cardnexus-landing .nav-local { display: none; }
  body.cardnexus-landing .mobile-menu-btn { display: flex !important; }
  body.cardnexus-landing .topbar { min-height: 60px; }

  /* ── Hero stage — 45%+ height reduction ─────────────────────────────────── */
  .cardnexus-hero-stage {
    border-radius: 16px;
    min-height: 440px;
  }

  /* ── Search console — flex column so children can be reordered ──────────── */
  .cardnexus-search-console {
    display: flex;
    flex-direction: column;
    margin: 10px auto 0;
    padding: 12px 14px 12px;
    width: calc(100% - 16px);
  }

  /* Order: header → search → chips → stats (stats below fold, search is first) */
  .cn-hero-header        { order: 1; }
  .cardnexus-search-row  { order: 2; }
  .cardnexus-game-chips  { order: 3; }
  .cardnexus-value-strip { order: 4; margin-top: 6px; }

  /* ── Value strip — 2×2 grid below search ────────────────────────────────── */
  .cardnexus-value-strip {
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
    padding: 8px 0 4px;
  }

  .ca-value-item {
    border-right: none;
    gap: 8px;
    padding: 3px 6px;
  }
  .ca-value-item:first-child { padding-left: 6px; }
  .ca-value-item:last-child  { padding-right: 6px; }

  .ca-value-icon { height: 26px; width: 26px; }
  .ca-value-item strong { font-size: 11px; }
  .ca-value-item span   { display: none; }

  /* Landing-scoped overrides */
  body.cardnexus-landing .cardnexus-value-strip {
    padding: 6px 0 4px;
    margin-bottom: 0;
  }

  /* ── Search bar — single full-width field, no trailing button ────────────
     Mobile has no mouse, so the keyboard's own Search key (enterkeyhint)
     submits — a second, explicit "Search" button is desktop-only chrome. */
  .cardnexus-search-bar {
    border-radius: 14px;
    min-height: 52px;
    padding-right: 0;
  }

  .cardnexus-search-input {
    font-size: 16px;   /* prevent iOS auto-zoom */
    min-height: 52px;
    padding-left: 4px;
  }

  .cardnexus-search-icon {
    display: flex;   /* a legacy ≤760px rule still hides this — reassert visible */
    padding: 0 8px 0 16px;
  }

  .cardnexus-search-icon svg {
    height: 18px;
    width: 18px;
  }

  .cardnexus-filter-btn,
  .cardnexus-search-bar .cardnexus-search-submit {
    display: none;
  }

  /* ── Game chips — horizontal snap scroll, never wrap ─────────────────────── */
  .cardnexus-game-chips {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    margin-bottom: 8px;
    overflow-x: auto;
    padding: 0 2px 4px;   /* small left/right pad so first/last chip don't clip */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cardnexus-game-chips::-webkit-scrollbar { display: none; }
  .ca-chip { flex-shrink: 0; scroll-snap-align: start; }

  /* ── Market rail — hidden on mobile to keep hero compact ────────────────── */
  .market-rail               { display: none; }
  body.cardnexus-landing .market-rail { display: none; }

  /* ── Card showcase — 55% scale, only centre card visible ────────────────── */
  /* bottom:0 because market rail is gone; card peeks from behind console glass */
  .card-showcase {
    bottom: 0;
    padding: 0 8px;
    top: 164px;
  }

  body.cardnexus-landing .card-showcase { top: 156px; }

  /* Side cards hidden — only pos-3 (main) remains */
  .showcase-pos-1,
  .showcase-pos-2,
  .showcase-pos-4,
  .showcase-pos-5 { display: none !important; }

  /* Main card at ~55% of 250×370 */
  .showcase-card       { height: 198px; margin: 0; width: 132px; }
  .showcase-card-main  { height: 204px; width: 138px; }

  /* Carousel: touch-swipe only on mobile — prev/next buttons removed */
  .carousel-btn { display: none; }

  /* ── Post-hero CTAs — search bar is the primary action on mobile ─────────── */
  .ca-post-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 4px;
  }
  /* "Paste a Deal" is first-child and has class .primary — hide on mobile.
     The search form in the hero is already the primary action. */
  .ca-post-hero-actions > a:first-child { display: none; }
  /* Remaining CTA (Today's Opportunities) centres itself */
  .ca-post-hero-actions > a:last-child  { text-align: center; }

  /* ── Shell / page padding ────────────────────────────────────────────────── */
  .shell, .page-shell { padding: 14px 12px 36px; }

  /* Landing: zero side padding so hero tiles edge-to-edge */
  body.cardnexus-landing .page-shell {
    padding-left: 0;
    padding-right: 0;
  }

  /* ── Page head / hero ────────────────────────────────────────────────────── */
  .page-head, .page-hero {
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  /* ── Panels ──────────────────────────────────────────────────────────────── */
  .panel, .glass-panel, .form-panel, .checklist-panel {
    overflow-x: auto;
    padding: 14px;
  }
  .lookup-cards-panel { overflow: visible; }

  /* ── Tables: allow horizontal scroll instead of squashing columns ────────── */
  table { min-width: 440px; }

  /* ── Filters: 2 columns instead of 5 ────────────────────────────────────── */
  .filters { grid-template-columns: 1fr 1fr; }

  /* ── Card grid — 2 columns on mobile, tablet already set to 3 above ──────── */
  .card-grid {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Card tiles — reduced padding and badge sizes ────────────────────────── */
  .card-tile-body { padding: 10px 10px 12px; }
  .card-tile-img  { min-height: 130px; }
  .card-tile-name { font-size: 13px; }
  .card-tile-price { font-size: 15px; }

  .card-tile-ctas { gap: 4px; padding-top: 8px; }
  .card-tile-ctas a,
  .card-tile-ctas button.tile-cta {
    font-size: 11px;
    min-height: 36px;
    padding: 5px 8px;
  }

  /* Mobile: suppress the card dropdown entirely — bottom sheet handles Find Deals */
  .find-deals-menu,
  .deal-menu:hover .find-deals-menu,
  .deal-menu:focus-within .find-deals-menu {
    display: none !important;
  }

  /* Badge */
  .badge { font-size: 10px; min-width: 42px; padding: 3px 5px; }

  /* cv-score compact */
  .cv-score-compact .cv-sc-desc { display: none; }

  /* ── Today page — sections stack, card grids become horizontal carousels ─── */
  .today-hero {
    flex-direction: column;
    gap: 10px;
    padding: 18px 14px;
  }
  .today-hero-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }

  .today-page .panel .card-grid {
    display: flex;
    flex-direction: row;
    gap: 12px;
    grid-template-columns: unset;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .today-page .panel .card-grid::-webkit-scrollbar { display: none; }

  .today-page .panel .card-grid .card-tile {
    flex: 0 0 76vw;
    max-width: 280px;
    min-width: 200px;
    scroll-snap-align: start;
  }

  /* Metric strip: 2 columns */
  .cc-metric-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }

  /* ── General touch targets ────────────────────────────────────────────────── */
  button, .cc-button, .link-button, .nav-watchlist {
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SMALL MOBILE — ≤480px
   Extra compactness for small phones.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Slightly tighter shell */
  .shell, .page-shell { padding: 10px 10px 28px; }

  /* Hero can be a little shorter */
  .cardnexus-hero-stage { min-height: 400px; }

  /* Hide value-strip sub-labels already hidden, icons smaller */
  .ca-value-icon { height: 22px; width: 22px; }
  .ca-value-item { gap: 6px; }

  /* Game chips narrower padding */
  .ca-chip { font-size: 12px; padding: 7px 14px; }
  .game-chip-icon { height: 18px; width: 18px; }

  /* Ensure strict 2-col card grid */
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Tighter tile body */
  .card-tile-body { gap: 6px; padding: 8px 8px 10px; }
  .card-tile-img  { min-height: 110px; }
  .card-tile-name { font-size: 12px; }
  .card-tile-price { font-size: 13px; }

  /* Today carousels: 1.2 visible tiles */
  .today-page .panel .card-grid .card-tile {
    flex: 0 0 83vw;
    max-width: 260px;
  }

  /* Table padding */
  td, th { padding: 9px 7px; }

  /* Filters: single column */
  .filters { grid-template-columns: 1fr; }

  /* Page head: tighter */
  .page-head, .page-hero { padding: 12px; }
  h1 { font-size: 26px; }

  /* Metric strip: 2 columns stays */
  .cc-metric-strip { grid-template-columns: 1fr 1fr; }

  /* Showcase card: slightly dim so it feels like backdrop art */
  .showcase-pos-3 { opacity: 0.45; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DEFENSIVE DESKTOP — force-hide all mobile-only nav elements on wide screens.
   Belt-and-suspenders over the global display:none !important rules above.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .mobile-menu-btn,
  .mob-nav-drawer,
  .mob-nav-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREVENT DESKTOP OVERFLOW FIX APPLYING ON DESKTOP
   The global html/body overflow-x:hidden should not clip desktop dropdowns.
   Re-allow on wide viewports where horizontal scrolling is never needed anyway.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  html, body { overflow-x: unset; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE FIND DEALS BOTTOM SHEET
   Global overlay — lives in <body>, never inside the card grid.
   Only rendered/visible on mobile (<=768px); desktop never sees it.
   ───────────────────────────────────────────────────────────────────────────── */

.mobile-deal-backdrop {
  background: rgba(0, 0, 0, 0.55);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.2s ease;
  visibility: hidden;
  z-index: 8900;
}
.mobile-deal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.mobile-deal-sheet {
  background: #0d1726;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(82, 167, 255, 0.18);
  bottom: 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
  left: 0;
  max-height: 80vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  pointer-events: none;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s;
  visibility: hidden;
  width: 100%;
  z-index: 9000;
}
.mobile-deal-sheet.is-open {
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  visibility: visible;
}

/* Lock body scroll while sheet is open */
body.sheet-open {
  overflow: hidden;
  touch-action: none;
}

.mds-header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(82, 167, 255, 0.1);
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 16px;
}
.mds-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mds-title {
  color: #e8f4ff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mds-card-name {
  color: rgba(160, 200, 240, 0.7);
  font-size: 12px;
  font-weight: 500;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mds-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(200, 220, 240, 0.7);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  height: 32px;
  line-height: 1;
  margin-top: 2px;
  padding: 0;
  width: 32px;
}

.mds-links {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 20px;
}
.mds-link {
  align-items: center;
  border-radius: 10px;
  color: rgba(180, 215, 242, 0.9);
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  min-height: 52px;
  padding: 0 12px;
  text-decoration: none;
  transition: background 0.12s;
}
.mds-link:active,
.mds-link:hover {
  background: rgba(39, 213, 255, 0.1);
  color: #27d5ff;
}
.mds-link .fdm-icon {
  flex-shrink: 0;
  font-size: 18px;
  opacity: 0.8;
  text-align: center;
  width: 22px;
}
.mds-divider {
  border: none;
  border-top: 1px solid rgba(82, 167, 255, 0.1);
  margin: 4px 0;
}

/* Hide the sheet entirely on desktop — it is a mobile-only surface */
@media (min-width: 769px) {
  .mobile-deal-sheet,
  .mobile-deal-backdrop {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH AUTOCOMPLETE COMPONENT  (.sa-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────── */
.sa-root {
  align-items: center;
  display: flex;
  position: relative;
}

/* ── Search icon (left) ──────────────────────────────────────────── */
.sa-icon {
  color: rgba(100, 145, 185, 0.48);
  flex-shrink: 0;
  left: 11px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* ── Keyboard hint chip (right) ──────────────────────────────────── */
.sa-kbd {
  background: rgba(82, 167, 255, 0.07);
  border: 1px solid rgba(82, 167, 255, 0.16);
  border-radius: 4px;
  color: rgba(120, 165, 210, 0.55);
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.15s;
  z-index: 1;
}

/* ── Spinner (right, shown while loading) ────────────────────────── */
.sa-spinner {
  border: 2px solid rgba(82, 167, 255, 0.15);
  border-radius: 50%;
  border-top-color: rgba(39, 213, 255, 0.70);
  display: none;
  flex-shrink: 0;
  height: 14px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  z-index: 1;
}

@keyframes sa-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.sa-is-loading .sa-spinner {
  animation: sa-spin 0.65s linear infinite;
  display: block;
}

.sa-is-loading .sa-kbd {
  display: none;
}

/* ── The text input itself ───────────────────────────────────────── */
.sa-root input[type="text"],
.sa-root input:not([type]) {
  background: rgba(5, 12, 28, 0.70);
  border: 1px solid rgba(82, 167, 255, 0.18);
  border-radius: 8px;
  color: rgba(220, 240, 255, 0.92);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  height: 36px;
  outline: none;
  padding: 0 36px 0 36px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, width 0.20s;
  width: 260px;
}

.sa-root input::placeholder {
  color: rgba(100, 145, 185, 0.45);
}

.sa-root input:focus {
  background: rgba(5, 12, 28, 0.88);
  border-color: rgba(39, 213, 255, 0.50);
  box-shadow: 0 0 0 3px rgba(39, 213, 255, 0.10);
  width: 340px;
}

.sa-root input:focus + .sa-kbd,
.sa-root input:focus ~ .sa-kbd {
  opacity: 0;
}

/* ── Dropdown panel ──────────────────────────────────────────────── */
.sa-dropdown {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background: rgba(5, 11, 27, 0.97);
  border: 1px solid rgba(82, 167, 255, 0.16);
  border-radius: 12px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.58),
    0 6px 20px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  left: 0;
  max-height: min(420px, calc(100vh - 120px));
  min-width: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0;
  position: absolute;
  top: calc(100% + 6px);
  width: max(100%, 360px);
  z-index: 500;
}

/* ── Group header ────────────────────────────────────────────────── */
.sa-group {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px 4px;
}

.sa-group-label {
  color: rgba(100, 145, 185, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.sa-group-count {
  background: rgba(82, 167, 255, 0.07);
  border-radius: 20px;
  color: rgba(100, 145, 185, 0.50);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
}

/* ── Result row ──────────────────────────────────────────────────── */
.sa-item {
  align-items: center;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 0.08s;
}

.sa-item:hover,
.sa-item--active {
  background: rgba(39, 213, 255, 0.06);
}

.sa-item--active .sa-item-arrow {
  color: rgba(39, 213, 255, 0.80);
  transform: translateX(2px);
}

/* ── Thumbnail ───────────────────────────────────────────────────── */
.sa-item-thumb {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 32px;
}

.sa-item-img {
  border-radius: 4px;
  display: block;
  height: 44px;
  object-fit: contain;
  width: 32px;
}

.sa-item-img-ph {
  align-items: center;
  background: rgba(82, 167, 255, 0.07);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 4px;
  color: rgba(100, 145, 185, 0.40);
  display: flex;
  height: 44px;
  justify-content: center;
  width: 32px;
}

/* ── Text body ───────────────────────────────────────────────────── */
.sa-item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sa-item-name {
  color: rgba(218, 240, 255, 0.94);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-item-sub {
  color: rgba(100, 145, 185, 0.52);
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Right column ────────────────────────────────────────────────── */
.sa-item-right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.sa-item-arrow {
  color: rgba(82, 130, 175, 0.28);
  transition: color 0.10s, transform 0.10s;
}

/* ── Rarity badge ────────────────────────────────────────────────── */
.sa-badge {
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  text-transform: uppercase;
}

.sa-badge-secret  { background: rgba(168, 85, 247, 0.14); color: #c084fc; }
.sa-badge-ultra   { background: rgba(251, 191, 36, 0.12);  color: #fbbf24; }
.sa-badge-holo    { background: rgba(39, 213, 255, 0.10);  color: #67e8f9; }
.sa-badge-rare    { background: rgba(16, 185, 129, 0.10);  color: #34d399; }
.sa-badge-uncommon{ background: rgba(82, 167, 255, 0.10);  color: #93c5fd; }
.sa-badge-common  { background: rgba(100, 140, 180, 0.08); color: rgba(140, 180, 215, 0.58); }

/* ── Empty / error state ─────────────────────────────────────────── */
.sa-empty {
  color: rgba(130, 170, 208, 0.58);
  font-size: 13px;
  padding: 14px 16px;
  text-align: center;
}

.sa-empty strong {
  color: rgba(180, 210, 240, 0.82);
  font-weight: 700;
}

/* ── Footer link ─────────────────────────────────────────────────── */
.sa-footer {
  align-items: center;
  border-top: 1px solid rgba(82, 167, 255, 0.07);
  color: rgba(39, 213, 255, 0.65);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  justify-content: center;
  margin-top: 4px;
  padding: 10px 12px;
  text-decoration: none;
  transition: color 0.12s;
}

.sa-footer:hover {
  color: rgba(39, 213, 255, 0.90);
}

/* ── Topbar search wrapper ───────────────────────────────────────── */
.topbar-search {
  flex: 1;
  max-width: 420px;
  padding: 0 16px;
}

/* Homepage hero is the only search — hide the duplicate topbar search */
.cardnexus-landing .topbar-search {
  display: none !important;
}

@media (max-width: 900px) {
  /* Hidden by default; shown when the toggle button opens it */
  .topbar-search {
    display: none;
  }

  /* Expanded state: full-width row below the topbar */
  .topbar-inner.search-open .topbar-search {
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    order: 10;
    padding: 6px 12px 10px;
    max-width: none;
    width: 100%;
  }

  /* The sa-root and its input stretch to fill the row */
  .topbar-inner.search-open .topbar-search .sa-root {
    width: 100%;
  }

  .topbar-inner.search-open .topbar-search .sa-root input[type="text"],
  .topbar-inner.search-open .topbar-search .sa-root input:not([type]) {
    width: 100%;
  }

  .topbar-inner.search-open .topbar-search .sa-root input:focus {
    width: 100%;
  }

  /* Dropdown should not overflow the viewport on small screens */
  .topbar-inner.search-open .topbar-search .sa-dropdown {
    min-width: 0;
    width: 100%;
  }

  /* Toggle button: show active state when search is open */
  .topbar-inner.search-open #mob-search-toggle {
    background: rgba(39, 213, 255, 0.10);
    border-color: rgba(39, 213, 255, 0.28);
    color: #27d5ff;
  }
}

@media (max-width: 1200px) {
  .topbar-search {
    max-width: 280px;
    padding: 0 8px;
  }

  .sa-root input:focus {
    width: 280px;
  }
}

/* Lookup page search wiring: full width */
.lookup-search-ac .sa-root {
  width: 100%;
}

.lookup-search-ac .sa-root input[type="text"],
.lookup-search-ac .sa-root input:not([type]) {
  width: 100%;
}

.lookup-search-ac .sa-root input:focus {
  width: 100%;
}

.lookup-search-ac .sa-dropdown {
  min-width: 0;
  width: 100%;
}

/* The filters panel inherits .panel's overflow:hidden (there to clip other
   panels' rounded corners around image/card content), but this panel holds
   only the filter form — its short, content-sized height clips almost the
   entire autocomplete dropdown before it ever gets a chance to paint. Scope
   it back to visible for just this panel; nothing here depends on the clip. */
.panel:has(#lookup-form) {
  overflow: visible;
}

/* ── Search autocomplete — dedicated mobile presentation (≤768px) ──────────
   Not a scaled-down desktop panel: full-width sheet, one compact row per
   result, no rarity badge / arrow / secondary columns. Same JS + DOM as
   desktop — only layout changes here. ─────────────────────────────────── */
@media (max-width: 768px) {
  .sa-dropdown {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-height: 50vh;
    border-radius: 10px;
    padding: 4px 0;
  }

  .sa-group {
    padding: 10px 14px 6px;
  }

  .sa-item {
    gap: 12px;
    min-height: 60px;
    padding: 8px 14px;
  }

  .sa-item-thumb {
    height: 44px;
    width: 36px;
  }

  .sa-item-img,
  .sa-item-img-ph {
    height: 44px;
    width: 36px;
  }

  .sa-item-body {
    gap: 3px;
  }

  .sa-item-name {
    font-size: 14.5px;
  }

  .sa-item-sub {
    font-size: 12.5px;
  }

  /* Desktop-only chrome: rarity badge + arrow */
  .sa-item-right {
    display: none;
  }

  .sa-footer,
  .sa-empty {
    padding: 14px 16px;
  }

  /* Tap feedback — hover never fires on touch, so give a real pressed state */
  .sa-item:active {
    background: rgba(39, 213, 255, 0.10);
  }
}

/* ── Homepage hero search — dropdown attached to the field (≤768px) ────────
   Same light glass surface, shared radius, zero gap: while results are open
   the pair reads as one continuous control instead of a bar with a floating
   dark card underneath it. Keyed off aria-expanded, which the existing
   SearchAutocomplete JS already toggles — no JS changes. ─────────────────── */
@media (max-width: 768px) {
  .cardnexus-search-bar:has(input[aria-expanded="true"]) {
    border-radius: 14px 14px 0 0;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  /* The dropdown positions relative to the nearest positioned ancestor, which
     is normally .sa-root — but .sa-root only spans the bar minus the leading
     icon, so it wouldn't line up with the bar's own edges. Make the bar
     itself the positioning context instead so the panel matches it exactly. */
  .cardnexus-search-bar {
    position: relative;
  }

  .cardnexus-search-bar .sa-root {
    position: static;
  }

  .cardnexus-search-bar .sa-dropdown {
    background: rgba(232, 244, 255, 0.97);
    border: 1.5px solid rgba(39, 213, 255, 0.18);
    border-top: none;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 20px 44px rgba(4, 12, 30, 0.30);
    left: -1.5px;
    right: -1.5px;
    top: 100%;
    width: auto;
  }

  .cardnexus-search-bar .sa-group-label {
    color: rgba(10, 30, 70, 0.50);
  }

  .cardnexus-search-bar .sa-group-count {
    background: rgba(10, 30, 70, 0.07);
    color: rgba(10, 30, 70, 0.55);
  }

  .cardnexus-search-bar .sa-item:hover,
  .cardnexus-search-bar .sa-item--active {
    background: rgba(39, 213, 255, 0.08);
  }

  .cardnexus-search-bar .sa-item:active {
    background: rgba(39, 213, 255, 0.16);
  }

  .cardnexus-search-bar .sa-item-name {
    color: #0a1628;
  }

  .cardnexus-search-bar .sa-item-sub {
    color: rgba(10, 30, 70, 0.55);
  }

  .cardnexus-search-bar .sa-item-img-ph {
    background: rgba(10, 30, 70, 0.05);
    border-color: rgba(10, 30, 70, 0.12);
    color: rgba(10, 30, 70, 0.35);
  }

  .cardnexus-search-bar .sa-empty {
    color: rgba(10, 30, 70, 0.55);
  }

  .cardnexus-search-bar .sa-empty strong {
    color: #0a1628;
  }

  .cardnexus-search-bar .sa-footer {
    border-top-color: rgba(10, 30, 70, 0.10);
    color: #0468d8;
  }

  .cardnexus-search-bar .sa-footer:hover {
    color: #0350ad;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE REDESIGN — TABLE → CARD TRANSFORM AND TOUCH IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mobile search shortcut (visible ≤900px) ─────────────────────── */
.mob-search-btn {
  align-items: center;
  background: rgba(82, 167, 255, 0.07);
  border: 1px solid rgba(82, 167, 255, 0.14);
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.75);
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  margin-right: 6px;
  min-height: 36px;
  text-decoration: none;
  width: 36px;
}
.mob-search-btn:hover,
.mob-search-btn:active {
  background: rgba(39, 213, 255, 0.10);
  color: #27d5ff;
}
@media (max-width: 900px) {
  .mob-search-btn { display: flex; }

  /* Landing already shows the full hero search one glance below the nav —
     a second search-toggle icon up here is a duplicate affordance. */
  body.cardnexus-landing .mob-search-btn { display: none; }
}

/* ── Table → Card transform and all mobile improvements at ≤768px ─── */
@media (max-width: 768px) {

  /* Override panel overflow-x so card rows render fully */
  .panel.table-wrap,
  .glass-panel.table-wrap { overflow-x: visible; }

  /* Table itself becomes a block container */
  .table-wrap table {
    border: none;
    display: block;
    min-width: 0;
    width: 100%;
  }
  .table-wrap thead { display: none; }
  .table-wrap tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Each row becomes a card */
  .table-wrap tbody tr {
    background: rgba(7, 16, 34, 0.55);
    border: 1px solid rgba(82, 167, 255, 0.09);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }

  /* First td: card header — full width */
  .table-wrap tbody td:first-child {
    border-bottom: 1px solid rgba(82, 167, 255, 0.07);
    grid-column: 1 / -1;
    padding: 12px 14px 10px;
  }

  /* Middle tds: 2-col data grid */
  .table-wrap tbody td:not(:first-child):not(:last-child) {
    padding: 9px 14px;
  }

  /* Column label above each value */
  .table-wrap tbody td[data-label]::before {
    color: rgba(100, 145, 185, 0.46);
    content: attr(data-label);
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
    text-transform: uppercase;
  }

  /* Last td without data-label = action footer (Remove, etc.) */
  .table-wrap tbody td:last-child:not([data-label]) {
    border-top: 1px solid rgba(82, 167, 255, 0.07);
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding: 8px 14px;
  }

  /* Last td with data-label = spans full width but shows its label+value */
  .table-wrap tbody td:last-child[data-label] {
    border-top: 1px solid rgba(82, 167, 255, 0.07);
    grid-column: 1 / -1;
    padding: 9px 14px;
  }

  /* Colspan rows (empty state): override all card-cell rules */
  .table-wrap tbody td[colspan] {
    border: none !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    padding: 14px !important;
  }

  /* ── Card-tile CTAs: wrap so all buttons stay visible ──────────── */
  .card-tile-ctas { flex-wrap: wrap; }

  /* ── Market listings: 2-row card layout ────────────────────────── */
  /* (overrides the 900px 2-col table that hides badge + action) */
  .cd-lml-table { gap: 6px; }

  .cd-lml-row {
    border: 1px solid rgba(82, 167, 255, 0.08) !important;
    border-radius: 10px;
    display: grid;
    gap: 5px 8px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    margin-bottom: 0 !important;
    padding: 10px 12px;
  }

  /* Marketplace (row 1, col 1) */
  .cd-lml-row > :nth-child(1) { grid-column: 1; grid-row: 1; }

  /* Price (row 2, col 1) */
  .cd-lml-row > :nth-child(2) {
    align-self: center;
    font-size: 15px;
    font-weight: 700;
    grid-column: 1;
    grid-row: 2;
  }

  /* Verdict badge (row 1, col 2) — was hidden at 900px */
  .cd-lml-row > :nth-child(6) {
    align-items: flex-start;
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  /* Action link (row 2, col 2) — was hidden at 900px */
  .cd-lml-action {
    align-items: center;
    display: flex !important;
    font-size: 11px;
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
  }

  /* Keep unused columns hidden */
  .cd-lml-fv,
  .cd-lml-vs,
  .cd-lml-profit { display: none !important; }

  /* ── Lookup filters: search and submit span full width ─────────── */
  .lookup-filters label:first-child { grid-column: 1 / -1; }
  .lookup-filters button[type="submit"] { grid-column: 1 / -1; }

  /* ── Prevent iOS auto-zoom on form inputs ───────────────────────── */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  select,
  textarea { font-size: max(16px, 1em); }
}

/* ── Page head actions: properly spaced on small phones ──────────── */
@media (max-width: 600px) {
  .page-head .actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .page-head .actions a,
  .page-head .actions button {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }
}