.hidden { display: none !important; }

/* ─── Variables ──────────────────────────────────────────────────────────────── */
:root {
  --bg:          #080c12;
  --bg-card:     #0e1420;
  --bg-hover:    #141c2a;
  --bg-input:    #18202e;
  --border:      #1e2a3a;
  --border-light:#28374f;
  --text:        #e2e8f0; /* overridden by CMS font_color in header inline style */
  --text-muted:  #6b80a0;
  --text-dim:    #3d506a;
  --accent:      #00d4ff;
  --accent-dark: #00a8cc;
  --accent-glow: rgba(0,212,255,.18);
  --success:     #22c55e;
  --danger:      #ff3b3b;
  --info:        #38bdf8;
  --radius:      8px;
  --radius-lg:   14px;
  --shadow:      0 4px 24px rgba(0,0,0,.6);
  --font:        'Inter', system-ui, -apple-system, sans-serif;

  /* Rarity */
  --rarity-common:    #9ca3af;
  --rarity-uncommon:  #4ade80;
  --rarity-rare:      #38bdf8;
  --rarity-epic:      #c084fc;
  --rarity-legendary: #fb923c;
  --rarity-exotic:    #facc15;
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: #33ddff; }
img { display: block; max-width: 100%; }
input, textarea, select, button { font-family: inherit; }

/* ─── Layout ─────────────────────────────────────────────────────────────────── */
.container        { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.container-narrow { max-width: 700px; }
.main-content     { min-height: calc(100vh - 64px - 120px); }

/* ─── Navbar ─────────────────────────────────────────────────────────────────── */
.sticky-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,10,18,.94);
  backdrop-filter: blur(12px);
}
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  height: auto;
  min-height: 72px;
  padding-top: .35rem;
  padding-bottom: .35rem;
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #e63946, #f4a261, #2a9d8f, #264653) 1;
}
.nav-brand {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.1rem; font-weight: 700; color: var(--text);
  letter-spacing: -.01em;
}
.nav-brand svg { color: var(--accent); }
.nav-logo-img {
  display: block;
  height: 128px;
  width: auto;
  border: none;
  border-radius: 0;
  padding: 0 0 6px 0;
  background: none;
}
.nav-links {
  display: flex; align-items: center; gap: .25rem;
  list-style: none;
}
.nav-links a { color: var(--text-muted); padding: .4rem .75rem; border-radius: var(--radius); font-size: .9rem; }
.nav-links a:hover { color: var(--text); background: var(--bg-hover); }
.nav-user { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .5rem;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

.site-announcement {
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(0,212,255,.14), rgba(34,197,94,.08));
}
.site-announcement-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .8rem 1.25rem;
  color: var(--text);
  font-size: .88rem;
  line-height: 1.6;
  text-align: center;
}

/* ─── Nav dropdown ───────────────────────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex; align-items: center; gap: .2rem;
  color: var(--text-muted); padding: .4rem .75rem;
  border-radius: var(--radius); font-size: .9rem;
  background: none; border: none; font-family: inherit;
  white-space: nowrap; cursor: default;
}
.nav-dropdown-toggle:hover { color: var(--text); background: var(--bg-hover); }
.nav-dropdown-toggle::after { content: ' ▾'; font-size: .65rem; }
.nav-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + .35rem); left: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); min-width: 190px;
  z-index: 200; box-shadow: var(--shadow);
  padding: .3rem 0; list-style: none;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: block; padding: .55rem 1rem;
  color: var(--text-muted); font-size: .85rem;
  background: none; border-radius: 0;
}
.nav-dropdown-menu a:hover { background: var(--bg-hover); color: var(--text); }

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all .15s; white-space: nowrap;
  text-decoration: none; line-height: 1.4;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-accent  { background: var(--accent); color: #000; border-color: var(--accent); }
.btn-accent:hover { background: #33ddff; color: #000; }
.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent-glow); }
.btn-ghost   { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-success { background: transparent; color: var(--success); border-color: var(--success); }
.btn-success:hover { background: rgba(34,197,94,.1); }
.btn-danger  { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: rgba(239,68,68,.1); }
.btn-sm  { padding: .3rem .75rem; font-size: .82rem; }
.btn-lg  { padding: .7rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* Share buttons */
.btn-share    { font-size: .85rem; padding: .45rem .9rem; }
.btn-twitter  { border-color: #1d9bf0; color: #1d9bf0; }
.btn-twitter:hover  { background: rgba(29,155,240,.1); }
.btn-reddit   { border-color: #ff4500; color: #ff4500; }
.btn-reddit:hover   { background: rgba(255,69,0,.1); }
.btn-discord  { border-color: #5865f2; color: #5865f2; }
.btn-discord:hover  { background: rgba(88,101,242,.1); }
.btn-copy     { border-color: var(--border-light); color: var(--text-muted); }
.btn-copy:hover     { color: var(--text); border-color: var(--accent); }

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #060d18 0%, #0a1525 40%, #080c12 100%);
  border-bottom: 1px solid var(--border);
  padding: 5rem 1.25rem;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 3rem;
  flex-wrap: wrap;
}
.hero-text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, #e63946, #f4a261, #2a9d8f, #264653);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}
.hero-text p    { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; line-height: 1.7; }
.hero-actions   { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-stats     { display: flex; gap: 1rem; flex-wrap: wrap; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  text-align: center; flex: 1; min-width: 0;
}
.stat-num   { display: block; font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.stat-label { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .2rem; }

/* ─── How it works ───────────────────────────────────────────────────────────── */
.how-it-works { padding-top: 3rem; }
.steps {
  display: flex; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-top: 1.5rem;
}
.step {
  flex: 1; min-width: 160px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; margin-bottom: 1rem;
}
.step h3 { font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }
.step p  { font-size: .85rem; color: var(--text-muted); }
.step-arrow { font-size: 1.5rem; color: var(--text-dim); align-self: center; }

/* ─── Homepage Stats Bar ────────────────────────────────────────────────────── */
.hp-stats-bar {
  background: linear-gradient(180deg, rgba(0,212,255,.06) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1rem;
}
.hp-stats-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.hp-stat { text-align: center; flex: 1; min-width: 0; }
.hp-stat-num {
  display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent);
  letter-spacing: -.02em;
}
.hp-stat-label { display: block; font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .15rem; }
.hp-stat-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }

/* ─── Homepage Main Grid ────────────────────────────────────────────────────── */
.hp-main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}
.hp-trades-col { min-width: 0; }
.hp-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 120px; }

/* ─── Homepage Widgets ──────────────────────────────────────────────────────── */
.hp-widget {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.hp-widget-highlight {
  background: linear-gradient(135deg, rgba(0,212,255,.08), rgba(34,197,94,.05));
  border-color: rgba(0,212,255,.2);
}
.hp-widget-title {
  font-size: .95rem; font-weight: 700; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}

/* Live dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  display: inline-block; animation: livePulse 2s infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* Activity feed */
.hp-activity-feed { list-style: none; display: flex; flex-direction: column; gap: 0; }
.hp-activity-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
  font-size: .82rem; color: var(--text-muted); line-height: 1.5;
}
.hp-activity-item:last-child { border-bottom: none; }
.hp-activity-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; flex-shrink: 0; margin-top: .1rem;
}
.hp-activity-icon.posted { background: rgba(0,212,255,.15); color: var(--accent); }
.hp-activity-icon.completed { background: rgba(34,197,94,.15); color: var(--success); }
.hp-activity-user { color: var(--text); font-weight: 600; }
.hp-activity-time { display: block; font-size: .72rem; color: var(--text-dim); margin-top: .15rem; }
.hp-activity-empty { color: var(--text-dim); font-size: .85rem; padding: .5rem 0; }

