/* ── Reset ───────────────────────────────────────────────────────────────────── */







/* ── Header ──────────────────────────────────────────────────────────────────── */














/* ── Main layout ─────────────────────────────────────────────────────────────── */


/* ── Search section ──────────────────────────────────────────────────────────── */
#view-legacy .search-section {text-align:center;padding:40px 0 20px}
#view-legacy .search-section h1 {font-size:26px;font-weight:800;letter-spacing:-.3px;margin-bottom:10px}
#view-legacy .search-section p {color:var(--muted);font-size:14px;margin-bottom:28px}

#view-legacy .search-bar {display:flex;gap:8px;max-width:560px;margin:0 auto}
#view-legacy .search-bar input {
  flex:1;background:var(--card);border:1px solid var(--border);
  color:var(--text);padding:11px 16px;border-radius:var(--radius);
  font-size:14px;outline:none;transition:border-color .15s;font-family:monospace;
}
#view-legacy .search-bar input:focus {border-color:var(--accent)}
#view-legacy .search-bar button {
  background:var(--accent-strong);color:#fff;border:none;
  padding:11px 24px;border-radius:var(--radius);cursor:pointer;
  font-weight:700;font-size:14px;transition:opacity .15s;white-space:nowrap;
}
#view-legacy .search-bar button:hover {opacity:.88}
#view-legacy .search-bar button:disabled {opacity:.5;cursor:not-allowed}

#view-legacy .search-error {
  margin-top:12px;color:var(--danger);font-size:13px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);
  padding:8px 14px;border-radius:var(--radius);display:inline-block;
}

/* ── Score hero ──────────────────────────────────────────────────────────────── */
#view-legacy .score-hero {
  display:flex;align-items:center;gap:28px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:24px 28px;margin-bottom:24px;
  position:relative;
}
#view-legacy .hero-score {
  font-size:52px;font-weight:900;letter-spacing:-2px;
  background:linear-gradient(135deg,var(--accent),#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
#view-legacy .hero-label {font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-top:4px}
#view-legacy .hero-right {display:flex;flex-direction:column;gap:4px}
#view-legacy .hero-nickname {font-size:18px;font-weight:700}
#view-legacy .hero-wallet {font-size:12px;color:var(--muted);font-family:monospace}
#view-legacy .hero-rank {font-size:13px;color:var(--accent);font-weight:600}

#view-legacy .search-again-btn {
  margin-left:auto;background:none;border:1px solid var(--border);
  color:var(--muted);padding:7px 14px;border-radius:var(--radius);
  cursor:pointer;font-size:12px;transition:all .15s;
}
#view-legacy .search-again-btn:hover {border-color:var(--accent);color:var(--accent)}

/* ── Section header ──────────────────────────────────────────────────────────── */
#view-legacy .section-header {
  font-size:11px;font-weight:700;letter-spacing:1.5px;
  color:var(--muted);text-transform:uppercase;
  margin-bottom:12px;margin-top:28px;
}
#view-legacy .recs-header-row {display:flex;align-items:center;justify-content:space-between}

/* ── Breakdown grid ──────────────────────────────────────────────────────────── */
#view-legacy .breakdown-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
#view-legacy .bc-card {
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;
}
#view-legacy .bc-card.bc-highlight {border-color:rgba(79,142,247,.35);background:var(--accent-dim)}
#view-legacy .bc-label {font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:500}
#view-legacy .bc-value {font-size:22px;font-weight:800;line-height:1}
#view-legacy .bc-pct {font-size:11px;color:var(--muted);margin-top:3px}

/* ── Filter tabs ─────────────────────────────────────────────────────────────── */
#view-legacy .filter-tabs {display:flex;gap:6px}
#view-legacy .tab {
  background:none;border:1px solid var(--border);color:var(--muted);
  padding:4px 12px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:500;
  transition:all .15s;
}
#view-legacy .tab:hover {border-color:var(--accent);color:var(--text)}
#view-legacy .tab.active {background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}

/* ── Table ───────────────────────────────────────────────────────────────────── */
#view-legacy .table-wrap {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
#view-legacy table {width:100%;border-collapse:collapse}
#view-legacy thead {background:var(--card)}
#view-legacy th {
  padding:10px 14px;text-align:left;font-size:11px;font-weight:700;
  letter-spacing:.8px;color:var(--muted);text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
#view-legacy th.num-col {text-align:right}
#view-legacy th.sortable {cursor:pointer;user-select:none}
#view-legacy th.sortable:hover {color:var(--text)}
#view-legacy th.active-sort {color:var(--accent)}

#view-legacy td {
  padding:10px 14px;border-bottom:1px solid var(--border);
  vertical-align:middle;font-size:13px;
}
#view-legacy tr:last-child td {border-bottom:none}
#view-legacy tr:hover td {background:rgba(255,255,255,.02)}
#view-legacy td.num-col {text-align:right;font-variant-numeric:tabular-nums}

