/* ============================================================
   TornTrade — assets/css/main.css
   Central stylesheet. All pages link to this.
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0c0c10;
  --bg2:      #111116;
  --bg3:      #18181f;
  --surface:  #1e1e27;
  --surface2: #252530;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.11);
  --text:     #ededf5;
  --muted:    #7c7c94;
  --faint:    #3a3a50;
  --gold:     #d4a843;
  --gold-lt:  #efc96b;
  --gold-bg:  rgba(212,168,67,0.10);
  --gold-bd:  rgba(212,168,67,0.22);
  --green:    #50b87a;
  --green-bg: rgba(80,184,122,0.10);
  --green-bd: rgba(80,184,122,0.22);
  --red:      #d95f5f;
  --red-bg:   rgba(217,95,95,0.10);
  --red-bd:   rgba(217,95,95,0.22);
  --blue:     #5b9cf5;
  --r:        0.75rem;
  --r2:       1rem;
  --nav-h:    60px;
}

html  { scroll-behavior: smooth; height: 100%; }
body  {
  font-family: 'Outfit', sans-serif;
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  overflow-x:  hidden;
  font-size:   16px;
  line-height: 1.6;
  display:     flex;
  flex-direction: column;
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
button { font-family: 'Outfit', sans-serif; }

/* ── Typography helpers ───────────────────────────────────── */
.mono  { font-family: 'JetBrains Mono', monospace; }
.gold  { color: var(--gold);  }
.muted { color: var(--muted); }
.green { color: var(--green); }
.red   { color: var(--red);   }
.faint { color: var(--faint); }

/* ── Layout ───────────────────────────────────────────────── */
.container {
  max-width: 1120px;
  margin:    0 auto;
  padding:   0 2rem;
  width:     100%;
}
.container--wide {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 2rem;
  width:     100%;
}
.page { flex: 1; display: flex; flex-direction: column; }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position:         sticky;
  top:              0;
  z-index:          200;
  height:           var(--nav-h);
  display:          flex;
  align-items:      center;
  background:       rgba(12,12,16,0.95);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:    1px solid var(--border);
}
.nav__inner {
  display:     flex;
  align-items: center;
  gap:         1rem;
}
.nav__logo {
  display:      flex;
  align-items:  center;
  gap:          9px;
  font-size:    1.05rem;
  font-weight:  600;
  letter-spacing: -0.01em;
  flex-shrink:  0;
}
.nav__logo-mark {
  width:         30px;
  height:        30px;
  background:    var(--gold);
  border-radius: 7px;
  display:       grid;
  place-items:   center;
  font-size:     14px;
  color:         #0c0c10;
  font-weight:   700;
}
.nav__logo-text span { color: var(--gold); }

.nav__links {
  display:     flex;
  gap:         2px;
  list-style:  none;
  margin-left: 0.75rem;
}
.nav__link {
  font-size:    0.85rem;
  color:        var(--muted);
  padding:      0.35rem 0.75rem;
  border-radius: 6px;
  transition:   all 0.15s;
  display:      flex;
  align-items:  center;
  gap:          5px;
}
.nav__link:hover,
.nav__link--active { color: var(--text); background: var(--surface); }

.nav__right {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         0.625rem;
}
.nav__user-pill {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: 100px;
  padding:       4px 12px 4px 4px;
  cursor:        pointer;
  font-size:     0.85rem;
  font-weight:   500;
  transition:    border-color 0.15s;
}
.nav__user-pill:hover { border-color: var(--faint); }
.nav__user-avatar {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    var(--gold);
  display:       grid;
  place-items:   center;
  font-size:     11px;
  font-weight:   700;
  color:         #0c0c10;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        0.5rem 1.125rem;
  border-radius:  var(--r);
  font-family:    'Outfit', sans-serif;
  font-size:      0.875rem;
  font-weight:    500;
  cursor:         pointer;
  border:         none;
  transition:     all 0.18s;
  white-space:    nowrap;
  text-align:     center;
  justify-content: center;
}
.btn--ghost {
  background: transparent;
  color:      var(--muted);
  border:     1px solid var(--border2);
}
.btn--ghost:hover { color: var(--text); background: var(--surface); border-color: var(--faint); }