/* Leaderboard */
.hp-leaderboard { list-style: none; display: flex; flex-direction: column; gap: 0; counter-reset: lb; }
.hp-lb-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.hp-lb-row:last-child { border-bottom: none; }
.hp-lb-rank { font-size: 1.1rem; width: 28px; text-align: center; flex-shrink: 0; }
.hp-lb-name { color: var(--text); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-lb-name:hover { color: var(--accent); }
.hp-lb-trades { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.hp-lb-rep { font-size: .75rem; font-weight: 600; }

/* Mini stats */
.hp-mini-stats { display: flex; gap: 1rem; }
.hp-mini-stat { flex: 1; text-align: center; }
.hp-mini-num { display: block; font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.hp-mini-label { display: block; font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }

/* ─── Homepage CTA ──────────────────────────────────────────────────────────── */
.hp-cta {
  margin-top: 3rem;
  padding: 3.5rem 1.25rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(0,212,255,.06) 0%, rgba(34,197,94,.04) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hp-cta-inner { max-width: 600px; margin: 0 auto; }
.hp-cta h2 {
  font-size: 1.8rem; font-weight: 800; margin-bottom: .5rem;
  background: linear-gradient(90deg, #e63946, #f4a261, #2a9d8f, #264653);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hp-cta p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 1.05rem; }

/* ─── Section headings ───────────────────────────────────────────────────────── */
.section-title  { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-title     { font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -.02em; }
.page-header    { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ─── Trade grid / cards ─────────────────────────────────────────────────────── */
.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.trade-card {
  position: relative;
  display: block;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.trade-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: var(--text);
}
.trade-card.has-match { border-color: rgba(0,212,255,.4); }
.trade-card.has-match:hover { border-color: var(--accent); box-shadow: 0 4px 24px var(--accent-glow); }

.match-badge {
  position: absolute; top: .75rem; right: .75rem;
  background: var(--accent); color: #000;
  font-size: .72rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
}

.trade-items { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.trade-item  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.trade-item-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.trade-arrow { color: var(--text-dim); flex-shrink: 0; }

.item-icon    { width: 56px; height: 56px; object-fit: contain; }
.item-icon-sm { width: 28px; height: 28px; object-fit: contain; }
.item-icon-lg { width: 96px; height: 96px; object-fit: contain; }

.item-name    { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.item-name-lg { font-size: 1.1rem; font-weight: 700; }

/* Rarity classes */
.rarity-common    { color: var(--rarity-common);    }
.rarity-uncommon  { color: var(--rarity-uncommon);  }
.rarity-rare      { color: var(--rarity-rare);      }
.rarity-epic      { color: var(--rarity-epic);      }
.rarity-legendary { color: var(--rarity-legendary); }
.rarity-exotic    { color: var(--rarity-exotic);    }

.rarity-tag {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 4px; text-transform: capitalize;
  background: rgba(255,255,255,.06);
}
.rarity-tag.rarity-common    { color: var(--rarity-common);    border: 1px solid var(--rarity-common);    }
.rarity-tag.rarity-uncommon  { color: var(--rarity-uncommon);  border: 1px solid var(--rarity-uncommon);  }
.rarity-tag.rarity-rare      { color: var(--rarity-rare);      border: 1px solid var(--rarity-rare);      }
.rarity-tag.rarity-epic      { color: var(--rarity-epic);      border: 1px solid var(--rarity-epic);      }
.rarity-tag.rarity-legendary { color: var(--rarity-legendary); border: 1px solid var(--rarity-legendary); }
.rarity-tag.rarity-exotic    { color: var(--rarity-exotic);    border: 1px solid var(--rarity-exotic);    }

.type-tag {
  display: inline-block; font-size: .7rem; color: var(--text-muted);
  padding: .15rem .45rem; border-radius: 4px; border: 1px solid var(--border);
  text-transform: capitalize;
}
.item-value-badge {
  display: inline-block; font-size: .7rem; color: #facc15;
  padding: .15rem .45rem; border-radius: 4px; border: 1px solid rgba(250,204,21,.3);
  background: rgba(250,204,21,.06);
}
.item-value-tag { color: #facc15; font-size: .78em; }

.trade-meta { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--text-muted); }
.trade-poster { display: flex; align-items: center; gap: .3rem; }
.trade-notes  { font-size: .8rem; color: var(--text-muted); margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .6rem; }

/* ─── Trade detail page ──────────────────────────────────────────────────────── */
.trade-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}
.trade-detail-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.trade-inactive { opacity: .75; }

.status-banner {
  text-align: center; padding: .6rem; border-radius: var(--radius);
  font-weight: 600; font-size: .9rem; margin-bottom: 1.5rem;
}
.status-completed { background: rgba(34,197,94,.12); color: var(--success); border: 1px solid rgba(34,197,94,.3); }
.status-cancelled { background: rgba(239,68,68,.1);  color: var(--danger);  border: 1px solid rgba(239,68,68,.25); }

.trade-detail-items {
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
.trade-detail-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; min-width: 160px; }
.trade-detail-arrow { color: var(--text-dim); }

.trade-detail-meta { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.meta-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.meta-row strong { color: var(--text-muted); font-weight: 500; }
.embark-link { color: var(--accent); font-weight: 600; }

.trade-notes-block {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; margin-top: 1rem; font-size: .9rem;
}
.trade-notes-block strong { display: block; color: var(--text-muted); margin-bottom: .3rem; }

.owner-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

/* Share card */
.share-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem; margin-top: 1rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.share-card h3 { font-size: .78rem; color: var(--text-dim); margin: 0; white-space: nowrap; }
.share-buttons { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; }
.btn-share { font-size: .75rem !important; padding: .3rem .6rem !important; gap: .3rem !important; }

/* Matches sidebar */
.trade-matches-sidebar {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem; position: sticky; top: 80px;
}
.sidebar-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.match-count-badge {
  background: var(--accent); color: #000;
  font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px;
}
.match-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.match-item a {
  display: block; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem; color: var(--text);
  transition: border-color .15s;
}
.match-item a:hover { border-color: var(--accent); }
.match-embark { font-size: .75rem; color: var(--accent); font-weight: 600; margin-bottom: .3rem; }
.match-items { display: flex; align-items: center; gap: .4rem; font-size: .82rem; flex-wrap: wrap; }
.match-time  { font-size: .72rem; color: var(--text-dim); margin-top: .3rem; }

.no-matches { text-align: center; padding: 1.5rem; color: var(--text-muted); }
.no-matches svg { margin: 0 auto .75rem; opacity: .4; }
.no-matches .hint { font-size: .8rem; margin-top: .5rem; }

/* ─── Breadcrumb ─────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--text-muted); margin-bottom: 1.25rem;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ─── Filters ────────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem;
  margin-bottom: 1rem;
}
.filter-input, .filter-select {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: .45rem .75rem;
  font-size: .88rem; min-width: 150px;
}
.filter-input:focus, .filter-select:focus {
  outline: none; border-color: var(--accent);
}
.result-count { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }

/* ─── Pagination ─────────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 2rem; }
.pag-info   { font-size: .85rem; color: var(--text-muted); }

/* ─── My trades list ─────────────────────────────────────────────────────────── */
.my-trades-list { display: flex; flex-direction: column; gap: .75rem; }
.my-trade-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  transition: border-color .15s;
}
.my-trade-row:hover { border-color: var(--border-light); }
.my-trade-items { flex: 1; min-width: 0; }
.trade-pair-mini { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; font-weight: 500; }
.trade-notes-mini { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }
.my-trade-meta  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.my-trade-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.match-pill {
  background: var(--accent); color: #000;
  font-size: .72rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 20px;
}
.status-tag { font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 20px; }
.status-active    { background: rgba(34,197,94,.12); color: var(--success); }
.status-completed { background: rgba(96,165,250,.12); color: var(--info); }
.status-cancelled { background: rgba(239,68,68,.1);  color: var(--danger); }

/* ─── Tabs ───────────────────────────────────────────────────────────────────── */
.tab-nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tab {
  padding: .6rem 1rem; font-size: .88rem; font-weight: 500; border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-muted); display: flex; align-items: center; gap: .4rem;
  border: 1px solid transparent; border-bottom: none; transition: all .15s;
}
.tab:hover { color: var(--text); background: var(--bg-hover); }
.tab-active { color: var(--text); border-color: var(--border); background: var(--bg-card); }
.tab-count { background: var(--bg-hover); font-size: .72rem; padding: .1rem .4rem; border-radius: 10px; }

/* ─── Auth pages ─────────────────────────────────────────────────────────────── */
.auth-wrapper { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 64px); padding: 2rem 1.25rem; }
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.5rem;
}
.auth-title  { font-size: 1.5rem; font-weight: 800; margin-bottom: .4rem; }
.auth-sub    { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.75rem; }
.auth-switch { text-align: center; margin-top: 1.25rem; font-size: .88rem; color: var(--text-muted); }

/* ─── Forms ──────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-size: .85rem; font-weight: 500;
  color: var(--text-muted); margin-bottom: .4rem;
}
.required { color: var(--accent); }
.optional  { color: var(--text-dim); font-weight: 400; font-size: .8rem; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: .6rem .85rem;
  font-size: .9rem; transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-hint { display: block; font-size: .78rem; color: var(--text-dim); margin-top: .3rem; }

.input-pw-wrap { position: relative; }
.input-pw-wrap input { padding-right: 2.5rem; }
.pw-toggle {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  padding: .2rem;
}
.pw-toggle:hover { color: var(--text-muted); }

.form-section {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.form-section legend { font-size: .95rem; font-weight: 600; padding: 0 .5rem; color: var(--accent); }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }

.char-count { float: right; }

/* ─── Item picker (post trade) ───────────────────────────────────────────────── */
.item-search-wrap { position: relative; }
.item-search-input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: .6rem .85rem;
  font-size: .9rem; transition: border-color .15s;
}
.item-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.item-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.item-dropdown.hidden { display: none; }
.dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item img { width: 32px; height: 32px; object-fit: contain; }
.dropdown-item-info { flex: 1; min-width: 0; }
.dropdown-item-name { font-size: .88rem; font-weight: 500; }
.dropdown-item-sub  { font-size: .75rem; color: var(--text-muted); }
.dropdown-loading, .dropdown-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: .85rem; }

.selected-item {
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg-hover); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .75rem; margin-top: .5rem;
}
.selected-item.hidden { display: none; }
.selected-item img { width: 40px; height: 40px; object-fit: contain; }
.selected-item-info { flex: 1; }
.selected-item-name { font-size: .9rem; font-weight: 600; }
.selected-item-sub  { font-size: .78rem; color: var(--text-muted); }
.selected-clear { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: .25rem; font-size: 1rem; line-height: 1; }
.selected-clear:hover { color: var(--danger); }

/* ─── Alerts ─────────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.alert-error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3);  color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.3);  color: #86efac; }
.alert-error p, .alert-success p { margin: 0; font-size: .9rem; }

/* ─── Empty state ────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 2.5rem 1.5rem; color: var(--text-muted);
}
.empty-state svg { margin: 0 auto 1rem; opacity: .4; }
.empty-state p { margin-bottom: .75rem; }

/* ─── Profile page ───────────────────────────────────────────────────────────── */
.profile-stats  {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  width: 100%;
}
.profile-stats .stat-card {
  padding: .65rem .5rem; min-width: 0;
}

/* ─── Embark badge ───────────────────────────────────────────────────────────── */
.embark-badge {
  display: inline-block; font-size: .78rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 20px;
  background: rgba(0,212,255,.10); color: var(--accent); border: 1px solid rgba(0,212,255,.3);
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 1.5rem 1.25rem; margin-top: 2.5rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 700; color: var(--text-muted); margin-bottom: .75rem; }
.footer-desc  { font-size: .82rem; color: var(--text-dim); margin-bottom: 1rem; }
.footer-desc a { color: var(--text-muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; font-size: .85rem; }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--accent); }

/* ─── Listing type toggle (post page) ───────────────────────────────────────── */
.listing-type-toggle {
  display: flex; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.type-btn {
  flex: 1; min-width: 160px;
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  cursor: pointer; color: var(--text-muted); text-align: left;
  transition: all .15s; font-size: .95rem; font-weight: 600;
}
.type-btn svg { color: var(--text-dim); transition: color .15s; }
.type-btn:hover { border-color: var(--border-light); color: var(--text); }
.type-btn.active { border-color: var(--accent); color: var(--text); background: var(--bg-hover); }
.type-btn.active svg { color: var(--accent); }
.type-btn-sub { font-size: .78rem; font-weight: 400; color: var(--text-dim); }
.type-btn.active .type-btn-sub { color: var(--text-muted); }

/* ─── Request card styles ────────────────────────────────────────────────────── */
.trade-card.is-request { border-color: rgba(96,165,250,.25); }
.trade-card.is-request:hover { border-color: var(--info); box-shadow: 0 4px 24px rgba(96,165,250,.12); }
.trade-card.is-request.has-match { border-color: rgba(96,165,250,.5); }

.listing-type-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 20px; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .6rem;
}
.badge-request { background: rgba(96,165,250,.15); color: var(--info); border: 1px solid rgba(96,165,250,.3); }

.request-layout { flex-direction: column; align-items: center; }
.request-offer-label { margin-top: .5rem; font-size: .82rem; }
.offering-text { color: var(--text-muted); }
.open-offers-tag {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 20px;
  background: rgba(255,255,255,.05); color: var(--text-dim);
  border: 1px solid var(--border);
}

/* ─── Toast notification ─────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--accent);
  color: var(--text); padding: .75rem 1.25rem;
  border-radius: var(--radius); font-size: .88rem;
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ─── Ad units ───────────────────────────────────────────────────────────────── */
.ad-unit {
  width: 100%; overflow: hidden;
  background: var(--bg-card); border-radius: var(--radius);
  margin: 1.25rem 0;
}
.ad-leaderboard { min-height: 90px; }
.ad-sidebar     { min-height: 250px; margin-bottom: 1rem; }
.ad-in-feed     { min-height: 120px; }
.ad-footer      { min-height: 90px; }

/* ─── PWA Install Banner (bottom) ───────────────────────────────────────────── */
.install-banner-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg-card);
  border-top: 2px solid var(--accent);
  padding: .85rem 1.25rem max(0.85rem, env(safe-area-inset-bottom)) 1.25rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
}
.install-banner-bottom img { border-radius: 8px; flex-shrink: 0; }
.install-banner-bottom .install-banner-text { flex: 1; font-size: .85rem; min-width: 0; }
.install-banner-bottom .install-banner-text strong { display: block; color: var(--accent); }
.install-banner-bottom .install-banner-text span,
.install-banner-bottom .install-banner-text #install-banner-sub { color: var(--text-muted); font-size: .8rem; }
.install-banner-close {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer;
  color: var(--text-muted); font-size: 1rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.install-banner-close:hover { color: var(--text); background: var(--bg-input); }

/* ─── Messaging / Chat ───────────────────────────────────────────────────────── */
.chat-thread {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; min-height: 200px; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem;
}
.chat-empty { color: var(--text-muted); font-size: .9rem; text-align: center; margin: auto; }
.chat-msg { display: flex; flex-direction: column; max-width: 75%; }
.chat-mine { align-self: flex-end; align-items: flex-end; }
.chat-theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: .55rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.5;
  word-break: break-word;
}
.chat-mine .chat-bubble { background: var(--accent); color: #000; border-bottom-right-radius: 4px; }
.chat-theirs .chat-bubble { background: var(--bg-hover); border-bottom-left-radius: 4px; }
.chat-meta { font-size: .72rem; color: var(--text-dim); margin-top: .2rem; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.chat-input {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: .6rem .85rem; font-size: .9rem; resize: none;
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.accepted-requests { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .trade-detail-grid { grid-template-columns: 1fr; }
  .trade-matches-sidebar { position: static; }
  .container { padding: .75rem .65rem; }
}

@media (max-width: 680px) {
  /* Nav */
  .navbar { padding: 0 .75rem; height: 60px; }
  .nav-brand { flex: 1; display: flex; justify-content: center; }
  .nav-logo-img {
    height: auto !important;
    width: calc(100vw - 110px);
    max-width: 300px;
    padding: 0;
    object-fit: contain;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    height: calc(100vh - 56px);
    background: #080c12;
    border-top: 2px solid var(--accent);
    padding: 1.5rem 1.5rem calc(5rem + env(safe-area-inset-bottom, 0px));
    gap: 0;
    overflow-y: auto;
    z-index: 9999;
  }
  .nav-links.open { display: flex !important; }
  .nav-links li { width: 100%; list-style: none; }
  .nav-links a { display: flex; align-items: center; gap: .5rem; padding: 1rem 0; font-size: 1.1rem; color: var(--text) !important; border-bottom: 1px solid var(--border); width: auto !important; height: auto !important; white-space: normal; }
  .nav-links .btn { width: 100%; justify-content: center; padding: .85rem; margin-top: .75rem; border-bottom: none; }
  .nav-auth-buttons { display: flex !important; gap: .5rem; margin-top: .75rem; }
  .nav-auth-buttons .btn { flex: 1; text-align: center; margin-top: 0; }
  .nav-toggle { display: flex; z-index: 99999; position: relative; }
  .nav-user { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .nav-dropdown-toggle { display: none; }
  .nav-dropdown-menu {
    display: block !important; position: static;
    background: none; border: none; box-shadow: none;
    min-width: unset; padding: 0;
  }
  .nav-dropdown-menu li { width: 100%; }
  .nav-dropdown-menu a { padding: 1rem 0 1rem 1rem !important; border-bottom: 1px solid var(--border); color: var(--text) !important; font-size: 1.1rem !important; }

  /* Hero */
  .hero { padding: 1.25rem .75rem; }
  .hero-inner { flex-direction: column; gap: 1rem; }
  .hero-text h1 { font-size: 1.6rem; }
  .hero-text p { font-size: .95rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { justify-content: center; }

  /* Homepage stats bar */
  .hp-stats-inner { flex-wrap: wrap; gap: .5rem; }
  .hp-stat { min-width: 30%; }
  .hp-stat-num { font-size: 1.15rem; }
  .hp-stat-divider { display: none; }

  /* Homepage grid → single column */
  .hp-main-grid { grid-template-columns: 1fr; }
  .hp-sidebar { position: static; }

  /* CTA */
  .hp-cta { padding: 1.5rem .75rem; }
  .hp-cta h2 { font-size: 1.4rem; }

  /* How it works */
  .steps { flex-direction: column; }
  .step-arrow { display: none; }

  /* Trade cards — single column on small screens */
  .trade-grid { grid-template-columns: 1fr; }
  .trade-items { gap: .5rem; }

  /* Trade detail */
  .trade-detail-card { padding: 1.25rem; }
  .trade-detail-items { flex-direction: column; gap: 1.25rem; }
  .trade-detail-arrow { transform: rotate(90deg); }
  .trade-detail-item { min-width: unset; }
  .owner-actions { flex-direction: column; }
  .owner-actions form { width: 100%; }
  .owner-actions .btn { width: 100%; justify-content: center; }

  /* Share buttons */
  .share-card { flex-direction: column; align-items: flex-start; }
  .share-buttons { width: 100%; }
  .share-buttons .btn { flex: 1; min-width: 80px; justify-content: center; }

  /* Auth */
  .auth-card { padding: 1.25rem; }
  .auth-wrapper { align-items: flex-start; padding-top: 1.5rem; }

  /* My trades */
  .my-trade-row { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .my-trade-actions { width: 100%; display: flex; gap: .5rem; }
  .my-trade-actions .btn { flex: 1; justify-content: center; }

  /* Forms */
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .listing-type-toggle { flex-direction: column; }

  /* Filter bar */
  .filter-bar { flex-direction: column; }
  .filter-input, .filter-select { width: 100%; min-width: unset; }
  .filter-bar .btn { width: 100%; justify-content: center; }

  /* Page headers */
  .page-header { flex-direction: column; }
  .page-header .btn { width: 100%; justify-content: center; }
  .section-header { flex-wrap: wrap; gap: .5rem; }
  .cms-grid,
  .cms-fields-2,
  .cms-color-row { grid-template-columns: 1fr; }
  .cms-bottom-actions,
  .cms-header-actions { justify-content: stretch; }
  .cms-bottom-actions .btn,
  .cms-header-actions .btn { width: 100%; justify-content: center; }

  /* Profile */
  .profile-header { flex-direction: column; text-align: center; padding: .75rem; gap: .6rem; margin-bottom: .6rem; }
  .profile-avatar { margin: 0 auto; width: 48px; height: 48px; font-size: 1rem; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
  .profile-header { flex-direction: column; align-items: center; text-align: center; }
  .profile-actions { margin-left: 0; justify-content: center; }
  .profile-name { font-size: 1.1rem; margin-bottom: .1rem; }
  .profile-joined { margin-bottom: .2rem; }
  .profile-about-section { margin-top: .5rem; padding-top: .5rem; }
  .profile-card { padding: .75rem .85rem; margin-top: .6rem; }
  .profile-card-title { margin: 0 0 .5rem; font-size: .92rem; }

  /* Global card compaction */
  .trade-card { padding: .75rem; }
  .trade-items { margin-bottom: .6rem; gap: .4rem; }
  .trade-meta { font-size: .72rem; }
  .trade-notes { margin-top: .35rem; padding-top: .35rem; }
  .trade-grid { gap: .5rem; margin-top: .5rem; }
  .trade-detail-card { padding: .85rem; }
  .status-banner { margin-bottom: .75rem; }
  .trade-detail-items { margin-bottom: .75rem; gap: 1rem; }

  /* Stat cards */
  .stat-card { padding: .6rem .5rem; border-radius: 8px; }
  .stat-num { font-size: 1.2rem; }
  .stat-label { font-size: .68rem; margin-top: .1rem; }

  /* General spacing */
  .page-title { font-size: 1.3rem; margin-bottom: .6rem; }
  .page-header { margin-bottom: .6rem; }
  .section-title { font-size: 1.2rem; }
  .tab-nav { margin-bottom: .75rem; }
  .empty-state { padding: 2rem 1rem; }
  .site-footer { margin-top: 2rem; padding: 1.25rem .75rem; }
  .footer-links { gap: .4rem .75rem; font-size: .8rem; }
  .how-it-works { padding-top: 1.5rem; }
  .step { padding: .85rem; }
  .step-num { width: 28px; height: 28px; font-size: .78rem; margin-bottom: .5rem; }
  .hp-stats-bar { padding: .75rem .5rem; }

  /* Filter bars */
  .filter-bar { gap: .4rem; margin-bottom: .75rem; }

  /* DM inbox compact */
  .dm-inbox-row { padding: .6rem .5rem; }
  .dm-inbox-avatar { width: 36px; height: 36px; }

  /* Leaderboard compact */
  .lb-card { padding: .75rem; }
  .lb-table td { padding: .35rem .4rem; font-size: .8rem; }
  .lb-table th { padding: .3rem .4rem; }

  /* My trades compact */
  .my-trade-row { padding: .6rem 0; gap: .4rem; }

  /* Tabs */
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: .45rem .65rem; font-size: .82rem; }

  /* Pagination */
  .pagination { flex-wrap: wrap; justify-content: center; }
}

/* ─── Touch targets (all mobile) ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .filter-input, .filter-select,
  .form-group input,
  .form-group textarea,
  .form-group select,
  .item-search-input { min-height: 46px; font-size: 16px; /* prevents iOS zoom */ }
  .dropdown-item { min-height: 52px; }
  .tab { min-height: 44px; }
}

/* ─── Notification bell ─────────────────────────────────────────────────────── */
.nav-notif-btn {
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  border-radius: var(--radius); color: var(--text-muted);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-notif-btn:hover { color: var(--text); background: var(--bg-hover); }
.nav-notif-btn svg { flex-shrink: 0; }
.notif-dot {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  vertical-align: middle; flex-shrink: 0;
}

/* ─── Notification list ──────────────────────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: .75rem; }
.notif-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
}
.notif-item.notif-trade_request    { border-left: 3px solid var(--accent); }
.notif-item.notif-request_accepted { border-left: 3px solid var(--success); }
.notif-item.notif-request_declined { border-left: 3px solid var(--danger); }
.notif-item.notif-new_match        { border-left: 3px solid var(--info); }
.notif-icon { flex-shrink: 0; color: var(--text-dim); padding-top: .1rem; }
.notif-item.notif-trade_request    .notif-icon { color: var(--accent); }
.notif-item.notif-request_accepted .notif-icon { color: var(--success); }
.notif-item.notif-request_declined .notif-icon { color: var(--danger); }
.notif-item.notif-new_match        .notif-icon { color: var(--info); }
.notif-body { flex: 1; font-size: .9rem; line-height: 1.5; }
.notif-body p { margin-bottom: .3rem; }
.notif-actor { color: var(--accent); }
.notif-note  { font-style: italic; color: var(--text-muted); font-size: .85rem; margin: .3rem 0; }
.notif-time  { font-size: .75rem; color: var(--text-dim); display: block; margin-top: .4rem; }
.notif-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.notif-status-done { font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: 20px; }

/* ─── Reputation badges ──────────────────────────────────────────────────────── */
.rep-badge {
  display: inline-block; font-size: .78rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 20px; margin-top: .3rem;
}
.rep-badge.rep-new      { background: rgba(107,128,160,.15); color: var(--text-muted); border: 1px solid var(--border-light); }
.rep-badge.rep-beginner { background: rgba(34,197,94,.1);    color: var(--success);    border: 1px solid rgba(34,197,94,.3); }
.rep-badge.rep-trusted  { background: rgba(0,212,255,.1);    color: var(--accent);     border: 1px solid rgba(0,212,255,.3); }
.rep-badge.rep-veteran  { background: rgba(250,204,21,.1);   color: #facc15;           border: 1px solid rgba(250,204,21,.3); }

/* Mini rep badges on trade cards */
.rep-badge-mini {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 700; padding: .15rem .4rem; border-radius: 10px;
}
.rep-badge-mini.rep-new      { background: rgba(107,128,160,.2);  color: var(--text-muted); border: 1px solid rgba(107,128,160,.3); }
.rep-badge-mini.rep-beginner { background: rgba(34,197,94,.15);   color: var(--success);    border: 1px solid rgba(34,197,94,.3); }
.rep-badge-mini.rep-trusted  { background: rgba(0,212,255,.15);   color: var(--accent);     border: 1px solid rgba(0,212,255,.3); }

/* ─── Item quantity ──────────────────────────────────────────────────────────── */
.item-qty-wrap { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .85rem; color: var(--text-muted); }
.item-qty-wrap input[type=number] {
  width: 64px; padding: .3rem .5rem; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: .85rem; text-align: center;
}
.item-qty-wrap input[type=number]:focus { outline: none; border-color: var(--accent); }
.qty-badge {
  display: inline-block; background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 4px; margin-left: .25rem;
}

/* ─── Edit trade form ────────────────────────────────────────────────────────── */
.edit-trade-form { margin-top: 1rem; padding: 1rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); }
.edit-trade-form .form-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }

/* ─── Flagged listings ───────────────────────────────────────────────────────── */
.flagged-badge {
  display: inline-block; font-size: .75rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 20px;
  background: rgba(255,59,59,.12); color: var(--danger); border: 1px solid rgba(255,59,59,.3);
}
.trade-card.is-flagged { border-color: rgba(255,59,59,.3); opacity: .85; }
.flagged-card-notice { font-size: .75rem; color: var(--danger); margin-top: .6rem; }

/* ─── Trade request box (listing detail) ─────────────────────────────────────── */
.request-trade-box {
  margin-top: 1.25rem; padding: 1.25rem;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.request-trade-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.embark-warning {
  display: flex; align-items: flex-start; gap: .5rem;
  background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.25);
  border-radius: var(--radius); padding: .75rem; margin-bottom: .75rem;
  font-size: .83rem; color: #facc15; line-height: 1.5;
}
.embark-warning svg { flex-shrink: 0; margin-top: .1rem; }
.req-note-input {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: .6rem .75rem;
  font-size: .88rem; resize: vertical; min-height: 60px;
}
.req-note-input:focus { outline: none; border-color: var(--accent); }
.req-note-actions { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.req-char-count { font-size: .78rem; color: var(--text-dim); }
.req-hint { font-size: .78rem; color: var(--text-dim); margin-top: .5rem; }
.request-sent-msg {
  display: flex; align-items: center; gap: .5rem;
  color: var(--success); font-size: .9rem; font-weight: 500;
}

/* ─── Pending trade requests (owner view) ────────────────────────────────────── */
.pending-requests {
  margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1.25rem;
}
.pending-requests-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; font-weight: 700; margin-bottom: .75rem; color: var(--accent);
}
.request-row {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .6rem;
}
.request-who  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; font-weight: 600; }
.request-time { font-size: .75rem; color: var(--text-dim); font-weight: 400; }
.request-offer-item { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; padding: .4rem .6rem; background: var(--bg-hover); border-radius: var(--radius); font-size: .85rem; }
.request-note { font-size: .85rem; color: var(--text-muted); font-style: italic; margin: .3rem 0; }
.request-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

/* ─── Profile page ───────────────────────────────────────────────────────────── */
.profile-header {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.profile-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #22c55e);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: #000; flex-shrink: 0;
  letter-spacing: -.02em;
}
.profile-info  { flex: 1; min-width: 0; }
.profile-name  { font-size: 1.3rem; font-weight: 800; margin-bottom: .2rem; }
.profile-joined { font-size: .8rem; color: var(--text-muted); margin-bottom: .4rem; }
.profile-actions { margin-left: auto; display: flex; gap: .5rem; }
.profile-about-section {
  width: 100%; border-top: 1px solid var(--border);
  margin-top: .75rem; padding-top: 1rem;
}
/* Stats always span a full row below avatar+info — 3x2 grid */
.profile-stats { margin-top: .25rem; }
.stat-card-click { cursor: pointer; transition: border-color .15s, background .15s; }
.stat-card-click:hover { border-color: var(--accent); background: rgba(0,212,255,.06); }

/* ─── Follow List Modal ────────────────────────────────────────────────────── */
.follow-modal-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.follow-modal-overlay.visible { display:flex; }
.follow-modal {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  width:100%; max-width:380px; max-height:70vh; display:flex; flex-direction:column;
  margin:1rem;
}
.follow-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
}
.follow-modal-header h3 { font-size:1rem; font-weight:700; margin:0; }
.follow-modal-close {
  background:none; border:none; color:var(--text-muted); font-size:1.4rem;
  cursor:pointer; padding:0; line-height:1;
}
.follow-modal-close:hover { color:var(--text); }
.follow-modal-body { overflow-y:auto; padding:.5rem 0; }
.follow-modal-row {
  display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem;
  text-decoration:none; color:var(--text); transition:background .15s;
}
.follow-modal-row:hover { background:var(--bg-hover); }
.follow-modal-avatar {
  width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.follow-modal-avatar-init {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-hover); font-weight:700; font-size:.85rem; color:var(--text-muted);
}
.follow-modal-name { font-weight:600; font-size:.9rem; }
.follow-modal-empty { color:var(--text-muted); font-size:.9rem; text-align:center; padding:2rem 1rem; }

/* ─── Profile Cards ─────────────────────────────────────────────────────────── */
.profile-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-top: 1rem;
}
.profile-card-title {
  font-size: 1rem; font-weight: 600; margin: 0 0 .85rem; color: var(--text);
}

/* ─── Loadout Display ───────────────────────────────────────────────────────── */
.loadout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.loadout-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.loadout-weapon {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem;
}
.loadout-weapon-icon {
  border-radius: 6px; background: rgba(0,0,0,.3); padding: 4px;
  border: 1px solid var(--border);
}
.loadout-attachments {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding-top: .6rem; border-top: 1px solid var(--border);
}
.loadout-attach-item {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: .2rem .45rem; font-size: .78rem;
}

/* ─── Profile About Tags ────────────────────────────────────────────────────── */
.profile-about-tags {
  display: flex; flex-direction: column; gap: .5rem; margin-bottom: .25rem;
}
.profile-about-tag {
  display: flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--text-muted); flex-wrap: wrap;
}
.profile-about-tag strong { color: var(--text); }