#view-legacy .item-thumb {
  width:36px;height:36px;border-radius:6px;object-fit:cover;
  background:var(--card);border:1px solid var(--border);display:block;
}
#view-legacy .item-thumb-placeholder {
  width:36px;height:36px;border-radius:6px;
  background:var(--card);border:1px solid var(--border);
}

#view-legacy .item-name {font-weight:600;color:var(--text)}
#view-legacy .item-sub {font-size:11px;color:var(--muted);margin-top:2px}

#view-legacy .opp-label {font-weight:500}
#view-legacy .opp-sub {font-size:11px;color:var(--muted);margin-top:2px}

#view-legacy .pts-badge {
  display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:12px;font-weight:700;
}
#view-legacy .pts-badge.fame {background:rgba(245,158,11,.15);color:#f59e0b}
#view-legacy .pts-badge.ticket {background:rgba(79,142,247,.15);color:var(--accent)}
#view-legacy .pts-badge.theme_set {background:rgba(129,140,248,.15);color:#818cf8}
#view-legacy .pts-badge.rarity {background:rgba(34,197,94,.15);color:var(--success)}

#view-legacy .efficiency-val {font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
#view-legacy .efficiency-val.low {color:var(--muted)}
#view-legacy .efficiency-val.mid {color:var(--warn)}
#view-legacy .efficiency-val.high {color:var(--success)}

#view-legacy .subsection-header {
  font-size:12px;font-weight:700;color:var(--text);
  margin-bottom:10px;margin-top:20px;
}
#view-legacy .subsection-note {font-weight:400;color:var(--muted);font-size:11px}

#view-legacy .toggle-label {
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--muted);cursor:pointer;user-select:none;
}
#view-legacy .toggle-label input {accent-color:var(--accent);cursor:pointer;width:14px;height:14px}

#view-legacy .progress-bar-wrap {display:flex;align-items:center;gap:8px;min-width:140px}
#view-legacy .progress-bar {
  flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;
}
#view-legacy .progress-bar-fill {height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
#view-legacy .progress-bar-fill.high {background:var(--success)}
#view-legacy .progress-bar-fill.mid {background:var(--warn)}
#view-legacy .progress-text {font-size:12px;color:var(--muted);white-space:nowrap;min-width:52px;text-align:right}

#view-legacy .type-badge {
  display:inline-block;padding:2px 7px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
#view-legacy .type-badge.theme {background:rgba(129,140,248,.15);color:#818cf8}
#view-legacy .type-badge.ticket {background:rgba(79,142,247,.15);color:var(--accent)}
#view-legacy .type-badge.fame {background:rgba(245,158,11,.15);color:#f59e0b}

#view-legacy .missing-thumbs {display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
#view-legacy .missing-thumb-wrap {
  position:relative;display:inline-flex;flex-direction:column;
  align-items:center;gap:2px;
}
#view-legacy .missing-thumb {
  width:44px;height:44px;border-radius:6px;object-fit:cover;
  border:1px solid var(--border);background:var(--card);display:block;
}
#view-legacy .missing-thumb-placeholder {
  width:44px;height:44px;border-radius:6px;
  background:var(--card);border:1px solid var(--border);
}
#view-legacy .missing-price-link {
  font-size:10px;color:var(--success);text-decoration:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2;
  text-align:center;
}
#view-legacy .missing-price-link:hover {text-decoration:underline;color:#4ade80}
#view-legacy .listed-dot {
  position:absolute;bottom:-2px;right:-2px;
  width:8px;height:8px;border-radius:50%;
  background:var(--success);border:1px solid var(--bg);
}
#view-legacy .more-badge {
  font-size:11px;color:var(--muted);padding:0 4px;white-space:nowrap;align-self:center;
}

#view-legacy .unlisted-tag {font-size:11px;color:var(--muted)}
#view-legacy .price-tag {font-size:13px;font-variant-numeric:tabular-nums}
#view-legacy .price-link {
  color:var(--accent);text-decoration:none;font-size:13px;
  font-variant-numeric:tabular-nums;border:none;padding:0;margin:0;
}
#view-legacy .price-link:hover {text-decoration:underline}
#view-legacy .ratio-badge {
  display:inline-block;padding:2px 7px;border-radius:4px;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  background:rgba(34,197,94,.12);color:var(--success);
}

#view-legacy .rarity-dot {
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;
}
#view-legacy .rarity-dot.divine {background:var(--rarity-divine)}
#view-legacy .rarity-dot.legendary {background:var(--rarity-legendary)}
#view-legacy .rarity-dot.elite {background:var(--rarity-elite)}
#view-legacy .rarity-dot.rare {background:var(--rarity-rare)}
#view-legacy .rarity-dot.common {background:var(--rarity-common)}