.btn--gold { background: var(--gold); color: #0c0c10; font-weight: 600; }
.btn--gold:hover { background: var(--gold-lt); }

.btn--red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-bd); }
.btn--red:hover { background: rgba(217,95,95,0.18); }

.btn--green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bd); }
.btn--green:hover { background: rgba(80,184,122,0.18); }

.btn--sm  { padding: 0.3rem 0.75rem;  font-size: 0.78rem; border-radius: 6px; }
.btn--lg  { padding: 0.75rem 1.75rem; font-size: 0.9375rem; border-radius: var(--r2); }
.btn--block { width: 100%; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Panels / cards ───────────────────────────────────────── */
.panel {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--r2);
  overflow:      hidden;
}
.panel__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.875rem 1.25rem;
  border-bottom:   1px solid var(--border);
  gap:             0.75rem;
  flex-wrap:       wrap;
}
.panel__title {
  font-size:   0.9rem;
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         7px;
}
.panel__action {
  font-size:  0.78rem;
  color:      var(--muted);
  transition: color 0.15s;
}
.panel__action:hover { color: var(--gold); }
.panel__foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.875rem 1.25rem;
  border-top:      1px solid var(--border);
}

/* ── Data table ───────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:         var(--faint);
  padding:       0.7rem 1.25rem;
  text-align:    left;
  border-bottom: 1px solid var(--border);
  font-weight:   500;
  white-space:   nowrap;
}
.data-table td {
  padding:        0.8rem 1.25rem;
  font-size:      0.875rem;
  border-bottom:  1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(255,255,255,0.018); cursor: pointer; }

/* ── Item cell (image + name) ─────────────────────────────── */
.item-cell { display: flex; align-items: center; gap: 10px; }
.item-img  {
  width:         36px;
  height:        36px;
  border-radius: 8px;
  background:    var(--surface);
  display:       grid;
  place-items:   center;
  overflow:      hidden;
  flex-shrink:   0;
}
.item-img img {
  width:            100%;
  height:           100%;
  object-fit:       contain;
  image-rendering:  pixelated;
}
.item-img--sm { width: 28px; height: 28px; border-radius: 6px; }
.item-name    { font-weight: 500; font-size: 0.875rem; line-height: 1.2; }
.item-cat     { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.65rem;
  padding:     0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge--green   { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bd); }
.badge--red     { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-bd); }
.badge--gold    { background: var(--gold-bg);  color: var(--gold);  border: 1px solid var(--gold-bd); }
.badge--surface { background: var(--surface);  color: var(--muted); border: 1px solid var(--border2); }

/* ── Price & change ───────────────────────────────────────── */
.price { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 500; }
.price--lg { font-size: 1.25rem; }
.chg  { font-family: 'JetBrains Mono', monospace; font-size: 0.77rem; }
.chg--up   { color: var(--green); }
.chg--down { color: var(--red);   }
.chg--flat { color: var(--muted); }

/* ── Stars / rep ──────────────────────────────────────────── */
.stars { color: var(--gold); letter-spacing: 0.04em; }
.stars--sm { font-size: 0.75rem; }
.rep-num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--muted); margin-left: 3px; }