/* ─── Profile Videos ────────────────────────────────────────────────────────── */
.profile-videos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem;
}
.profile-video-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.profile-video-card:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(0,0,0,.24); }
.profile-video-card-top {
  padding: .8rem .9rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.profile-video-title {
  font-size: .9rem; font-weight: 700; color: #fff; margin: .55rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-video-embed { position: relative; width: 100%; padding-bottom: 56.25%; }
.profile-video-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.profile-video-embed-tiktok { padding-bottom: min(140%, 580px); }
.profile-video-embed-twitter { padding-bottom: min(80%, 420px); }
.profile-video-link {
  display: flex; align-items: center; gap: .5rem; padding: .9rem;
}
.profile-video-link a {
  color: #fff; font-weight: 700; text-decoration: none;
}
.profile-video-actions {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem .9rem .9rem;
}
.profile-video-visit {
  color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none;
}
.profile-video-visit:hover { text-decoration: underline; }
.video-platform-generic {
  background: rgba(148,163,184,.14);
  color: #cbd5e1;
}
.profile-video-card.video-platform-youtube {
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.24), rgba(12, 14, 18, 0.98) 42%);
  border-color: rgba(255, 0, 51, 0.45);
  box-shadow: 0 18px 40px rgba(255,0,51,.08);
}
.profile-video-card.video-platform-tiktok {
  background: linear-gradient(180deg, rgba(255, 0, 80, 0.2), rgba(0, 242, 234, 0.16) 30%, rgba(10, 10, 10, 0.98) 58%);
  border-color: rgba(0, 242, 234, 0.45);
  box-shadow: 0 18px 40px rgba(0,242,234,.06);
}
.profile-video-card.video-platform-twitch {
  background: linear-gradient(180deg, rgba(145, 70, 255, 0.28), rgba(20, 12, 34, 0.98) 42%);
  border-color: rgba(145, 70, 255, 0.45);
  box-shadow: 0 18px 40px rgba(145,70,255,.08);
}
.profile-video-card.video-platform-twitter {
  background: linear-gradient(180deg, rgba(29, 155, 240, 0.26), rgba(10, 21, 38, 0.98) 42%);
  border-color: rgba(29, 155, 240, 0.45);
  box-shadow: 0 18px 40px rgba(29,155,240,.06);
}
.video-platform-badge {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: .15rem .45rem; border-radius: 4px;
}
.video-platform-youtube  { background: rgba(255,0,0,.2); color: #ff4444; }
.video-platform-tiktok   { background: rgba(0,242,234,.18); color: #00f2ea; }
.video-platform-twitch   { background: rgba(145,70,255,.2); color: #9146ff; }
.video-platform-twitter  { background: rgba(29,155,240,.2); color: #1d9bf0; }

/* Video edit rows */
.video-edit-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: .5rem;
}
.video-edit-info { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.video-edit-title {
  font-size: .85rem; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 680px) {
  .profile-videos-grid { grid-template-columns: 1fr; }
}

/* ─── Activity Feed ─────────────────────────────────────────────────────────── */
.feed-post-box {
  background: var(--card-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  margin-bottom: 1rem;
  overflow: hidden;
}
.feed-post-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1rem; cursor: pointer;
  font-size: .9rem; font-weight: 600; color: var(--text);
  transition: background .15s;
}
.feed-post-header:hover { background: rgba(255,255,255,.04); }

.feed-tabs {
  display: flex; gap: 0; margin-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}
.feed-tab {
  padding: .6rem 1.25rem; font-size: .88rem; font-weight: 600;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: .4rem;
}
.feed-tab:hover { color: var(--text); }
.feed-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.feed-container { display: flex; flex-direction: column; gap: 0; }

.feed-item {
  display: flex; gap: .75rem; padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: none; }

.feed-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--border);
}
.feed-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a3a4a, #0d2233);
  font-size: .8rem; font-weight: 700; color: var(--accent);
}

.feed-item-body { flex: 1; min-width: 0; }
.feed-item-text {
  font-size: .88rem; color: var(--text-muted); line-height: 1.5;
}
.feed-item-text a { color: var(--accent); font-weight: 600; }
.feed-item-text strong { color: var(--text); }
.feed-icon { margin-right: .2rem; }

.feed-item-time {
  font-size: .75rem; color: var(--text-dim); margin-top: .25rem;
}

.feed-video-embed {
  position: relative; width: 100%; max-width: 480px;
  padding-bottom: min(56.25%, 270px); margin-top: .5rem;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: #000;
}
.feed-video-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
.feed-video-tiktok {
  padding-bottom: min(140%, 580px); max-width: 325px;
}
.feed-video-twitter {
  padding-bottom: min(80%, 400px); max-width: 500px;
}
.feed-video-card {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .5rem; padding: .5rem .75rem;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none;
  color: var(--text); transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.feed-video-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent); background: var(--bg-input); box-shadow: 0 16px 34px rgba(0,0,0,.2);
}
.feed-video-card.video-platform-youtube {
  background: linear-gradient(135deg, rgba(255,0,0,.22), rgba(80,0,0,.12));
  border-color: rgba(255,0,0,.4);
  box-shadow: 0 2px 12px rgba(255,0,0,.1);
}
.feed-video-card.video-platform-tiktok {
  background: linear-gradient(135deg, rgba(255,0,80,.18), rgba(0,242,234,.14) 55%, rgba(0,242,234,.06));
  border-color: rgba(0,242,234,.38);
  box-shadow: 0 2px 12px rgba(0,242,234,.08);
}
.feed-video-card.video-platform-twitch {
  background: linear-gradient(135deg, rgba(145,70,255,.24), rgba(100,40,200,.1));
  border-color: rgba(145,70,255,.4);
  box-shadow: 0 2px 12px rgba(145,70,255,.1);
}
.feed-video-card.video-platform-twitter {
  background: linear-gradient(135deg, rgba(29,155,240,.22), rgba(15,80,140,.1));
  border-color: rgba(29,155,240,.4);
  box-shadow: 0 2px 12px rgba(29,155,240,.08);
}
.feed-video-thumb {
  position: relative; width: 100px; min-width: 100px; height: 56px;
  border-radius: 6px; overflow: hidden; background: #000;
}
.feed-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feed-video-thumb-empty { background: var(--bg-card); }
.feed-video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; background: rgba(0,0,0,.4);
  transition: background .15s;
}
.feed-video-card:hover .feed-video-play { background: rgba(0,0,0,.2); }
.feed-video-card-info {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem; flex-wrap: wrap;
}
.feed-video-card-cta { color: var(--accent); font-weight: 600; }

