html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root {
  --bg: #0a0a0c;
  --surface: #141418;
  --surface2: #1b1b22;
  --line: #2c2c36;
  --text: #f5f5f7;
  --muted: #a8a8b3;
  --orange: #f97316;
  --orange2: #fb923c;
  --gold: #fbbf24;
  --green: #22c55e;
  --green2: #4ade80;
  --red: #ef4444;
  --cyan: #22d3ee;
  --rarity: #eb4b4b;
  --grad: linear-gradient(135deg, #f97316, #dc2626);
  --font: "Rajdhani", system-ui, sans-serif;
  --display: "Orbitron", "Rajdhani", sans-serif;
  --radius: 12px;
  --max: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: radial-gradient(ellipse 80% 40% at 50% -10%, #f9731614, transparent), var(--bg);
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  min-height: 100vh; min-height: 100dvh;
  }
a { color: var(--orange2); text-decoration: none; font-weight: 600; }
a:hover { color: var(--gold); }
button, input, select { font-family: inherit; font-size: 16px; }
.hud {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  background: rgba(10,10,12,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hud-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
}
.hud .page-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo {
  font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .12em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.badge-demo {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #3d2a00; color: var(--gold); border: 1px solid #fbbf2466;
  padding: 5px 12px; border-radius: 6px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px;
}
.chip.live { color: var(--green2); border-color: #22c55e55; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.hud-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; min-width: 0; }
.hud-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.hud-menu { position: relative; }
.hud-menu summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface2); border: 1px solid var(--line); color: var(--text);
  font-size: 20px; line-height: 1;
}
.hud-menu summary::-webkit-details-marker { display: none; }
.hud-menu[open] summary { border-color: var(--orange); color: var(--orange); }
.hud-menu .menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 120;
  min-width: 160px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px #000a;
}
.hud-menu .menu-panel a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); font-weight: 600;
}
.hud-menu .menu-panel a:hover { background: var(--surface2); color: var(--orange2); }
.menu-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-meta:empty { display: none; }
.menu-meta .chip { font-size: 12px; padding: 4px 10px; }
.menu-meta a { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; color: var(--text); font-weight: 600; }
.btn.compact { padding: 10px 14px; font-size: 14px; width: auto !important; white-space: nowrap; }
@media (max-width: 700px) {
  .hud-inner { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; align-items: center; }
  .logo { font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
  .badge-demo { display: none; } /* keep row compact; demo still on cards */
  .hud-right { width: auto; margin-left: auto; flex: 0 0 auto; gap: 6px; }
  .hud-actions { display: none; } /* chips/actions live in ☰ menu on phone */
  .deal-hud-buy { display: none; }
}
@media (min-width: 701px) {
  .hud-menu { display: none; }
}

.btn {
  background: var(--grad); color: #fff; border: none;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 8px 28px #f9731644; display: inline-block;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost {
  background: var(--surface2); box-shadow: none; border: 1px solid var(--line); color: var(--text);
  text-transform: none; font-weight: 600;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 24px 20px 64px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: 0 12px 40px rgba(0,0,0,.35); margin-bottom: 20px;
}
.card.hero {
  border-color: #f9731644;
  background: linear-gradient(160deg, #1a1410 0%, var(--surface) 55%);
}
h1 {
  font-family: var(--display); font-size: clamp(26px, 4vw, 40px); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.15;
}
h2 {
  font-family: var(--display); font-size: clamp(20px, 3vw, 26px); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
.muted { color: var(--muted); }
.pos { color: var(--green2); }
.neg { color: var(--red); }
.filters {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  margin-bottom: 20px;
}
@media (min-width: 820px) {
  .filters { grid-template-columns: repeat(6, 1fr) auto; align-items: end; }
}
.filters label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.filters input, .filters select, .filters textarea {
  font-size: 16px;
  background: var(--surface2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 12px; width: 100%;
}
.deal-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .deal-grid { grid-template-columns: 1fr 1fr; } }
.deal-card {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; display: grid; gap: 10px; transition: border-color .15s, transform .15s;
}
.deal-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.deal-card .score {
  font-family: var(--display); font-size: 36px; font-weight: 800; color: var(--orange);
}
.deal-card .price { font-family: var(--display); font-size: 28px; font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
}
.tag.r { color: var(--rarity); border-color: #eb4b4b66; background: #eb4b4b18; }
.tag.gold { color: var(--gold); border-color: #fbbf2444; }
.tag.cyan { color: var(--cyan); border-color: #22d3ee44; }
.secnav {
  position: sticky; top: 62px; z-index: 90;
  background: rgba(10,10,12,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); margin: 0 -20px 20px; padding: 10px 20px;
}
.secnav-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.secnav-inner::-webkit-scrollbar { display: none; }
.secnav button {
  flex: 0 0 auto; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); white-space: nowrap;
}
.secnav button.on, .secnav button:hover { color: #fff; border-color: var(--orange); background: #f9731618; }
.section { display: none; }
.section.on, body.show-all .section { display: block; }
.kpis { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; text-align: center;
}
.kpi.primary { border-color: #22c55e44; background: linear-gradient(180deg, #14532d22, var(--surface2)); }
.kpi .k { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.kpi .v { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5vw, 48px); line-height: 1; }
.secondary-kpis { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.skpi { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.skpi .k { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.skpi .v { font-family: var(--display); font-size: 32px; font-weight: 800; }
.bar { height: 10px; background: #2a2a32; border-radius: 5px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16a34a, #22c55e); }
.reco {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: linear-gradient(135deg, #14532d, #166534); border: 1px solid #22c55e88;
  border-radius: 12px; padding: 16px 18px; box-shadow: 0 0 28px #22c55e28;
}
.reco .title { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: .1em; color: var(--green2); }
.reco .reason { font-size: 16px; color: #bbf7d0; }
.price-big { font-family: var(--display); font-size: clamp(48px, 8vw, 72px); font-weight: 800; line-height: 1; text-shadow: 0 0 32px #f9731655; }
.scen-grid { display: grid; gap: 16px; }
@media (min-width: 820px) { .scen-grid { grid-template-columns: 1fr 1fr; } }
.scen {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 22px; position: relative;
}
.scen.best { border-color: var(--green); background: linear-gradient(160deg, #14532d33, var(--surface2)); }
.scen.best .badge {
  position: absolute; top: -12px; right: 16px; background: var(--green); color: #052e16;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 6px;
}
.scen .gain { font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--green2); }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.meta-grid .l { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.meta-grid .v { font-size: 18px; font-weight: 700; }
.rows .row {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--line); font-size: 17px;
}
.rows .row .k { color: var(--muted); }
.total {
  margin-top: 18px; padding: 20px; border-radius: 12px;
  background: linear-gradient(135deg, #1a1208, #141410); border: 1px solid #f9731655;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.total .n { font-family: var(--display); font-size: 36px; font-weight: 800; }
.grid-2 { display: grid; gap: 20px; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.score-ring {
  --p: 84; width: 140px; height: 140px; border-radius: 50%; margin: 0 auto;
  background: conic-gradient(#22c55e 0 calc(var(--p) * 1%), #2a2a32 0);
  display: grid; place-items: center; box-shadow: 0 0 36px #22c55e33;
}
.score-ring::before {
  content: ""; width: 108px; height: 108px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); grid-area: 1/1;
}
.score-ring .inner { grid-area: 1/1; text-align: center; z-index: 1; position: relative; }
.score-ring .n { font-family: var(--display); font-size: 48px; font-weight: 800; line-height: 1; }
.chart-frame { background: #0e0e12; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.chart-frame svg { width: 100%; height: 260px; }
@media (min-width: 820px) { .chart-frame svg { height: 380px; } }
.chart-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.chart-tabs button {
  font-size: 15px; font-weight: 700; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--line); color: var(--muted);
}
.chart-tabs button.on { color: #fff; border-color: var(--orange); background: #f9731618; }
.alts { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .alts { grid-template-columns: 1fr 1fr; } }
.alt {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; position: relative;
}
.alt.better { border-color: var(--green); }
.alt.better::after {
  content: "BETTER"; position: absolute; top: -10px; right: 12px;
  background: var(--green); color: #052e16; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 4px;
}
.login-wrap { max-width: 420px; margin: 10vh auto; padding: 20px; }
.login-wrap input {
  width: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface2); color: var(--text); margin: 12px 0 16px;
}
.steam-signin {
  display: flex; justify-content: center; align-items: center;
  margin: 20px 0 8px; padding: 10px 12px;
  background: #171a21; border: 1px solid var(--line); border-radius: 10px;
}
.steam-signin img { display: block; height: 35px; width: auto; }
.steam-signin-fallback {
  display: none; font-family: var(--display); font-weight: 800; letter-spacing: .04em;
  color: #fff; font-size: 14px;
}
.steam-signin img[src=""] + .steam-signin-fallback,
.steam-signin.fallback .steam-signin-fallback { display: block; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 13px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hud-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-user img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; flex-shrink: 0; }
.hud-user .hud-name { font-weight: 700; font-size: 14px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { display: inline; margin: 0; }
.logout-form button { font: inherit; }
.hud-menu .menu-panel .logout-form { display: block; }
.hud-menu .menu-panel .logout-form button,
.more-sheet .logout-form button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  color: var(--text); font-weight: 600; background: none; border: 0; cursor: pointer;
}
.hud-menu .menu-panel .logout-form button:hover,
.more-sheet .logout-form button:hover { background: var(--surface2); color: var(--orange2); }
.steam-signed { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.steam-signed img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; flex-shrink: 0; }
@media (max-width: 700px) {
  .hud-user .hud-name { max-width: 90px; }
}
.est-note {
  font-size: 14px; color: var(--gold); background: #3d2a0011; border: 1px dashed #fbbf2444;
  padding: 10px 12px; border-radius: 8px; margin-top: 12px;
}
.footer { text-align: center; color: var(--muted); font-size: 14px; padding: 24px; }
.empty { text-align: center; padding: 48px; color: var(--muted); }
@media (max-width: 700px) {
  .secnav { top: 58px; }
  .filters .btn { width: 100%; }
}

/* 3D skin card viewer — contained, landscape */
.v3d {
  --v3d-h: 220px;
  background: radial-gradient(ellipse at 50% 60%, #eb4b4b33, transparent 55%), #0e0e12;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  margin-bottom: 16px;
}
@media (min-width: 820px) { .v3d { --v3d-h: 280px; } }
@media (min-width: 1100px) { .v3d { --v3d-h: 300px; } }
.v3d-stage {
  height: var(--v3d-h);
  width: 100%;
  perspective: 1100px;
  perspective-origin: 50% 45%;
  display: grid; place-items: center;
  touch-action: none; cursor: grab; user-select: none;
  overflow: hidden; /* hard clip — card never paints outside frame */
  clip-path: inset(0);
  border-radius: 10px;
  position: relative;
  isolation: isolate;
}
.v3d.dragging .v3d-stage, .v3d-stage:active { cursor: grabbing; }
.v3d-card {
  /* sized so projected AABB stays inside stage at all angles (+ overflow clip) */
  width: min(52%, 340px);
  max-width: 78%;
  aspect-ratio: 16 / 9;
  max-height: calc(var(--v3d-h) * 0.62);
  transform-style: preserve-3d;
  transform-origin: center center;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 16px 40px #000a, 0 0 28px #eb4b4b22;
  background: linear-gradient(160deg, #1c1c24, #101014);
  border: 1px solid #eb4b4b55;
  overflow: hidden;
  will-change: transform;
}
.v3d-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 4% 6%;
  background: transparent;
  border: 0;
}
.v3d-fallback { display: none !important; } /* never stack placeholder over a working image */
.v3d.no-image .v3d-fallback {
  display: grid !important; place-items: center; width: 100%; height: 100%;
  color: var(--muted); font-size: 14px; padding: 12px;
}
.v3d-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, #7f1d1d, #eb4b4b, #fca5a5);
  pointer-events: none;
}
.v3d-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.v3d-controls button {
  background: var(--surface2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer;
}
.v3d-controls button.on { border-color: var(--orange); color: var(--orange); }
.v3d-note { font-size: 13px; color: var(--muted); margin-top: 8px; }

.comp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.comp-table th, .comp-table td {
  text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.comp-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tier {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line);
}
.tier.exact { border-color: var(--green); color: var(--green2); }
.tier.scrape { border-color: var(--gold); color: var(--gold); }
.method details { margin-top: 10px; }
.method summary { cursor: pointer; font-weight: 700; color: var(--orange2); font-size: 16px; }
.method .block { margin-top: 12px; padding: 14px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--line); }
.method code { font-size: 13px; color: var(--cyan); word-break: break-word; }
.cash-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cash-grid { grid-template-columns: 1fr 1fr; } }
.cash-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.cash-card.liquid { border-color: #22c55e55; }
.cash-card.wallet { border-color: #60a5fa55; }
.table-scroll { overflow-x: auto; max-width: 100%; }

@media (max-width: 700px) {
  .logout-desktop { display: none !important; }
  .hud-actions .btn.compact { padding: 8px 10px; font-size: 13px; }
}
@media (min-width: 701px) {
  .hud-menu { display: none !important; }
}

/* ===== App shell: desktop sidebar + mobile bottom tabs ===== */
:root { --sidebar-w: 220px; --bottom-h: 64px; }
body.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
  background: #0e0e12; border-right: 1px solid var(--line);
  padding: 18px 12px; z-index: 80; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}
.app-sidebar .logo { font-size: 14px; margin-bottom: 12px; display: block; padding: 0 8px; }
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px; color: var(--muted); font-weight: 700; font-size: 15px;
}
.app-sidebar .nav-link:hover { background: var(--surface2); color: var(--text); }
.app-sidebar .nav-link.on { background: #f9731622; color: var(--orange2); border: 1px solid #f9731644; }
.app-sidebar .nav-ico { width: 22px; text-align: center; opacity: .9; }
.app-sidebar .side-foot { margin-top: auto; padding: 10px 8px; font-size: 12px; color: var(--muted); }
.app-main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; padding-bottom: 24px; }
.app-main .hud { left: var(--sidebar-w); right: 0; width: auto; }
.bottom-nav { display: none; }
.more-sheet {
  display: none; position: fixed; inset: 0; z-index: 200; background: #000a;
}
.more-sheet.open { display: block; }
.more-sheet .panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-radius: 16px 16px 0 0; padding: 16px;
  border-top: 1px solid var(--line);
}
.more-sheet a {
  display: block; padding: 14px; border-radius: 10px; color: var(--text); font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip-edit {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 12px; font-weight: 700; font-size: 14px; color: var(--text);
}
.chip-edit button { background: none; border: 0; color: var(--muted); cursor: pointer; margin-left: 6px; }
.provider-row {
  display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px; background: var(--surface2); cursor: grab;
}
.provider-row .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.provider-row.ok .status-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.provider-row.cool .status-dot { background: var(--gold); }
.provider-row.bad .status-dot { background: var(--red); }
.chat-box { display: flex; flex-direction: column; gap: 12px; max-height: 55vh; max-height: 55dvh; overflow-y: auto; padding: 8px; }
.bubble { padding: 12px 14px; border-radius: 12px; max-width: 90%; white-space: pre-wrap; }
.bubble.user { align-self: flex-end; background: #f9731633; border: 1px solid #f9731655; }
.bubble.assistant { align-self: flex-start; background: var(--surface2); border: 1px solid var(--line); }
.bubble .meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat-tile { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stat-tile .v { font-size: 28px; font-weight: 800; font-family: var(--display); }
.stat-tile .k { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.form-grid input, .form-grid select, .form-grid textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; color: var(--text);
  font-size: 16px; /* >=16px prevents iOS Safari input zoom */
}
.table-plain { width: 100%; border-collapse: collapse; }
.table-plain th, .table-plain td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.badge-est { font-size: 11px; color: var(--gold); border: 1px solid #fbbf2444; padding: 2px 6px; border-radius: 4px; }
.badge-real { font-size: 11px; color: var(--green2); border: 1px solid #22c55e44; padding: 2px 6px; border-radius: 4px; }

@media (max-width: 900px) {
  .app-sidebar { display: none; }
  .app-main {
    margin-left: 0;
    /* room for fixed bottom tab bar + home indicator */
    padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px) + 36px);
  }
  .app-main .hud {
    left: 0; right: 0; width: auto;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .app-main .hud .hud-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px));
    padding: 4px 4px env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: rgba(10,10,12,.96); border-top: 1px solid var(--line); z-index: 90;
    justify-content: space-around; align-items: stretch;
    /* backdrop for home indicator */
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }
  .bottom-nav a, .bottom-nav button {
    flex: 1; background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 11px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px; /* Apple HIG tap target */
    padding: 6px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a.on, .bottom-nav button.on { color: var(--orange2); }
  .bottom-nav .ico { font-size: 18px; line-height: 1; }
  .more-sheet .panel {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .table-scroll, .chip-row, .deal-grid { max-width: 100%; }
  input, select, textarea { font-size: 16px !important; }
  .footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
  }
  /* Scroll spacer so last content clears fixed tab bar */
  .app-main::after {
    content: "";
    display: block;
    height: 0;
  }
}


/* Status chips */
.chip-on { color: var(--green2); border-color: #22c55e55; background: #14532d44; }
.chip-off { color: var(--muted); border-color: var(--line); }
.chip-pct { font-variant-numeric: tabular-nums; }

.deal-card .chip-row { margin-top: 10px; }
.deal-card .btn.compact { font-size: 13px; padding: 8px 12px; }
.page-title:empty { display: none; }

.tg-ico { display: inline-block; margin-right: 4px; opacity: .9; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.app-main > .hud {
  box-sizing: border-box;
  margin: 0;
  /* keep padding-top from mobile safe-area rule; do not zero it */
}
.app-main > .hud .hud-inner {
  box-sizing: border-box;
}
.logout-desktop { flex-shrink: 0; }

/* ===== Shared offer card (Deals · Search · Scanner · Scout · Watch cart · Alerts) ===== */
.oc-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); }
.oc {
  --rc: #f97316; --gc: #22c55e; --p: 50;
  position: relative; display: flex; flex-direction: column; min-width: 0; container-type: inline-size;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 7%, var(--surface2)) 0%, var(--surface2) 38%);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px #0006; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.oc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--rc), transparent); z-index: 2; }
.oc:hover { border-color: color-mix(in srgb, var(--rc) 55%, var(--line)); transform: translateY(-2px); box-shadow: 0 16px 40px #0008, 0 0 0 1px color-mix(in srgb, var(--rc) 25%, transparent); }
.oc.is-gone { opacity: .62; filter: saturate(.4); }
.oc.is-gone:hover { transform: none; }

.oc-media {
  position: relative; display: grid; place-items: center; height: 178px; color: inherit;
  background:
    radial-gradient(ellipse 60% 70% at 50% 62%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #121218, #0c0c10);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.oc-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rc); box-shadow: 0 0 18px var(--rc); }
.oc-img { position: relative; z-index: 1; max-width: 86%; max-height: 164px; object-fit: contain; filter: drop-shadow(0 12px 18px #000c); transition: transform .25s; }
.oc:hover .oc-img { transform: scale(1.05) rotate(-2deg); }
.oc-fallback { display: none; text-align: center; color: color-mix(in srgb, var(--rc) 70%, #fff); }
.oc-media.no-img .oc-fallback, .oc-media:not(:has(.oc-img)) .oc-fallback { display: grid; gap: 2px; place-items: center; }
.oc-fallback span { font-family: var(--display); font-weight: 800; font-size: 46px; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 24px var(--rc); }
.oc-fallback small { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oc-state {
  position: absolute; z-index: 3; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 999px; background: #04222a; color: var(--cyan); border: 1px solid #22d3ee66;
}
.oc-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: ocPulse 1.6s infinite; }
.oc-state em { font-family: var(--font); font-style: normal; font-weight: 700; letter-spacing: .02em; color: #a5f3fc; opacity: .85; }
.oc-state.new { background: #052e16; color: var(--green2); border-color: #4ade8077; }
.oc-state.new em { color: #bbf7d0; }
.oc-state.gone { background: #2a0d0d; color: #fca5a5; border-color: #ef444466; }
@keyframes ocPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .oc-state i { animation: none; } .oc, .oc-img { transition: none; } }
.oc-grade {
  position: absolute; z-index: 3; top: 10px; right: 10px; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: conic-gradient(var(--gc) calc(var(--p) * 1%), #ffffff18 0);
  box-shadow: 0 0 20px color-mix(in srgb, var(--gc) 40%, transparent);
}
.oc-grade::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0d0d12; }
.oc-grade b, .oc-grade small { position: relative; line-height: 1; }
.oc-grade b { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--gc); }
.oc-grade small { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.oc-rarity {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rc) 75%, #fff); background: #000a; border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
  padding: 3px 9px; border-radius: 6px;
}
.oc-demo { position: absolute; z-index: 3; right: 12px; bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: #3d2a00cc; border: 1px solid #fbbf2455; padding: 3px 8px; border-radius: 6px; }

.oc-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; flex: 1; min-width: 0; }
.oc-weapon { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oc-title { display: block; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.oc-title:hover { color: var(--orange2); }
.oc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oc-tag { font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.oc-tag.wear { color: var(--gold); border-color: #fbbf2444; }
.oc-tag.st { color: #fb923c; border-color: #f9731666; background: #f9731614; }
.oc-tag.sv { color: #fde68a; border-color: #facc1566; background: #facc1512; }
.oc-tag.phase { color: #e9d5ff; border-color: #a855f766; background: #a855f71a; }
.oc-tag.lock { color: #fca5a5; border-color: #ef444455; }
.oc-tag.rate { color: var(--gc); border-color: color-mix(in srgb, var(--gc) 45%, transparent); background: color-mix(in srgb, var(--gc) 10%, transparent); }

.oc-wear-bar { position: relative; height: 10px; border-radius: 5px; background: #24242c; margin-top: 4px; }
.oc-wear-bar .seg { position: absolute; top: 0; bottom: 0; opacity: .35; }
.oc-wear-bar .seg.on { opacity: 1; }
.oc-wear-bar .s-fn { background: #22c55e; border-radius: 5px 0 0 5px; }
.oc-wear-bar .s-mw { background: #84cc16; }
.oc-wear-bar .s-ft { background: #eab308; }
.oc-wear-bar .s-ww { background: #f97316; }
.oc-wear-bar .s-bs { background: #ef4444; border-radius: 0 5px 5px 0; }
.oc-wear-bar .mk { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px #0d0d12, 0 0 10px #fff9; }
.oc-wear-label { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.oc-wear-label b { color: var(--text); font-variant-numeric: tabular-nums; }

.oc-stickers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stk { position: relative; width: 46px; height: 46px; border-radius: 10px; background: #0d0d12; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.stk img { position: relative; z-index: 1; width: 40px; height: 40px; object-fit: contain; }
.stk i { position: absolute; font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.stk small { position: absolute; z-index: 2; right: 0; bottom: 0; font-size: 10px; font-weight: 800; padding: 0 4px; border-radius: 6px 0 0 0; background: #000c; color: var(--green2); }
.stk.scraped small { color: var(--gold); }
.stk.scraped img { opacity: .72; }
.stk-total { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.stk-total b { font-family: var(--display); font-size: 16px; color: var(--cyan); letter-spacing: 0; }

.oc-desc { font-size: 16px; line-height: 1.45; color: #d4d4dc; padding: 10px 12px; border-left: 3px solid var(--rc); background: #ffffff06; border-radius: 0 8px 8px 0; }

.oc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oc-metrics .m { min-width: 0; display: flex; flex-direction: column; gap: 2px; background: #0e0e13; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.oc-metrics .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc .nw { white-space: nowrap; }
.oc-metrics .v { font-family: var(--display); font-size: clamp(16px, 5.9cqi, 25px); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-metrics .v.dim { color: var(--muted); }
.oc-metrics .s { font-size: 13px; color: var(--muted); line-height: 1.35; }
.oc-metrics .s b { color: var(--text); }
.oc-metrics .m.up { border-color: #22c55e55; background: linear-gradient(160deg, #14532d40, #0e0e13 70%); }
.oc-metrics .m.up .v { color: var(--green2); }
.oc-metrics .m.down { border-color: #ef444455; background: linear-gradient(160deg, #7f1d1d33, #0e0e13 70%); }
.oc-metrics .m.down .v { color: #f87171; }
.oc-metrics .m.hero .v { font-size: clamp(17px, 6.3cqi, 28px); text-shadow: 0 0 18px #22c55e44; }
.oc-metrics .m.hero.down .v { text-shadow: none; }

.oc-meta, .oc-extra { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-pill.src { font-weight: 600; }
.oc-pill.hl { color: var(--orange2); border-color: #f9731655; }
.oc-pill.conf-high { color: var(--green2); border-color: #22c55e55; }
.oc-pill.conf-medium { color: var(--gold); border-color: #fbbf2455; }
.oc-pill.conf-low { color: #f87171; border-color: #ef444455; }
.oc-pill .badge-est { padding: 0 4px; font-size: 10px; }
.oc-reasons { width: 100%; font-size: 14px; color: var(--muted); }

.oc-more summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--orange2); list-style: none; }
.oc-more summary::-webkit-details-marker { display: none; }
.oc-more summary::before { content: "▸ "; }
.oc-more[open] summary::before { content: "▾ "; }
.oc-rows { margin-top: 8px; display: grid; }
.oc-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.oc-rows > div span { color: var(--muted); min-width: 0; }
.oc-rows > div b { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-rows > div.tot b { font-size: 15px; }

.oc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 2px; }
.oc-actions form { display: contents; }
.oc-actions .btn.compact { font-size: 14px; padding: 10px 14px; }

@media (max-width: 700px) {
  .oc-grid { gap: 14px; }
  .oc-media { height: 136px; }
  .oc-img { max-height: 118px; }
  .oc-grade { width: 56px; height: 56px; }
  .oc-body { padding: 14px 14px 16px; gap: 12px; }
  .oc-title { font-size: 20px; }
  .oc-desc { font-size: 15px; }
  .oc-metrics { gap: 8px; }
  .oc-metrics .m { padding: 10px; }
  .oc-metrics .k { font-size: 11px; letter-spacing: .04em; }
  .oc-actions .btn.compact { flex: 1 1 auto; text-align: center; min-height: 44px; }
}

/* ===== Listing sizes: L (full card) · M (compact card) · S (dense rows) ===== */
.oc-metrics .s .s1, .oc-metrics .s .s2 { display: block; }
.list-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.list-head h2 { margin: 0; }
.list-head .list-note { color: var(--muted); font-size: 15px; }
.list-head .size-toggle { margin-left: auto; }
.size-toggle {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; flex: 0 0 auto;
  background: #0e0e13; border: 1px solid var(--line);
}
.size-toggle button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .08em;
}
.size-toggle button svg { width: 15px; height: 15px; fill: currentColor; opacity: .9; }
.size-toggle button:hover { color: var(--text); }
.size-toggle button.on { color: #fff; background: var(--grad); box-shadow: 0 4px 16px #f9731644; }
@media (max-width: 700px) { .size-toggle button { min-height: 40px; padding: 6px 11px; } }

/* rows are only used in S */
.oc-row, .oc-rowhead { display: none; }

/* ---- Medium ---- */
.oc-grid.size-m { grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 14px; }
.size-m .oc { border-radius: 14px; }
.size-m .oc-media { height: 118px; }
.size-m .oc-img { max-height: 102px; max-width: 80%; }
.size-m .oc-grade { width: 48px; height: 48px; top: 8px; right: 8px; }
.size-m .oc-grade::before { inset: 4px; }
.size-m .oc-grade b { font-size: 16px; }
.size-m .oc-grade small { font-size: 10px; }
.size-m .oc-state { top: 9px; left: 9px; font-size: 10px; padding: 4px 8px; }
.size-m .oc-state em { display: none; }
.size-m .oc-rarity { left: 9px; bottom: 9px; font-size: 10px; padding: 2px 7px; }
.size-m .oc-demo { right: 9px; bottom: 9px; font-size: 10px; padding: 2px 6px; }
.size-m .oc-body { padding: 12px 12px 14px; gap: 10px; }
.size-m .oc-weapon { font-size: 11px; }
.size-m .oc-title { font-size: 17px; }
.size-m .oc-tags { margin-top: 6px; gap: 4px; }
.size-m .oc-tag { font-size: 12px; padding: 2px 7px; }
.size-m .oc-tag.rate { display: none; }
.size-m .oc-metrics { gap: 6px; }
.size-m .oc-metrics .m { padding: 8px 9px; border-radius: 10px; }
.size-m .oc-metrics .k { font-size: 10px; letter-spacing: .05em; }
.size-m .oc-metrics .v { font-size: clamp(15px, 6.4cqi, 21px); }
.size-m .oc-metrics .m.hero .v { font-size: clamp(16px, 6.8cqi, 22px); }
.size-m .oc-metrics .s { font-size: 12px; }
.size-m .oc-metrics .s .s1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-m .oc-metrics .s .s2 { display: none; }
.size-m .oc-wear-bar { height: 6px; }
.size-m .oc-wear-bar .mk { top: -4px; height: 14px; width: 3px; }
.size-m .oc-wear-label { font-size: 12px; margin-top: 5px; }
.size-m .oc-stickers { gap: 5px; }
.size-m .stk { width: 32px; height: 32px; border-radius: 7px; }
.size-m .stk img { width: 28px; height: 28px; }
.size-m .stk i { font-size: 10px; }
.size-m .stk small { font-size: 9px; padding: 0 3px; }
.size-m .stk-total { font-size: 11px; }
.size-m .stk-total b { font-size: 14px; }
.size-m .stk-total .badge-est { display: none; }
.size-m .oc-desc { font-size: 14px; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-m .oc-meta, .size-m .oc-more, .size-m .oc-reasons { display: none; }
.size-m .oc-extra .oc-pill { font-size: 12px; padding: 3px 8px; }
.size-m .oc-actions { gap: 6px; }
.size-m .oc-actions .btn.compact { font-size: 13px; padding: 8px 10px; min-height: 38px; flex: 1 1 auto; text-align: center; }
.size-m .oc-actions .oc-cart { flex: 0 0 auto; }

/* ---- Small: dense rows ---- */
.oc-grid.size-s { grid-template-columns: 1fr; gap: 6px; }
.size-s .oc { border-radius: 12px; box-shadow: none; }
.size-s .oc:hover { transform: none; }
.size-s .oc::before { display: none; }
.size-s .oc > .oc-media, .size-s .oc > .oc-body { display: none; }
.size-s .oc.open > .oc-body { display: flex; border-top: 1px solid var(--line); }
.size-s .oc { border-left: 3px solid var(--rc); }
.size-s .oc-row, .size-s .oc-rowhead {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) 54px 92px 92px 128px 116px 12px 146px;
}
.size-s .r-act { justify-content: flex-end; }
.size-s .oc-rowhead { padding: 0 14px 4px 17px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.size-s .oc-row { padding: 8px 14px; cursor: pointer; min-height: 64px; }
.size-s .oc-row:hover { background: #ffffff05; }
.size-s .oc-row:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.r-thumb { position: relative; width: 52px; height: 40px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%), #0c0c10; }
.r-thumb img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; }
.r-thumb:has(img) i { display: none; }
.r-thumb i { position: absolute; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 13px; color: color-mix(in srgb, var(--rc) 70%, #fff); }
.r-name { min-width: 0; display: grid; gap: 2px; }
.r-name b { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-sub { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.r-sub em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 6px; border-radius: 5px; border: 1px solid var(--line); white-space: nowrap; }
.r-sub em.st { color: #fb923c; border-color: #f9731655; }
.r-sub em.sv { color: #fde68a; }
.r-sub em.phase { color: #e9d5ff; border-color: #a855f755; }
.r-sub em.lock { color: #fca5a5; border-color: #ef444444; }
.r-sub em.demo { color: var(--gold); border-color: #fbbf2444; }
.r-sub em.r-state.live { color: var(--cyan); border-color: #22d3ee55; }
.r-sub em.r-state.new { color: var(--green2); border-color: #4ade8066; }
.r-sub em.r-state.gone { color: #fca5a5; border-color: #ef444455; }
.r-sub em.r-state.owned { color: var(--cyan); border-color: #22d3ee44; }
.r-sub em.r-float { font-variant-numeric: tabular-nums; }
.r-grade { justify-self: start; display: inline-grid; place-items: center; min-width: 48px; padding: 3px 6px; border-radius: 9px; line-height: 1.05;
  font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--gc);
  border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); background: color-mix(in srgb, var(--gc) 12%, transparent); }
.r-grade small { font-family: var(--font); font-size: 11px; color: var(--muted); font-weight: 700; }
.r-m { display: grid; min-width: 0; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-m small { display: none; font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.r-m em { font-style: normal; font-family: var(--font); font-size: 12px; font-weight: 700; color: inherit; opacity: .85; }
.r-m.up { color: var(--green2); }
.r-m.down { color: #f87171; }
.r-conf { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.r-conf.conf-high { background: var(--green); box-shadow: 0 0 8px var(--green); }
.r-conf.conf-medium { background: var(--gold); }
.r-conf.conf-low { background: var(--red); }
.r-act { display: inline-flex; align-items: center; gap: 4px; }
.r-btn { display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 7px; border-radius: 8px; font-size: 12px; font-weight: 800;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.r-btn:hover { border-color: var(--orange); color: var(--orange2); }
.r-caret { color: var(--muted); font-size: 14px; width: 16px; text-align: center; transition: transform .15s; }
.oc.open .r-caret { transform: rotate(180deg); }

@media (max-width: 1180px) {
  .size-s .oc-row, .size-s .oc-rowhead { grid-template-columns: 48px minmax(0, 1fr) 50px 80px 80px 112px 100px 10px 104px; gap: 10px; }
  .r-btn[title="Open on Steam Market"] { display: none; }
}
/* phone / narrow: 2-line rows, actions live in the expanded card */
@media (max-width: 760px) {
  .size-s .oc-rowhead { display: none; }
  .size-s .oc-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "thumb name grade" "metrics metrics metrics";
    column-gap: 10px; row-gap: 6px; padding: 9px 10px; min-height: 0;
  }
  .size-s .r-thumb { grid-area: thumb; width: 44px; height: 44px; align-self: center; }
  .size-s .r-name { grid-area: name; }
  .size-s .r-name b { font-size: 15px; }
  .size-s .r-grade { grid-area: grade; justify-self: end; min-width: 0; display: inline-flex; gap: 4px; align-items: baseline; font-size: 14px; padding: 2px 7px; }
  .size-s .r-m, .size-s .r-conf, .size-s .r-act { grid-area: auto; }
  .size-s .oc-row > .r-m, .size-s .oc-row > .r-conf, .size-s .oc-row > .r-act { display: none; }
  .size-s .oc-row { position: relative; }
  .size-s .r-mline { grid-area: metrics; }
}
.r-mline { display: none; }
@media (max-width: 760px) {
  .size-s .r-mline { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; min-width: 0;
    padding-top: 6px; border-top: 1px solid #ffffff0d;
    font-family: var(--display); font-weight: 800; font-size: 13.5px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .size-s .r-mline > span { display: grid; min-width: 0; }
  .size-s .r-mline small { font-family: var(--font); font-weight: 800; color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
  .size-s .r-mline small em { font-style: normal; color: inherit; }
  .size-s .r-mline .up { color: var(--green2); }
  .size-s .r-mline .down { color: #f87171; }
  .size-s .r-grade .r-conf { display: inline-block; width: 8px; height: 8px; margin-left: 2px; align-self: center; }
  .size-s .r-sub em:nth-child(n+5) { display: none; }
  .list-head .list-note { font-size: 13px; flex-basis: 100%; order: 3; margin-top: -6px; }
  .list-head { row-gap: 8px; }
}
.r-grade .r-conf { display: none; }
/* verdict ring (inventory) – words instead of grades */
.oc-grade.verdict b { font-size: 14px; letter-spacing: .02em; }
.size-m .oc-grade.verdict b { font-size: 10.5px; letter-spacing: 0; }
.size-m .oc-grade.verdict small { font-size: 9px; }
.r-grade.verdict-g { font-size: 13px; }
.size-m .oc-fallback span { font-size: 40px; }
.size-m .oc-fallback small { font-size: 10px; }
/* phone: Medium stays one column but much shorter than Large */
@media (max-width: 560px) {
  .size-m .oc-media { height: 92px; }
  .size-m .oc-img { max-height: 80px; }
  .size-m .oc-grade { width: 44px; height: 44px; }
  .size-m .oc-body { padding: 10px 12px 12px; gap: 9px; }
  .size-m .oc-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .size-m .oc-title { font-size: 18px; }
  .size-m .oc-metrics .m { padding: 7px 9px; }
  .size-m .oc-metrics .s { display: none; }
  .size-m .oc-metrics .v { font-size: 19px; }
  .size-m .oc-metrics .m.hero .v { font-size: 20px; }
  .size-m .oc-actions .oc-cart { display: none; }
}

/* ---------- CSFloat / multi-market additions ---------- */
:root { --mkt-csfloat: #3b82f6; --mkt-csfloat2: #93c5fd; --mkt-skinport: #f97316; --mkt-steam: #94a3b8; }
.oc-mkt {
  position: absolute; z-index: 3; top: 44px; left: 12px; font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: #000b; color: var(--muted); border: 1px solid var(--line);
}
.oc-mkt.csfloat { color: var(--mkt-csfloat2); background: #0b1a33e6; border-color: #3b82f688; box-shadow: 0 0 12px #3b82f633; }
.oc-mkt.skinport { color: #fdba74; border-color: #f9731655; }
.size-m .oc-mkt { top: 36px; left: 9px; font-size: 10px; padding: 2px 7px; }
.oc-state.sellnow { background: #052e16; color: var(--green2); border-color: #4ade8099; box-shadow: 0 0 14px #22c55e44; }
.r-sub em.mkt.csfloat { color: var(--mkt-csfloat2); border-color: #3b82f677; background: #0b1a33; }
.r-sub em.r-state.sellnow { color: var(--green2); border-color: #4ade8066; }
.btn.mkt-csfloat, .btn.ghost.mkt-csfloat { border-color: #3b82f699; color: var(--mkt-csfloat2); }
.btn.mkt-csfloat:not(.ghost) { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; border-color: transparent; }
.btn.ghost.mkt-csfloat:hover, .btn.mkt-csfloat-ghost:hover { border-color: var(--mkt-csfloat); color: #dbeafe; }
.btn.mkt-csfloat-ghost { border-color: #3b82f666; color: var(--mkt-csfloat2); }
.r-btn.mkt-csfloat { color: var(--mkt-csfloat2); border-color: #3b82f677; }
.size-m .oc-aux { display: none; }
.oc-pill.hl.exit { color: var(--mkt-csfloat2); }
/* Why now (sell timing) */
.oc-why { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #ffffff05; font-size: 14px; }
.oc-why summary { cursor: pointer; font-weight: 700; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; list-style: none; }
.oc-why summary::-webkit-details-marker { display: none; }
.oc-why summary b { margin-left: auto; font-family: var(--display); }
.oc-why.go { border-color: #4ade8077; background: linear-gradient(135deg, #052e1699, #0d0d12); }
.oc-why.go summary { color: var(--green2); }
.oc-why p { margin: 8px 0 6px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.oc-why ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 3px; }
.oc-why li { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.oc-why li.ok { color: #bbf7d0; }
.oc-why li.no { color: #fca5a5aa; }
.oc-why .btn { margin-top: 4px; }
.size-m .oc-why { font-size: 13px; padding: 6px 10px; }
/* Analysis: market comparison */
.tag.mkt-tag.mkt-csfloat { color: var(--mkt-csfloat2); border-color: #3b82f688; background: #0b1a33; }
.tag.mkt-tag.mkt-skinport { color: #fdba74; border-color: #f9731666; }
.mc-best { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mc-best .kpi { min-width: 0; }
.mc-best .kpi .muted { overflow-wrap: anywhere; }
.mc-table td, .mc-table th { vertical-align: top; }
.mc-table tr.is-best td { background: #3b82f60d; }
.mc-table tr.is-outlier td { background: #fbbf240d; }
.mc-table tr.mc-sub td { font-size: 13px; padding-top: 0; border-top: 0; }
.mkt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--muted); vertical-align: middle; }
.mkt-dot.mkt-csfloat { background: var(--mkt-csfloat); box-shadow: 0 0 8px #3b82f6aa; }
.mkt-dot.mkt-skinport { background: var(--mkt-skinport); }
.mkt-dot.mkt-steam { background: var(--mkt-steam); }
.mc-cal { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }
.mc-cal li { overflow-wrap: anywhere; }
.card.flash { border-color: #22d3ee55; color: var(--cyan); }
@media (max-width: 720px) {
  .mc-best { grid-template-columns: 1fr; }
}
/* secnav sits directly in .app-main (no padding) → the negative side margins caused a 20px horizontal scroll */
.app-main > .secnav { margin-left: 0; margin-right: 0; }

/* ---------- DMarket / LIS-SKINS ---------- */
:root { --mkt-dmarket: #10b981; --mkt-dmarket2: #6ee7b7; --mkt-lisskins: #8b5cf6; --mkt-lisskins2: #c4b5fd; }
.oc-mkt.dmarket { color: var(--mkt-dmarket2); background: #022c22e6; border-color: #10b98188; box-shadow: 0 0 12px #10b98133; }
.oc-mkt.lisskins { color: var(--mkt-lisskins2); background: #1e1338e6; border-color: #8b5cf688; box-shadow: 0 0 12px #8b5cf633; }
.r-sub em.mkt.dmarket { color: var(--mkt-dmarket2); border-color: #10b98177; background: #022c22; }
.r-sub em.mkt.lisskins { color: var(--mkt-lisskins2); border-color: #8b5cf677; background: #1e1338; }
.r-sub em.mkt.steam { color: #cbd5e1; border-color: #94a3b866; }
.r-sub em.mkt.skinport { color: #fdba74; border-color: #f9731666; }
.btn.mkt-dmarket, .btn.ghost.mkt-dmarket { border-color: #10b98199; color: var(--mkt-dmarket2); }
.btn.mkt-dmarket:not(.ghost) { background: linear-gradient(135deg, #059669, #10b981); color: #fff; border-color: transparent; }
.btn.ghost.mkt-dmarket:hover { border-color: var(--mkt-dmarket); color: #d1fae5; }
.btn.mkt-lisskins, .btn.ghost.mkt-lisskins { border-color: #8b5cf699; color: var(--mkt-lisskins2); }
.btn.mkt-lisskins:not(.ghost) { background: linear-gradient(135deg, #7c3aed, #8b5cf6); color: #fff; border-color: transparent; }
.btn.ghost.mkt-lisskins:hover { border-color: var(--mkt-lisskins); color: #ede9fe; }
.r-btn.mkt-dmarket { color: var(--mkt-dmarket2); border-color: #10b98177; }
.r-btn.mkt-lisskins { color: var(--mkt-lisskins2); border-color: #8b5cf677; }
.tag.mkt-tag.mkt-dmarket { color: var(--mkt-dmarket2); border-color: #10b98188; background: #022c22; }
.tag.mkt-tag.mkt-lisskins { color: var(--mkt-lisskins2); border-color: #8b5cf688; background: #1e1338; }
.tag.mkt-tag.mkt-steam { color: #cbd5e1; border-color: #94a3b866; }
.oc-buyapi { font-weight: 800; }
.size-s .oc-buyapi { display: none; }
/* Buy confirmation dialog */
.buy-dlg { border: 1px solid var(--line); border-radius: 14px; background: #0d0d12; color: var(--text); padding: 0; width: min(520px, 94vw); box-shadow: 0 20px 60px #000c; }
.buy-dlg::backdrop { background: #000a; backdrop-filter: blur(3px); }
.buy-dlg .bd-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.buy-dlg .bd-head img { width: 72px; height: 54px; object-fit: contain; }
.buy-dlg .bd-head h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.buy-dlg .bd-body { padding: 14px 18px; display: grid; gap: 8px; font-size: 14px; }
.buy-dlg .bd-row { display: flex; justify-content: space-between; gap: 12px; }
.buy-dlg .bd-row span { color: var(--muted); }
.buy-dlg .bd-row b { text-align: right; overflow-wrap: anywhere; }
.buy-dlg .bd-warn { border: 1px solid #fbbf2466; background: #fbbf2410; color: #fde68a; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.buy-dlg .bd-err { border: 1px solid #f8717166; background: #f8717110; color: #fecaca; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.buy-dlg .bd-ok { border: 1px solid #4ade8066; background: #22c55e12; color: #bbf7d0; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.buy-dlg .bd-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.buy-dlg .bd-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
/* Inventory portal filter */
.portal-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.portal-filter a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; background: #ffffff05; }
.portal-filter a b { font-family: var(--display); margin-left: 6px; color: var(--text); }
.portal-filter a.on { color: #fff; border-color: var(--accent, #f97316); box-shadow: 0 0 10px #f9731633; }
.portal-filter a.p-dmarket.on { border-color: var(--mkt-dmarket); box-shadow: 0 0 10px #10b98133; }
.portal-filter a.p-lisskins.on { border-color: var(--mkt-lisskins); box-shadow: 0 0 10px #8b5cf633; }
.portal-filter a.p-csfloat.on { border-color: var(--mkt-csfloat); box-shadow: 0 0 10px #3b82f633; }
.portal-filter a.empty { opacity: .55; }
/* Settings: Accounts / Connections */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.conn-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #ffffff04; display: grid; gap: 8px; min-width: 0; }
.conn-card header { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.conn-card header b { font-size: 16px; }
.conn-state { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--line); }
.conn-state.connected { color: var(--green2, #4ade80); border-color: #4ade8077; background: #052e16; }
.conn-state.public { color: #93c5fd; border-color: #3b82f677; background: #0b1a33; }
.conn-state.partial { color: #fde68a; border-color: #fbbf2477; background: #2a1f05; }
.conn-state.missing { color: var(--muted); }
.conn-state.error { color: #fecaca; border-color: #f8717177; background: #2a0b0b; }
.conn-card .muted { font-size: 12.5px; overflow-wrap: anywhere; }
.conn-card label { display: grid; gap: 3px; font-size: 13px; }
.conn-card .conn-test { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-card .conn-test output { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.mkt-dot.mkt-dmarket { background: var(--mkt-dmarket); box-shadow: 0 0 8px #10b981aa; }
.mkt-dot.mkt-lisskins { background: var(--mkt-lisskins); box-shadow: 0 0 8px #8b5cf6aa; }

/* ---------- Waxpeer (rose accent, same treatment as the other markets) ---------- */
:root { --mkt-waxpeer: #f43f5e; --mkt-waxpeer2: #fda4af; }
.oc-mkt.waxpeer { color: var(--mkt-waxpeer2); background: #2a0d15e6; border-color: #f43f5e88; box-shadow: 0 0 12px #f43f5e33; }
.r-sub em.mkt.waxpeer { color: var(--mkt-waxpeer2); border-color: #f43f5e77; background: #2a0d15; }
.btn.mkt-waxpeer, .btn.ghost.mkt-waxpeer { border-color: #f43f5e99; color: var(--mkt-waxpeer2); }
.btn.mkt-waxpeer:not(.ghost) { background: linear-gradient(135deg, #e11d48, #f43f5e); color: #fff; border-color: transparent; }
.btn.ghost.mkt-waxpeer:hover { border-color: var(--mkt-waxpeer); color: #ffe4e6; }
.r-btn.mkt-waxpeer { color: var(--mkt-waxpeer2); border-color: #f43f5e77; }
.tag.mkt-tag.mkt-waxpeer { color: var(--mkt-waxpeer2); border-color: #f43f5e88; background: #2a0d15; }
.portal-filter a.p-waxpeer.on { border-color: var(--mkt-waxpeer); box-shadow: 0 0 10px #f43f5e33; }
.mkt-dot.mkt-waxpeer { background: var(--mkt-waxpeer); box-shadow: 0 0 8px #f43f5eaa; }

/* ---- Where to sell (best exit incl. Steam) ---- */
.oc-sellx{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:8px 0 2px;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(34,197,94,.06);font-size:12px}
.oc-sellx .sx-k{text-transform:uppercase;letter-spacing:.06em;font-size:10px;color:var(--muted,#9ca3af)}
.oc-sellx .sx-best{color:#4ade80;font-weight:700}
.oc-sellx .sx-best.dim{color:var(--muted,#9ca3af);font-weight:500}
.oc-sellx .sx-list{display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--muted,#cbd5e1)}
.oc-sellx .sx small{margin-left:2px;font-size:9px;opacity:.75;text-transform:uppercase}
.oc-sellx .sx.na{opacity:.45}
.oc-sellx .sx.steam{color:#93c5fd}
.size-m .oc-sellx .sx-list{font-size:11px}
.r-sub em.r-sell{color:#4ade80;border-color:rgba(74,222,128,.35)}
.sell-table{width:100%;border-collapse:collapse;font-size:13px}
.sell-table th,.sell-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:top}
.sell-table td.num,.sell-table th.num{text-align:right;white-space:nowrap}
.sell-table tr.best td{background:rgba(34,197,94,.10)}
.sell-table tr.best td:first-child{box-shadow:inset 3px 0 0 #22c55e}
.sell-table tr.na td{opacity:.5}
.sell-table .why{font-size:11px;color:var(--muted,#9ca3af)}

/* ---- Trade Journal & Statistics */
.jr-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.jr-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jr-src { border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; font-size: 12.5px; color: var(--muted); background: #ffffff05; max-width: 100%; }
.jr-src b { color: var(--text); margin-right: 6px; }
.jr-src.ok { border-color: #10b98166; } .jr-src.skip { border-style: dashed; } .jr-src.never { opacity: .7; }
.jr-stats { margin-top: 10px; }
.jr-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.jr-stats .stat-tile .v { font-size: clamp(19px, 1.9vw, 24px); white-space: nowrap; }
.jr-stats .stat-tile .s { color: var(--muted); font-size: 12px; margin-top: 4px; }
.jr-stats .stat-tile.big { grid-column: span 2; }
.jr-stats .stat-tile.big .v { font-size: 34px; }
.stat-tile.pos .v, .journal .pos { color: #34d399; }
.stat-tile.neg .v, .journal .neg { color: #f87171; }
.journal .dim { color: var(--muted); }
.jr-break { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; }
@media (max-width: 900px) { .jr-break { grid-template-columns: 1fr; } .jr-stats .stat-tile.big { grid-column: span 1; } }
.jr-mkt tr.tot td { font-weight: 800; border-top: 1px solid var(--line); }
.jr-mkt tr.dim td { opacity: .5; }
.jr-acc { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.jr-acc .chip.ok { border-color: #10b98166; } .jr-acc .chip.warn { border-color: #f59e0b88; }
.jr-side { margin-top: -4px; }
.jr-table td { vertical-align: middle; }
.jr-table small { display: block; color: var(--muted); font-size: 11.5px; }
.jr-item { display: flex; gap: 8px; align-items: center; min-width: 220px; }
.jr-item img { width: 52px; height: 39px; object-fit: contain; border-radius: 6px; background: #ffffff08; }
.jr-item .tag { font-style: normal; color: var(--accent, #f97316); }
.journal .side { font-weight: 800; font-size: 11.5px; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; }
.journal .side.buy { background: #3b82f622; color: #93c5fd; } .journal .side.sell { background: #10b98122; color: #6ee7b7; }
.journal .st { text-transform: capitalize; }
.journal tr.st-reversed td { opacity: .55; text-decoration: line-through; }
.journal tr.st-pending td { opacity: .8; }
.journal .mk { font-weight: 700; }
.journal .nowrap { white-space: nowrap; }
.journal .small { font-size: 12.5px; }
.journal .mk.mkt-csfloat { color: var(--mkt-csfloat2, #60a5fa); } .journal .mk.mkt-dmarket { color: var(--mkt-dmarket, #10b981); }
.journal .mk.mkt-lisskins { color: var(--mkt-lisskins, #8b5cf6); } .journal .mk.mkt-waxpeer { color: var(--mkt-waxpeer, #f43f5e); }
.journal .mk.mkt-skinport { color: #fbbf24; } .journal .mk.mkt-steam { color: #93c5fd; }

/* ---- Compare tab */
.cmp-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cmp-pick input { flex: 1 1 260px; }
.cmp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.cmp-pick-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-decoration: none; color: var(--text); background: #ffffff05; }
.cmp-pick-row:hover { border-color: var(--accent, #f97316); }
.cmp-pick-row img { width: 56px; height: 42px; object-fit: contain; }
.cmp-pick-row span { flex: 1; min-width: 0; } .cmp-pick-row small { display: block; color: var(--muted); }
.cmp-pick-row em { font-style: normal; font-weight: 800; color: var(--accent, #f97316); white-space: nowrap; }
.cmp-verdict .cmp-vtext { font-size: 17px; font-weight: 700; }
.cmp-badge.overall { border-color: var(--accent, #f97316); color: #fff; }
.cmp-table { min-width: 560px; }
.cmp-table th, .cmp-table td { vertical-align: top; }
.cmp-table tbody th { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cmp-table thead th.cmp-col { position: relative; text-align: left; min-width: 180px; padding-right: 26px; }
.cmp-table thead th.cmp-col.overall { box-shadow: inset 0 3px 0 var(--accent, #f97316); }
.cmp-table thead img { width: 120px; height: 90px; object-fit: contain; display: block; }
.cmp-name { font-weight: 800; margin: 4px 0; } .cmp-name a { color: var(--text); }
.cmp-sub { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cmp-sub .tag.owned { color: #6ee7b7; }
.cmp-x { position: absolute; top: 6px; right: 6px; color: var(--muted); text-decoration: none; }
.cmp-table td small, .cmp-table th small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.cmp-table td.win { color: #34d399; font-weight: 800; background: #10b98112; }
.cmp-table tr.hl td { font-size: 15.5px; }
.cmp-table tr.grp th { color: var(--text); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; padding-top: 14px; border-bottom: 1px solid var(--line); }
.compare .dim { color: var(--muted); }
.compare .rec { display: inline-block; font-weight: 800; font-size: 11.5px; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: #ffffff10; }
.compare .rec-buy, .compare .rec-prefer { background: #10b98126; color: #6ee7b7; } .compare .rec-prefer { box-shadow: 0 0 0 1px #10b98188; }
.compare .rec-skip { background: #ef444426; color: #fca5a5; } .compare .rec-watch { background: #f59e0b26; color: #fcd34d; }
.compare .rec-hold { background: #3b82f626; color: #93c5fd; } .compare .rec-sell { background: #f9731626; color: #fdba74; }
.ai-note ul { margin: 6px 0 0 16px; padding: 0; font-size: 12.5px; } .ai-note li { margin: 3px 0; }
.cmp-table tbody th, .cmp-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface, #12131a); }
@media (max-width: 640px) {
  .cmp-table { min-width: 0; }
  .cmp-table tbody th { white-space: normal; min-width: 92px; max-width: 110px; font-size: 12.5px; }
  .cmp-table thead th.cmp-col { min-width: 140px; }
  .cmp-table thead img { width: 84px; height: 63px; }
  .jr-item { min-width: 180px; }
}

/* Real sold prices — compact Ask vs Sold + sales tables */
.sales-h { margin: 16px 0 8px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--orange2); }
.sales-table td, .sales-table th { font-size: 13.5px; }
.r-avs { color: var(--cyan, #22d3ee); }

/* Time to profit — sits under the Deal Score badge; does not change the card grid */
.oc-ttp {
  position: absolute; z-index: 3; top: 76px; right: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; line-height: 1.15;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; text-align: center;
  background: #0d0d12e6; color: var(--cyan); border: 1px solid #22d3ee55;
  max-width: 76px;
}
.size-m .oc-ttp { top: 58px; right: 8px; font-size: 9px; padding: 1px 6px; max-width: 68px; }
.oc-ttp.ttp-instant { color: var(--green2); border-color: #4ade8066; }
.oc-ttp.ttp-soon { color: var(--cyan); }
.oc-ttp.ttp-mid { color: var(--gold); border-color: #fbbf2455; }
.oc-ttp.ttp-unlikely { color: #fca5a5; border-color: #ef444455; }
.r-grade em.r-ttp {
  font-style: normal; font-family: var(--font); font-size: 9px; font-weight: 800;
  letter-spacing: .02em; color: var(--cyan); line-height: 1; margin-top: 1px; white-space: nowrap;
}
.r-grade em.r-ttp.ttp-instant { color: var(--green2); }
.r-grade em.r-ttp.ttp-mid { color: var(--gold); }
.r-grade em.r-ttp.ttp-unlikely { color: #fca5a5; }
@media (max-width: 760px) {
  .size-s .r-grade em.r-ttp { margin-top: 0; font-size: 10px; }
}
.ttp-compact { margin-top: 10px; text-align: center; }
.ttp-compact .ttp-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ttp-compact b { display: block; font-family: var(--display); font-size: 18px; color: var(--cyan); }
.ttp-compact.ttp-instant b { color: var(--green2); }
.ttp-compact.ttp-mid b { color: var(--gold); }
.ttp-compact.ttp-unlikely b { color: #fca5a5; }
.ttp-compact small { color: var(--muted); font-weight: 700; }
.ttp-why { margin: 12px 0 0; padding: 0 0 0 18px; color: var(--muted); }
.ttp-why li { margin: 4px 0; }

/* —— Usage (Settings) —— */
#usage { overflow: visible; }
.usage-asof { margin: 0 0 8px; }
.usage-h { margin: 16px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.usage-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-2, rgba(255,255,255,.03)); }
.usage-card header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.usage-card header > div { flex: 1; min-width: 0; }
.usage-card header b { display: block; font-size: 14px; }
.usage-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; margin-top: 5px; background: #3dd68c; box-shadow: 0 0 0 3px rgba(61,214,140,.15); }
.usage-card.st-near .usage-dot { background: #f5c542; box-shadow: 0 0 0 3px rgba(245,197,66,.18); }
.usage-card.st-limited .usage-dot, .usage-card.st-error .usage-dot { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.18); }
.usage-card.st-not_configured .usage-dot { background: #6b7280; box-shadow: none; }
.usage-card.st-not_configured { opacity: .72; }
.usage-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 4px 0; }
.usage-bar i { display: block; height: 100%; background: #3dd68c; border-radius: inherit; }
.usage-bar.near i { background: #f5c542; }
.usage-bar.lim i { background: #ff6b6b; }
.usage-win { margin-top: 8px; }
.usage-win-h, .usage-reset { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.usage-src { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.usage-src-live { color: var(--cyan, #5eead4); }
.usage-src-documented { color: var(--muted); }
.usage-spark { margin-left: auto; color: var(--cyan, #5eead4); opacity: .85; flex: 0 0 auto; }
.usage-active { background: rgba(61,214,140,.18); color: #3dd68c; }
.usage-cool { background: rgba(245,197,66,.16); color: #f5c542; }
.usage-err { margin-top: 6px; font-size: 12px; }
.usage-tok { margin-top: 4px; }
@media (max-width: 640px) {
  .usage-grid { grid-template-columns: 1fr; }
  .usage-spark { width: 88px; }
}