/* ── Seller cell ──────────────────────────────────────────── */
.seller-cell  { display: flex; align-items: center; gap: 7px; }
.seller-avatar {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  background:    var(--surface2);
  display:       grid;
  place-items:   center;
  font-size:     10px;
  font-weight:   600;
  color:         var(--muted);
  flex-shrink:   0;
}
.seller-avatar--lg { width: 36px; height: 36px; font-size: 14px; }
.seller-a { color: var(--blue); font-size: 0.85rem; transition: color 0.15s; }
.seller-a:hover { color: #91bfff; }

/* ── Form inputs ──────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field__label { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.field__hint  { font-size: 0.775rem; color: var(--faint); font-weight: 300; line-height: 1.5; }
.field__hint a { color: var(--gold); }
.field__wrap  { position: relative; }
.field__wrap--icon .input { padding-left: 2.375rem; }
.field__icon {
  position:         absolute;
  left:             11px;
  top:              50%;
  transform:        translateY(-50%);
  color:            var(--faint);
  pointer-events:   none;
}

.input {
  width:         100%;
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: var(--r);
  padding:       0.6875rem 1rem;
  font-family:   'Outfit', sans-serif;
  font-size:     0.9rem;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.1); }
.input--mono { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; letter-spacing: 0.03em; }
.input--sm   { padding: 0.4rem 0.75rem; font-size: 0.85rem; }

select.input {
  appearance:         none;
  -webkit-appearance: none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c7c94' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right 0.75rem center;
  padding-right:      2.25rem;
  cursor:             pointer;
}

.range-input {
  width:         100%;
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: 6px;
  padding:       0.375rem 0.625rem;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.78rem;
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.15s;
}
.range-input:focus { border-color: var(--gold); }
.range-input::placeholder { color: var(--faint); }

input[type="range"] { accent-color: var(--gold); width: 100%; }
input[type="checkbox"] { accent-color: var(--gold); cursor: pointer; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
  padding:       0.75rem 1rem;
  border-radius: var(--r);
  font-size:     0.85rem;
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  line-height:   1.5;
}
.alert--error   { background: var(--red-bg);   border: 1px solid var(--red-bd);   color: #f08080; }
.alert--success { background: var(--green-bg); border: 1px solid var(--green-bd); color: #7dd6a0; }
.alert--info    { background: var(--gold-bg);  border: 1px solid var(--gold-bd);  color: var(--gold); }

/* ── Live badge ───────────────────────────────────────────── */
.live-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.72rem;
  color:         var(--green);
  background:    var(--green-bg);
  border:        1px solid var(--green-bd);
  padding:       0.2rem 0.6rem;
  border-radius: 100px;
}
.live-dot {
  width:         5px;
  height:        5px;
  background:    var(--green);
  border-radius: 50%;
  animation:     blink 2.5s infinite;
}