.feed-video-link {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .4rem; font-size: .85rem;
}

/* Feed trade cards */
.feed-trade-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .6rem .75rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.feed-trade-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--bg-input);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.feed-trade-completed {
  border-color: rgba(74,222,128,.25);
  background: linear-gradient(135deg, rgba(74,222,128,.06), rgba(0,0,0,0));
}
.feed-trade-completed:hover {
  border-color: rgba(74,222,128,.5);
}
.feed-trade-request {
  border-color: rgba(251,191,36,.2);
  background: linear-gradient(135deg, rgba(251,191,36,.05), rgba(0,0,0,0));
}
.feed-trade-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}
.feed-trade-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  flex-shrink: 0;
  object-fit: contain;
}
.feed-trade-item-info {
  min-width: 0;
}
.feed-trade-item-name {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-trade-item-sub {
  display: block;
  font-size: .7rem;
  color: var(--text-muted);
}
.feed-trade-arrow {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--text-muted);
  padding: 0 .25rem;
}
.feed-trade-fallback {
  margin-top: .3rem;
  font-size: .82rem;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .feed-trade-card { flex-wrap: wrap; gap: .35rem; }
  .feed-trade-item { flex: 1 1 40%; }
  .feed-trade-arrow { flex: 0 0 auto; }
}