#view-legacy .bazaar-link {
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--muted);text-decoration:none;
  border:1px solid var(--border);padding:2px 8px;border-radius:4px;
  transition:all .15s;margin-top:4px;
}
#view-legacy .bazaar-link:hover {border-color:var(--accent);color:var(--accent)}

/* ── Rec controls (search + tabs) ────────────────────────────────────────────── */
#view-legacy .rec-controls {margin:20px 0 0}
#view-legacy .rec-search-input {
  width:100%;max-width:400px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);padding:8px 14px;border-radius:var(--radius);
  font-size:13px;outline:none;transition:border-color .15s;
}
#view-legacy .rec-search-input:focus {border-color:var(--accent)}

#view-legacy .rec-tabs {display:flex;gap:4px;margin:12px 0 0;border-bottom:1px solid var(--border);padding-bottom:0}
#view-legacy .rec-tab {
  background:none;border:none;color:var(--muted);
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;border-radius:0;
}
#view-legacy .rec-tab:hover {color:var(--text)}
#view-legacy .rec-tab.active {color:var(--accent);border-bottom-color:var(--accent)}

#view-legacy .rec-tab-panel {padding-top:16px}

/* ── Set name link ───────────────────────────────────────────────────────────── */
#view-legacy .set-name-link {
  cursor:pointer;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity .15s;
}
#view-legacy .set-name-link:hover {opacity:.75}

/* ── Set users modal ─────────────────────────────────────────────────────────── */
#view-legacy .su-legend {
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);flex-wrap:wrap;
}
#view-legacy .su-legend-swatch {display:inline-block;vertical-align:middle}
#view-legacy .su-dot {
  display:inline-block;width:12px;height:12px;border-radius:3px;
  border:1px solid transparent;vertical-align:middle;
}
#view-legacy .su-they-have {background:rgba(245,158,11,.7);border-color:rgba(245,158,11,.9)}
#view-legacy .su-both-have {background:rgba(34,197,94,.5);border-color:rgba(34,197,94,.7)}
#view-legacy .su-missing {background:var(--border);opacity:.5}

/* ── Quick Wins ──────────────────────────────────────────────────────────────── */
#view-legacy .qw-header {
  display:flex;align-items:baseline;gap:12px;
  margin-bottom:12px;
}
#view-legacy .qw-title {
  font-size:15px;font-weight:800;color:var(--text);
}
#view-legacy .qw-sub {font-size:12px;color:var(--muted)}


/* ── Empty / loading states ──────────────────────────────────────────────────── */
#view-legacy .empty-state {padding:32px;text-align:center;color:var(--muted);font-size:13px}
#view-legacy .hidden {display:none!important}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
#view-legacy .toast {
  position:fixed;bottom:24px;right:24px;z-index:999;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);padding:10px 18px;border-radius:var(--radius);
  font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:opacity .3s;
}
#view-legacy .toast.success {border-color:var(--success);color:var(--success)}
#view-legacy .toast.error {border-color:var(--danger);color:var(--danger)}

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Override the legacy.css header height so the 2-row mobile nav can expand */
  
  

  

  /* Fix table overflow — legacy.css uses overflow:hidden which clips on mobile */
  #view-legacy .table-wrap { overflow-x: auto; }

  /* Score hero: stack vertically */
  #view-legacy .score-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  #view-legacy .hero-score { font-size: 40px; }
  #view-legacy .search-again-btn { margin-left: 0; }

  /* Breakdown grid: 2 columns */
  #view-legacy .breakdown-grid { grid-template-columns: repeat(2, 1fr); }

  /* Progress bars: no fixed min-width */
  #view-legacy .progress-bar-wrap { min-width: unset; }
  #view-legacy .progress-text { min-width: 40px; }

  /* Rec controls */
  #view-legacy .recs-header-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  #view-legacy .rec-tabs { flex-wrap: wrap; }
  #view-legacy .rec-tab { padding: 6px 10px; font-size: 12px; }

  /* Table cells: tighter on mobile */
  #view-legacy th, #view-legacy td { padding: 8px 10px; font-size: 12px; }
  #view-legacy .item-thumb, #view-legacy .item-thumb-placeholder { width: 30px; height: 30px; }

  /* Search section */
  #view-legacy .search-section { padding: 20px 0 12px; }
  #view-legacy .search-section h1 { font-size: 20px; }
  #view-legacy .search-bar { flex-direction: column; }
  #view-legacy .search-bar input { font-size: 13px; padding: 10px 12px; }
  #view-legacy .search-bar button { width: 100%; }

  /* Missing thumbs: slightly smaller */
  #view-legacy .missing-thumb, #view-legacy .missing-thumb-placeholder { width: 36px; height: 36px; }
  #view-legacy .missing-price-link { font-size: 9px; }
}