/* ── Segment controls ─────────────────────────────────────── */
.seg-group {
  display:       flex;
  background:    var(--surface);
  border-radius: var(--r);
  padding:       3px;
  gap:           2px;
}
.seg {
  padding:       0.375rem 0.875rem;
  border-radius: 7px;
  border:        none;
  background:    transparent;
  font-size:     0.82rem;
  font-weight:   500;
  color:         var(--muted);
  cursor:        pointer;
  transition:    all 0.15s;
}
.seg:hover { color: var(--text); }
.seg--active { background: var(--bg2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* Mode toggle (login page) */
.mode-toggle { display: flex; background: var(--surface); border-radius: var(--r); padding: 3px; }
.mode-btn    { flex: 1; padding: 0.5rem; border-radius: 8px; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.18s; }
.mode-btn--active { background: var(--bg3); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* ── Page headers ─────────────────────────────────────────── */
.page-header {
  background:    var(--bg2);
  border-bottom: 1px solid var(--border);
  padding:       1.75rem 0 0;
}
.page-header--pad { padding-bottom: 1.75rem; }
.page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.page-sub   { font-size: 0.875rem; color: var(--muted); font-weight: 300; margin-bottom: 1.25rem; }

/* Section labels */
.eyebrow {
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--gold);
  margin-bottom:  0.625rem;
  display:        block;
}

/* Type/filter tabs (shared by listings, profile, etc.) */
.tab-row { display: flex; gap: 0; border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab-row::-webkit-scrollbar { display: none; }
.tab-row--plain { border-top: none; border-bottom: 1px solid var(--border); }
.tab-item {
  flex-shrink:    0;
  padding:        0.7rem 1.125rem;
  font-size:      0.85rem;
  font-weight:    500;
  color:          var(--muted);
  cursor:         pointer;
  border:         none;
  background:     transparent;
  border-bottom:  2px solid transparent;
  transition:     all 0.15s;
  white-space:    nowrap;
}
.tab-item:hover { color: var(--text); }
.tab-item--active { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Sidebar (dashboard + listings) ──────────────────────── */
.with-sidebar { display: grid; grid-template-columns: 210px 1fr; gap: 1.5rem; align-items: start; }
.sidebar { display: flex; flex-direction: column; gap: 1rem; }
.side-section { margin-bottom: 1.25rem; }
.side-label {
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--faint);
  padding:        0 0.625rem;
  margin-bottom:  0.25rem;
  display:        block;
}
.side-link {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       0.475rem 0.625rem;
  border-radius: 7px;
  font-size:     0.875rem;
  color:         var(--muted);
  transition:    all 0.15s;
  margin-bottom: 1px;
}
.side-link:hover,
.side-link--active { color: var(--text); background: var(--surface); }
.side-icon { width: 20px; text-align: center; font-size: 0.9rem; flex-shrink: 0; }
.side-badge {
  margin-left:   auto;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.65rem;
  background:    var(--surface2);
  color:         var(--muted);
  padding:       0.1rem 0.4rem;
  border-radius: 4px;
}
.side-badge--gold { background: var(--gold-bg); color: var(--gold); }

/* Filter card (sidebar) */
.filter-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; }
.filter-head {
  padding:         0.75rem 1rem;
  border-bottom:   1px solid var(--border);
  font-size:       0.82rem;
  font-weight:     600;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.filter-clear { font-size: 0.72rem; color: var(--muted); cursor: pointer; font-weight: 400; background: none; border: none; transition: color 0.15s; }
.filter-clear:hover { color: var(--text); }
.filter-body { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.filter-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.2rem; display: block; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 0.375rem; padding: 1.25rem 0; flex-wrap: wrap; }
.page-btn {
  width:         34px;
  height:        34px;
  display:       grid;
  place-items:   center;
  border-radius: 7px;
  border:        1px solid var(--border2);
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  font-size:     0.85rem;
  transition:    all 0.15s;
}
.page-btn:hover   { background: var(--surface); color: var(--text); }
.page-btn--active { background: var(--gold); color: #0c0c10; border-color: var(--gold); font-weight: 600; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Toast notification ───────────────────────────────────── */
.toast {
  position:      fixed;
  bottom:        1.5rem;
  right:         1.5rem;
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: var(--r);
  padding:       0.75rem 1.25rem;
  font-size:     0.875rem;
  display:       flex;
  align-items:   center;
  gap:           0.625rem;
  z-index:       500;
  transform:     translateY(80px);
  opacity:       0;
  transition:    all 0.3s;
  box-shadow:    0 8px 32px rgba(0,0,0,0.4);
  pointer-events: none;
}
.toast--show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast__dot  { width: 8px; height: 8px; background: var(--green); border-radius: 50%; flex-shrink: 0; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state { padding: 3rem; text-align: center; }
.empty-state__icon  { font-size: 2rem; margin-bottom: 0.625rem; opacity: 0.35; }
.empty-state__title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.empty-state__sub   { font-size: 0.82rem; color: var(--muted); font-weight: 300; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 1.75rem 0; margin-top: auto; }
.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
  flex-wrap:       wrap;
}
.footer-links { display: flex; gap: 1.75rem; list-style: none; }
.footer-links a { font-size: 0.8rem; color: var(--faint); transition: color 0.15s; }
.footer-links a:hover { color: var(--muted); }
.footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--faint); }

/* ── Stat cards ───────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--r2);
  padding:       1.125rem 1.25rem;
  position:      relative;
  overflow:      hidden;
  transition:    border-color 0.2s;
}
.stat-card:hover { border-color: var(--border2); }
.stat-card__label { font-size: 0.78rem; color: var(--muted); font-weight: 400; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 6px; }
.stat-card__val   { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.stat-card__sub   { font-size: 0.75rem; color: var(--muted); margin-top: 0.375rem; display: flex; align-items: center; gap: 4px; }
.stat-card__spark { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; opacity: 0.15; }
.stat-card--gold  .stat-card__val { color: var(--gold);  }
.stat-card--green .stat-card__val { color: var(--green); }

/* ── Reveal animation ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal--visible { opacity: 1; transform: translateY(0); }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .with-sidebar { grid-template-columns: 1fr; }
  .sidebar      { display: none; }
  .nav__links   { display: none; }
}
@media (max-width: 600px) {
  .container, .container--wide { padding: 0 1.25rem; }
  .stat-grid   { grid-template-columns: 1fr 1fr; }
  .page-header { padding: 1.25rem 0 0; }
}