.feed-quote {
  font-size: .85rem; color: var(--text); margin-top: .4rem;
  padding: .4rem .65rem; background: var(--bg-card);
  border-left: 3px solid var(--border-light); border-radius: var(--radius);
  font-style: italic;
}

.feed-empty {
  text-align: center; padding: 2rem 1rem; color: var(--text-muted);
  font-size: .9rem;
}

@media (max-width: 680px) {
  .feed-tab { padding: .5rem .85rem; font-size: .82rem; }
  .feed-video-embed { max-width: 100%; }
}

/* ─── Profile edit sections ─────────────────────────────────────────────────── */
.pe-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.25rem;
}
.pe-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }

/* ─── Profile edit: small item picker ───────────────────────────────────────── */
.item-search-sm { font-size: .82rem; padding: .4rem .6rem; }
.selected-item-sm { padding: .3rem .5rem; }
.selected-item-sm img { width: 24px; height: 24px; }

/* ─── Trade Unions ──────────────────────────────────────────────────────────── */
.union-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.union-card {
  display: flex; gap: 1rem; padding: 1.25rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: border-color .15s, transform .1s;
  color: var(--text); text-decoration: none;
}
.union-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.union-card-icon { font-size: 2rem; flex-shrink: 0; width: 48px; text-align: center; }
.union-card-body { flex: 1; min-width: 0; }
.union-card-header { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .25rem; }
.union-card-name { font-size: 1rem; font-weight: 700; margin: 0; }
.union-card-tag { font-size: .78rem; color: var(--accent); font-weight: 600; }
.union-card-desc { font-size: .82rem; color: var(--text-muted); margin: 0 0 .5rem; line-height: 1.5; }
.union-card-stats {
  display: flex; gap: 1rem; font-size: .75rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem;
}
.union-card-footer { font-size: .78rem; color: var(--text-muted); }

/* Union detail header */
.union-header {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: .5rem;
}
.union-header-icon { font-size: 2.5rem; flex-shrink: 0; }
.union-header-info { flex: 1; min-width: 200px; }
.union-header-name { font-size: 1.3rem; font-weight: 800; margin: 0; }
.union-header-tag { color: var(--accent); font-size: .9rem; font-weight: 600; }
.union-header-stats { display: flex; gap: .5rem; }

/* Union members list */
.union-members-list { display: flex; flex-direction: column; gap: 0; }
.union-member-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.union-member-row:last-child { border-bottom: none; }
.union-member-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #22c55e);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #000;
}
.union-member-info { display: flex; align-items: center; gap: .5rem; }
.union-member-name { font-weight: 600; color: var(--accent); font-size: .9rem; }
.union-member-actions { display: flex; gap: .25rem; margin-left: .5rem; }

/* Role badges */
.union-role-badge {
  font-size: .7rem; font-weight: 600; padding: .15rem .4rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.role-leader  { background: rgba(251,191,36,.15); color: #fbbf24; }
.role-officer { background: rgba(56,189,248,.15); color: #38bdf8; }
.role-member  { background: rgba(107,128,160,.1); color: var(--text-muted); }

/* Union detail page */
.union-detail-header {
  display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem;
}
.union-detail-header .union-stats-grid { width: 100%; margin: 0; }
.union-detail-header .profile-about-section { width: 100%; }
.union-detail-icon { font-size: 3rem; flex-shrink: 0; line-height: 1; }
.union-detail-info { flex: 1; min-width: 0; }
.union-detail-name { font-size: 1.4rem; font-weight: 800; margin: 0 0 .2rem; }
.union-detail-tag { color: var(--accent); font-size: 1rem; font-weight: 600; }
.union-detail-meta { font-size: .85rem; color: var(--text-muted); margin: 0 0 .6rem; }
.union-detail-meta a { color: var(--accent); }
.union-detail-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.union-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  margin: 1rem 0;
}
.union-stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem; text-align: center;
}
.union-stat-num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.union-stat-label { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }

.union-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem; margin-top: 1rem;
}
.union-panel-title { font-size: .95rem; font-weight: 600; margin: 0 0 .75rem; }

.union-main-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; margin-top: .5rem;
}
.union-main-left { min-width: 0; }
.union-main-right { min-width: 0; }

.union-app-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.union-app-row:last-child { border-bottom: none; }

.union-member-info { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }

.union-items-list { display: flex; flex-direction: column; gap: 0; }
.union-item-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.union-item-row:last-child { border-bottom: none; }

@media (max-width: 820px) {
  .union-main-grid { grid-template-columns: 1fr; }
  .union-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .union-detail-header { flex-direction: column; align-items: center; text-align: center; }
  .union-detail-actions { justify-content: center; }
}

/* Union application rows */
.union-app-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.union-app-row:last-child { border-bottom: none; }

/* ─── Admin panel ────────────────────────────────────────────────────────────── */
.admin-section { margin-bottom: 2.5rem; }
.admin-table-wrap { overflow-x: auto; margin-top: .75rem; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.admin-table th {
  text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
}
.admin-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg-hover); }
.admin-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ─── CMS settings ──────────────────────────────────────────────────────────── */
.cms-settings-page { max-width: 1200px; }
.cms-eyebrow {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.cms-page-copy {
  max-width: 760px;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
}
.cms-header-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.cms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.cms-card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.cms-card-wide { grid-column: 1 / -1; }
.cms-card-head { margin-bottom: 1rem; }
.cms-card-head h2 {
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.cms-card-head p {
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.6;
}
.cms-fields-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.cms-color-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: .75rem;
}
.cms-color-row input[type=color] {
  min-height: 50px;
  padding: .2rem;
  cursor: pointer;
}
.cms-preview-tile,
.cms-preview-panel {
  margin-top: .5rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.cms-preview-label,
.cms-preview-title {
  display: block;
  margin-bottom: .65rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.cms-brand-preview {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1rem;
}
.cms-brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,255,255,.04);
}
.cms-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .92rem;
  color: var(--text);
}
.cms-toggle input {
  width: 18px;
  height: 18px;
}
.cms-hero-preview {
  background: linear-gradient(135deg, #060d18 0%, #0a1525 45%, #080c12 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.cms-hero-preview h3 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: .75rem;
}
.cms-hero-preview p {
  color: var(--text-muted);
  max-width: 720px;
  margin-bottom: 1rem;
  line-height: 1.7;
}
.cms-bottom-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* ─── Logo upload ────────────────────────────────────────────────────────────── */
.cms-logo-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cms-logo-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.cms-logo-preview-wrap img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  padding: .5rem;
}
.cms-logo-preview-label {
  font-size: .75rem;
  color: var(--text-muted);
}
.cms-logo-upload-area {
  flex: 1;
  min-width: 180px;
  border: 2px dashed rgba(255,255,255,.15);
  border-radius: var(--radius);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.cms-logo-upload-area:hover,
.cms-logo-upload-area.drag-over {
  border-color: var(--accent);
  background: rgba(0,212,255,.04);
}
.cms-logo-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: .88rem;
  text-align: center;
}
#cms-logo-upload-progress {
  text-align: center;
  padding: 1rem;
  font-size: .88rem;
  color: var(--accent);
}
.cms-logo-url-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Feature flags grid ─────────────────────────────────────────────────────── */
.cms-flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem 1.5rem;
  margin-top: .25rem;
}
.cms-flag-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  user-select: none;
}
.cms-flag-toggle-wrap {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.cms-flag-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cms-flag-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  border-radius: 22px;
  transition: background .2s;
}
.cms-flag-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.cms-flag-checkbox:checked + .cms-flag-slider {
  background: var(--accent);
}
.cms-flag-checkbox:checked + .cms-flag-slider::before {
  transform: translateX(18px);
}
.cms-flag-label {
  font-size: .9rem;
  color: var(--text);
}
.cms-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 700px;
}
@media (max-width: 600px) {
  .cms-tools-grid { grid-template-columns: 1fr; }
}

/* ─── Item Tooltip ──────────────────────────────────────────────────────────── */
.item-tooltip {
  position: fixed;
  z-index: 9999;
  width: 300px;
  max-width: 92vw;
  background: #0c1018;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s;
  overflow: hidden;
}
.item-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.item-tooltip-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.item-tooltip-header img {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  flex-shrink: 0;
}
.item-tooltip-name {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
}
.item-tooltip-type {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .15rem;
}
.item-tooltip-body {
  padding: .65rem .85rem .75rem;
}
.item-tooltip-desc {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: .6rem;
}
.item-tooltip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}
.item-tooltip-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .4rem;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
}
.item-tooltip-tag.tag-value {
  background: rgba(255,200,0,.1);
  color: #fbbf24;
}
.item-tooltip-tag.tag-workbench {
  background: rgba(0,212,255,.1);
  color: var(--accent);
}
.item-tooltip-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem .75rem;
}
.item-tooltip-stat {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  padding: .15rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.item-tooltip-stat-label { color: var(--text-muted); }
.item-tooltip-stat-value { color: #fff; font-weight: 600; }
.item-tooltip-extras {
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.item-tooltip-extra {
  font-size: .73rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: .15rem;
}
.item-tooltip-extra strong {
  color: var(--text);
  font-weight: 600;
}
.item-tooltip-loading {
  padding: 1.25rem;
  text-align: center;
  font-size: .82rem;
  color: var(--text-muted);
}
/* Rarity accent bar on tooltip header */
.item-tooltip[data-rarity="common"]    .item-tooltip-header { border-top: 2px solid #94a3b8; }
.item-tooltip[data-rarity="uncommon"]  .item-tooltip-header { border-top: 2px solid #4ade80; }
.item-tooltip[data-rarity="rare"]      .item-tooltip-header { border-top: 2px solid #60a5fa; }
.item-tooltip[data-rarity="epic"]      .item-tooltip-header { border-top: 2px solid #c084fc; }
.item-tooltip[data-rarity="legendary"] .item-tooltip-header { border-top: 2px solid #fbbf24; }

[data-item-id] { cursor: help; }

/* ─── Safe area for notched phones ──────────────────────────────────────────── */
.navbar {
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  height: calc(64px + env(safe-area-inset-top));
}

/* ─── Install popup ──────────────────────────────────────────────────────────── */
.install-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 999; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.install-overlay.hidden { display: none; }
.install-popup {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem 1.5rem;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.install-popup img { margin-bottom: 1rem; }
.install-popup h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.install-popup p { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.25rem; line-height: 1.6; }
.install-popup-actions { display: flex; flex-direction: column; gap: .6rem; }
.install-popup-never { background: none; border: none; color: var(--text-dim); font-size: .8rem; cursor: pointer; margin-top: .25rem; text-decoration: underline; }
.site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }

/* ─── Trusted Holder badge / Safety Deposit ─────────────────────────────────── */
.holder-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.3);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
}
.deposit-status-pending   { color: #facc15; }
.deposit-status-active    { color: var(--success); }
.deposit-status-released  { color: var(--accent); }
.deposit-status-disputed  { color: var(--danger); }
.deposit-status-cancelled { color: var(--text-dim); }
.deposit-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem;
}
.deposit-card.status-active   { border-color: rgba(34,197,94,.35); }
.deposit-card.status-disputed { border-color: rgba(255,59,59,.35); }
.deposit-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; flex-wrap: wrap; gap: .5rem; }
.deposit-card-item   { display: flex; align-items: center; gap: .75rem; }
.deposit-card-meta   { font-size: .8rem; color: var(--text-muted); margin-top: .5rem; }
.deposit-card-meta span { margin-right: 1rem; }
.deposit-card-actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.guarantee-banner {
  background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.25);
  border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1.5rem;
  display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem;
}
.guarantee-banner svg { flex-shrink: 0; color: var(--accent); margin-top: .1rem; }
.strike-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  background: rgba(255,59,59,.12); border: 1px solid rgba(255,59,59,.3);
  color: var(--danger); font-size: .72rem; font-weight: 700;
  padding: .2rem .45rem; border-radius: 4px;
}
.holder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.holder-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.holder-card-name   { font-size: 1rem; font-weight: 700; }
.holder-card-bio    { font-size: .85rem; color: var(--text-muted); flex: 1; }
.holder-card-fee    { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .5rem .6rem; background: var(--bg-hover); border-radius: var(--radius); }
.holder-card-stats  { font-size: .78rem; color: var(--text-dim); }
.holder-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .25rem; }

/* ─── Holder applications / committee voting ────────────────────────────────── */
.application-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: .75rem;
}
.application-card-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem; margin-bottom: .25rem;
}
.vote-bar { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.vote-yes { color: var(--success); font-weight: 700; }
.vote-no  { color: var(--danger);  font-weight: 700; }
.apply-section {
  margin-top: 2.5rem; padding: 1.25rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.apply-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }

/* ─── Profile wanted items ───────────────────────────────────────────────────── */
.wanted-grid {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.wanted-item {
  display: flex; align-items: center; gap: .55rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: .5rem .75rem;
  min-width: 0;
}
.wanted-item-icon {
  border-radius: 4px; background: var(--bg-hover); flex-shrink: 0;
}
.wanted-item-icon-placeholder {
  width: 36px; height: 36px; border-radius: 4px; background: var(--bg-hover); flex-shrink: 0;
}
.wanted-item-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wanted-item-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wanted-remove-btn {
  background: none; border: none; color: var(--text-dim); font-size: .8rem;
  cursor: pointer; padding: .1rem .25rem; margin-left: .25rem; border-radius: 3px; flex-shrink: 0;
}
.wanted-remove-btn:hover { color: var(--danger); background: rgba(255,59,59,.1); }

/* ─── Store ──────────────────────────────────────────────────────────────────── */
.store-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.store-verified-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  color: var(--success); font-size: .78rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 20px;
}
.store-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.store-grid-featured {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.store-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem; position: relative;
  transition: border-color .15s;
}
.store-card:hover { border-color: var(--border-light); }
.store-card-featured { border-color: rgba(251,146,60,.4); background: rgba(251,146,60,.04); }
.store-card-sold-out { opacity: .55; }
.store-featured-badge {
  position: absolute; top: .75rem; right: .75rem;
  background: rgba(251,146,60,.15); border: 1px solid rgba(251,146,60,.4);
  color: #fb923c; font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 20px;
}
.store-sold-out-badge {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(255,59,59,.15); border: 1px solid rgba(255,59,59,.35);
  color: var(--danger); font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 20px;
}
.store-card-icon { display: flex; justify-content: center; padding: .5rem 0; }
.store-card-icon img { border-radius: 8px; background: var(--bg-hover); }
.store-card-body { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.store-card-name { font-size: 1rem; font-weight: 700; }
.store-card-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.store-card-stock { font-size: .75rem; color: #facc15; }
.store-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.store-price { font-size: 1.25rem; font-weight: 800; color: var(--success); }
.store-total-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; background: var(--bg-hover); border-radius: var(--radius); }
.store-order-status { font-size: .78rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; }
.store-order-status.status-pending   { color: #facc15; background: rgba(250,204,21,.1); }
.store-order-status.status-paid      { color: var(--info); background: rgba(56,189,248,.1); }
.store-order-status.status-delivered { color: var(--success); background: rgba(34,197,94,.1); }
.store-order-status.status-cancelled { color: var(--text-dim); background: var(--bg-hover); }
.store-order-status.status-refunded  { color: var(--danger); background: rgba(255,59,59,.1); }
.store-delivery-protocol {
  background: rgba(0,212,255,.05); border: 1px solid rgba(0,212,255,.2);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.delivery-protocol-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: var(--accent); margin-bottom: .5rem; }
.delivery-steps { padding-left: 1.2rem; margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.9; }
.crypto-wallet-box {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem;
}
/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--text-dim);
  font-size: 1.1rem; cursor: pointer; padding: .2rem .4rem; border-radius: 4px;
}
.modal-close:hover { color: var(--text); background: var(--bg-hover); }
.modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }

.main-content { padding-bottom: env(safe-area-inset-bottom); }

/* ─── Trade Escrow ─────────────────────────────────────────────────────────── */
.escrow-status-banner {
  padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem;
  font-weight: 600; font-size: .9rem; border: 1px solid var(--border);
}
.escrow-status-pending    { background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.3); color: #facc15; }
.escrow-status-accepted   { background: rgba(0,212,255,.07); border-color: rgba(0,212,255,.25); color: var(--accent); }
.escrow-status-depositing { background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.3); color: #fb923c; }
.escrow-status-held       { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.35); color: #a78bfa; }
.escrow-status-completed  { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); color: var(--success); }
.escrow-status-disputed   { background: rgba(255,59,59,.08); border-color: rgba(255,59,59,.3); color: var(--danger); }
.escrow-status-cancelled  { background: var(--bg-hover); border-color: var(--border); color: var(--text-dim); }

.escrow-items-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  align-items: center; margin-bottom: 1.25rem;
}
.escrow-item-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem;
}
.escrow-item-label {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .75rem; color: var(--text-dim); margin-bottom: .5rem;
}
.escrow-item-label strong { color: var(--text); font-size: .82rem; }
.escrow-item-icon { width: 48px; height: 48px; object-fit: contain; border-radius: 4px; background: var(--bg-hover); display: block; margin-bottom: .4rem; }
.escrow-item-name { font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.escrow-item-meta { font-size: .75rem; color: var(--text-dim); margin-bottom: .4rem; }
.escrow-deposit-flag { font-size: .75rem; margin-top: .4rem; color: var(--text-dim); }
.escrow-deposit-flag.deposited { color: var(--success); }
.escrow-received-flag { font-size: .75rem; margin-top: .2rem; color: var(--text-dim); }
.escrow-received-flag.received { color: var(--success); }
.escrow-arrow { font-size: 1.5rem; color: var(--text-dim); text-align: center; }

.escrow-holder-info {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .65rem 1rem; font-size: .85rem;
  margin-bottom: 1rem;
}
.escrow-holder-info svg { color: var(--accent); flex-shrink: 0; }

.escrow-notes {
  font-size: .82rem; color: var(--text-muted); border-left: 2px solid var(--border);
  padding-left: .6rem; margin-bottom: 1rem;
}

.escrow-steps {
  display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem;
}
.escrow-step {
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; color: var(--text-dim);
}
.escrow-step.done { color: var(--success); }
.step-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.escrow-step.done .step-dot { background: var(--success); border-color: var(--success); color: #000; }

.you-badge {
  background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.3);
  color: var(--accent); font-size: .65rem; font-weight: 700;
  padding: .1rem .3rem; border-radius: 3px;
}

/* Escrow create form */
.escrow-create-form { max-width: 680px; }
.form-section { margin-bottom: 1.75rem; }
.form-section-title {
  font-size: .92rem; font-weight: 700; color: var(--accent);
  margin-bottom: .75rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.holder-select-grid { display: flex; flex-direction: column; gap: .6rem; }
.holder-select-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem; cursor: pointer;
  transition: border-color .15s;
}
.holder-select-card:hover { border-color: var(--accent-dim); }
.holder-select-card.selected { border-color: var(--accent); background: rgba(0,212,255,.05); }
.holder-select-name { font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.duration-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.duration-chip {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .85rem; cursor: pointer;
  font-size: .82rem; font-weight: 600; transition: border-color .15s;
}
.duration-chip:hover { border-color: var(--accent-dim); }
.duration-chip.selected { border-color: var(--accent); background: rgba(0,212,255,.06); color: var(--accent); }
.chip-fee { font-size: .68rem; font-weight: 400; color: var(--text-dim); margin-top: .1rem; }
.duration-chip.selected .chip-fee { color: var(--accent-dim); }

/* Escrow list (my-escrows.php) */
.escrow-list { display: flex; flex-direction: column; gap: .5rem; }
.escrow-list-row {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: .9rem 1rem;
  transition: border-color .15s, background .15s;
}
.escrow-list-row:hover { border-color: var(--accent-dim); background: var(--bg-hover); }
.escrow-list-row.disputed { border-color: rgba(255,59,59,.4); }
.escrow-row-items { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.escrow-row-item-name { font-weight: 600; font-size: .88rem; }
.escrow-row-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); }
.escrow-empty { color: var(--text-muted); padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Escrow status badges */
.escrow-badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .15rem .4rem; border-radius: 3px;
}
.escrow-badge-pending    { background: rgba(250,204,21,.12); color: #facc15; }
.escrow-badge-accepted   { background: rgba(0,212,255,.1); color: var(--accent); }
.escrow-badge-depositing { background: rgba(249,115,22,.1); color: #fb923c; }
.escrow-badge-held       { background: rgba(139,92,246,.12); color: #a78bfa; }
.escrow-badge-completed  { background: rgba(34,197,94,.1); color: var(--success); }
.escrow-badge-disputed   { background: rgba(255,59,59,.1); color: var(--danger); }
.escrow-badge-cancelled  { background: var(--bg-hover); color: var(--text-dim); }

@media (max-width: 600px) {
  .escrow-items-grid { grid-template-columns: 1fr; }
  .escrow-arrow { transform: rotate(90deg); text-align: center; }
}

/* ─── Security Escorts ─────────────────────────────────────────────────────── */
.escort-post-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 2rem;
}
.escort-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 560px) { .escort-form-grid { grid-template-columns: 1fr; } }

.escort-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
}
.escort-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem;
}
.escort-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .65rem; gap: .5rem; flex-wrap: wrap;
}
.escort-card-details { display: flex; flex-direction: column; gap: .35rem; }
.escort-detail-row {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--text-muted);
}
.escort-detail-row svg { flex-shrink: 0; color: var(--text-dim); }

/* ─── Reviews ──────────────────────────────────────────────────────────────── */
.rep-bar-wrap { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.rep-bar { flex:1; height:8px; border-radius:4px; background:var(--bg-hover); overflow:hidden; }
.rep-bar-fill { height:100%; border-radius:4px; background:var(--success); transition:width .3s; }
.rep-bar.negative .rep-bar-fill { background:var(--danger); }
.rep-summary { font-size:.82rem; color:var(--text-muted); white-space:nowrap; }

.review-list { display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem; }
.review-row {
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.85rem 1rem; border-radius:var(--radius-lg);
  background:var(--bg); border:1px solid var(--border);
  transition: border-color .15s;
}
.review-row:hover { border-color: var(--border-light); }
.review-thumb {
  font-size:1.2rem; flex-shrink:0;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--bg-card); border:1px solid var(--border);
}
.review-body { flex:1; min-width:0; }
.review-meta { font-size:.75rem; color:var(--text-dim); margin-top:.3rem; }
.review-comment {
  font-size:.85rem; color:var(--text); margin-top:.35rem; line-height:1.5;
  padding:.5rem .65rem; background:var(--bg-card); border-radius:var(--radius);
  border-left:3px solid var(--border-light);
}

.rate-form-box {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1rem 1.25rem; margin-top:1rem;
}
.rating-toggle { display:flex; gap:.5rem; margin-bottom:.6rem; }
.rating-btn {
  flex:1; padding:.5rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg-hover);
  cursor:pointer; font-size:.88rem; font-weight:600;
  transition:border-color .15s, background .15s; color:var(--text);
}
.rating-btn.selected-pos { border-color:var(--success); background:rgba(34,197,94,.1); color:var(--success); }
.rating-btn.selected-neg { border-color:var(--danger);  background:rgba(255,59,59,.1);  color:var(--danger); }

/* ─── Live Trade Ticker ─────────────────────────────────────────────────────── */
.trade-ticker {
  display:flex; align-items:center; border-top:1px solid var(--border);
  overflow:hidden; height:36px; position:relative;
}
.trade-ticker-label {
  display:flex; align-items:center; gap:6px; padding:0 12px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--danger);
  background:rgba(6,10,18,.94); z-index:2; white-space:nowrap;
  border-right:1px solid var(--border);
}
.trade-ticker-label .live-dot {
  width:6px; height:6px; border-radius:50%; background:var(--danger);
  animation:live-pulse 1.5s ease-in-out infinite;
}
.trade-ticker-track { flex:1; overflow:hidden; position:relative; }
.trade-ticker-scroll {
  display:flex; gap:2rem; white-space:nowrap;
  animation:ticker-scroll 30s linear infinite;
}
.trade-ticker-scroll:hover { animation-play-state:paused; }
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-trade {
  display:inline-flex; align-items:center; gap:6px; padding:0 8px;
  color:var(--text); text-decoration:none; font-size:.78rem; transition:opacity .15s;
}
.ticker-trade:hover { opacity:.7; color:var(--text); }
.ticker-icon { width:20px; height:20px; border-radius:3px; flex-shrink:0; }
.ticker-item { font-weight:600; }
.ticker-arrow { color:var(--text-muted); font-size:.7rem; }
.ticker-trader { color:var(--accent); font-size:.7rem; margin-left:4px; }
.ticker-time { color:var(--text-dim); font-size:.65rem; }
@media(max-width:600px){
  .trade-ticker { height:32px; }
  .ticker-trader, .ticker-time { display:none; }
  .ticker-trade { font-size:.72rem; gap:4px; }
  .trade-ticker-scroll { animation-duration:12s; }
}

/* ─── Animated Stats Counter ────────────────────────────────────────────────── */
.hp-stat-num[data-count] {
  transition: none;
}
@keyframes count-pop {
  0% { transform:scale(1); }
  50% { transform:scale(1.15); }
  100% { transform:scale(1); }
}
.hp-stat-num.counted { animation: count-pop .3s ease; }

/* ─── Trending Items ────────────────────────────────────────────────────────── */
.trending-section { margin-top:1.5rem; }
.trending-grid {
  list-style:none; display:flex; flex-direction:column; gap:0;
}
.trending-card {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 0; border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--text);
  font-size:.85rem;
}
.trending-card:last-child { border-bottom:none; }
.trending-card:hover .trending-card-name { color:var(--accent); }
.trending-card img { display:none; }
.trending-rank { font-size:.78rem; color:var(--text-dim); width:20px; text-align:right; flex-shrink:0; }
.trending-card-name { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3; }
.trending-card-count { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }

/* ─── Price Check / Fairness Indicator ──────────────────────────────────────── */
.trade-fairness {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  margin-top:1rem;
}
.fairness-icon { font-size:1.4rem; flex-shrink:0; }
.fairness-info { flex:1; }
.fairness-label { font-size:.78rem; color:var(--text-muted); margin-bottom:.2rem; }
.fairness-bar { height:6px; background:var(--bg-hover); border-radius:3px; overflow:hidden; }
.fairness-bar-fill { height:100%; border-radius:3px; transition:width .6s ease; }
.fairness-bar-fill.fair { background:var(--success); }
.fairness-bar-fill.slight { background:#f59e0b; }
.fairness-bar-fill.uneven { background:var(--danger); }
.fairness-text { font-size:.75rem; margin-top:.25rem; }
.fairness-text.fair { color:var(--success); }
.fairness-text.slight { color:#f59e0b; }
.fairness-text.uneven { color:var(--danger); }

/* ─── Wanted Item Toast Notifications ───────────────────────────────────────── */
.toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9000;
  display:flex; flex-direction:column; gap:.5rem; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:.6rem;
  background:var(--bg-card); border:1px solid var(--accent);
  border-radius:var(--radius); padding:.6rem .9rem;
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 20px var(--accent-glow);
  pointer-events:auto; max-width:320px;
  animation:toast-in .4s ease forwards;
  cursor:pointer;
}
.toast.toast-out { animation:toast-out .3s ease forwards; }
@keyframes toast-in { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes toast-out { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(60px)} }
.toast-icon { width:32px; height:32px; border-radius:4px; flex-shrink:0; }
.toast-body { flex:1; }
.toast-title { font-size:.78rem; font-weight:600; color:var(--accent); }
.toast-text { font-size:.72rem; color:var(--text-muted); }
@media(max-width:600px){
  .toast-container { bottom:1rem; right:.75rem; left:.75rem; }
  .toast { max-width:100%; }
}

/* ─── Rarity Glow Animations ───────────────────────────────────────────────── */
@keyframes rarity-glow-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--glow-color); }
  50% { box-shadow: 0 0 16px var(--glow-color), 0 0 24px var(--glow-color); }
}
[data-item-id] {
  transition: box-shadow .3s ease;
}
.rarity-glow-common    { --glow-color: rgba(255,255,255,.6);    box-shadow: 0 0 8px rgba(255,255,255,.4); }
.rarity-glow-uncommon  { --glow-color: var(--rarity-uncommon);  box-shadow: 0 0 8px var(--rarity-uncommon); animation: rarity-glow-pulse 3s ease-in-out infinite; }
.rarity-glow-rare      { --glow-color: var(--rarity-rare);      box-shadow: 0 0 10px var(--rarity-rare); animation: rarity-glow-pulse 2.5s ease-in-out infinite; }
.rarity-glow-epic      { --glow-color: var(--rarity-epic);      box-shadow: 0 0 12px var(--rarity-epic); animation: rarity-glow-pulse 2s ease-in-out infinite; }
.rarity-glow-legendary { --glow-color: var(--rarity-legendary); box-shadow: 0 0 14px var(--rarity-legendary); animation: rarity-glow-pulse 1.8s ease-in-out infinite; }
.rarity-glow-exotic    { --glow-color: var(--rarity-exotic);    box-shadow: 0 0 16px var(--rarity-exotic); animation: rarity-glow-pulse 1.5s ease-in-out infinite; }

/* ─── Confetti ──────────────────────────────────────────────────────────────── */
.confetti-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:10000;
}

/* ─── Leaderboard Page ──────────────────────────────────────────────────────── */
.lb-page-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem;
}
@media(max-width:768px){ .lb-page-grid { grid-template-columns:1fr; } }
.lb-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem; overflow:hidden;
}
.lb-card-title {
  font-size:1rem; font-weight:700; margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.lb-table { width:100%; border-collapse:collapse; }
.lb-table th {
  text-align:left; font-size:.72rem; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; padding:.4rem .5rem; border-bottom:1px solid var(--border);
}
.lb-table td {
  padding:.55rem .5rem; font-size:.85rem; border-bottom:1px solid rgba(30,42,58,.5);
}
.lb-table tr:hover td { background:var(--bg-hover); }
.lb-rank { font-weight:700; width:32px; text-align:center; }
.lb-rank-1 { color:#fbbf24; }
.lb-rank-2 { color:#9ca3af; }
.lb-rank-3 { color:#cd7f32; }
.lb-name-link { color:var(--accent); font-weight:600; }
.lb-stat { color:var(--text-muted); font-size:.8rem; }
.lb-rep-good { color:var(--success); font-weight:600; }
.lb-rep-ok { color:#f59e0b; }
.lb-rep-bad { color:var(--danger); }

/* ─── Nav Search ───────────────────────────────────────────────────────────── */
.nav-search {
  position:absolute; top:100%; right:0; left:0;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  padding:.5rem .75rem; display:none; z-index:1100;
}
.nav-search.open { display:flex; align-items:center; gap:.5rem; }
.nav-search input {
  flex:1; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius); padding:.45rem .75rem; color:var(--text);
  font-size:.88rem; outline:none; transition:border-color .2s;
}
.nav-search input:focus { border-color:var(--accent); }
.nav-search-toggle {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:6px; display:flex; align-items:center; margin-left:auto;
  order:10; transition:color .15s;
}
.nav-search-toggle:hover { color:var(--accent); }
.nav-search-dropdown {
  position:absolute; top:100%; left:.75rem; right:.75rem;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius); max-height:320px;
  overflow-y:auto; z-index:1200; box-shadow:var(--shadow);
}
.nav-search-section {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim); padding:.5rem .75rem .25rem; font-weight:600;
}
.nav-search-row {
  display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem;
  color:var(--text); font-size:.85rem; transition:background .15s;
}
.nav-search-row:hover { background:var(--bg-hover); color:var(--text); }
.nav-search-row img { border-radius:4px; flex-shrink:0; }
.nav-search-row svg { flex-shrink:0; color:var(--text-muted); }
.nav-search-empty {
  padding:.75rem; text-align:center; color:var(--text-dim); font-size:.85rem;
}

/* ─── Mobile Bottom Nav ────────────────────────────────────────────────────── */
.mobile-bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:var(--bg-card); border-top:1px solid var(--border);
  z-index:9000; padding:.25rem 0; padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-bottom-nav {
  display:none;
  grid-template-columns:repeat(5, 1fr);
}
@media(max-width:768px) {
  .mobile-bottom-nav { display:grid; }
  body { padding-bottom:70px; }
}
.mobile-nav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:.4rem 0; color:var(--text-muted); font-size:.65rem;
  text-decoration:none; transition:color .15s;
}
.mobile-nav-item svg { flex-shrink:0; }
.mobile-nav-item:hover,
.mobile-nav-item:active { color:var(--accent); }
.mobile-nav-post {
  color:var(--accent); font-weight:700;
}
.mobile-nav-post svg { stroke:var(--accent); }

/* ─── DM Inbox ─────────────────────────────────────────────────────────────── */
.dm-inbox-list {
  display:flex; flex-direction:column; gap:0;
}
.dm-inbox-row {
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem;
  border-bottom:1px solid var(--border); color:var(--text);
  text-decoration:none; transition:background .15s;
}
.dm-inbox-row:hover { background:var(--bg-hover); color:var(--text); }
.dm-inbox-avatar {
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.dm-inbox-avatar-init {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-input); color:var(--accent); font-weight:700;
  font-size:1.1rem; border:1px solid var(--border);
}
.dm-inbox-info { flex:1; min-width:0; }
.dm-inbox-name {
  font-weight:600; font-size:.9rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.dm-inbox-preview {
  font-size:.8rem; color:var(--text-muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}
.dm-inbox-time {
  font-size:.72rem; color:var(--text-dim); white-space:nowrap; flex-shrink:0;
}

/* ─── Trade Rep Tier Badges ────────────────────────────────────────────────── */
.tier-bronze   { color:#cd7f32; }
.tier-silver   { color:#9ca3af; }
.tier-gold     { color:#fbbf24; }
.tier-platinum { color:#e5e7eb; text-shadow:0 0 6px rgba(229,231,235,.5); }

/* ─── Trade History ────────────────────────────────────────────────────────── */
.history-list { display:flex; flex-direction:column; gap:0; }
.history-row {
  display:flex; align-items:center; gap:.75rem; padding:.7rem .5rem;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.history-items {
  display:flex; align-items:center; gap:.4rem; flex:1; min-width:0; font-size:.88rem;
}
.history-items img { border-radius:4px; flex-shrink:0; }
.history-meta {
  display:flex; align-items:center; gap:.75rem; flex-shrink:0;
}
.history-trader {
  font-size:.82rem; font-weight:600; color:var(--accent);
}
.history-time {
  font-size:.72rem; color:var(--text-dim); white-space:nowrap;
}
@media(max-width:600px) {
  .history-row { flex-direction:column; align-items:flex-start; gap:.35rem; }
  .history-items { flex-wrap:wrap; }
}

/* ─── Union Chat ───────────────────────────────────────────────────────────── */
.union-chat-messages {
  height:280px; overflow-y:auto; padding:.5rem; margin-bottom:.5rem;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
}
.union-chat-msg { margin-bottom:.5rem; }
.union-chat-author {
  font-size:.82rem; font-weight:600; color:var(--accent); margin-right:.35rem;
}
.union-chat-time {
  font-size:.68rem; color:var(--text-dim);
}
.union-chat-body {
  font-size:.88rem; color:var(--text); margin-top:.1rem; word-break:break-word;
}
.union-chat-form {
  display:flex; gap:.5rem; align-items:center;
}

/* ─── Price Check ──────────────────────────────────────────────────────────── */
.price-check-item {
  display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem;
  padding:1rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.price-check-item img { border-radius:var(--radius); flex-shrink:0; }
.price-stats-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; margin-bottom:1.25rem;
}
@media(max-width:600px) { .price-stats-grid { grid-template-columns:repeat(2, 1fr); } }
.price-stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:.75rem; text-align:center;
}
.price-stat-num {
  display:block; font-size:1.4rem; font-weight:700; color:var(--accent);
}
.price-stat-label {
  display:block; font-size:.72rem; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; margin-top:.15rem;
}
.price-demand-bar {
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem;
  padding:.6rem .75rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); font-size:.88rem;
}
.price-demand-label { font-weight:600; color:var(--text); }
.price-demand-value { font-weight:700; }
.price-trade-list {
  margin-bottom:1.25rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:.75rem;
}
.price-trade-row {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .25rem;
  color:var(--text); text-decoration:none; font-size:.85rem;
  border-bottom:1px solid rgba(30,42,58,.4); transition:background .15s;
}
.price-trade-row:hover { background:var(--bg-hover); color:var(--text); }
.price-trade-row:last-child { border-bottom:none; }
.price-trade-count {
  font-size:.75rem; color:var(--text-muted); flex-shrink:0;
}