@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root {
  --bg:       #0a0e14;
  --bg2:      #0f1520;
  --bg3:      #141c28;
  --panel:    #111820;
  --panel2:   #17202e;
  --border:   #1e2d3d;
  --border2:  #253548;

  --gold:     #c49a2c;
  --gold2:    #e0b84a;
  --gold-dim: rgba(196,154,44,0.12);
  --gold-glow:rgba(196,154,44,0.22);

  --green:    #4ade80;
  --green-dim:rgba(74,222,128,0.10);
  --red:      #f87171;
  --red-dim:  rgba(248,113,113,0.10);
  --blue:     #60a5fa;

  --text:     #c8d6e5;
  --text-dim: #3d5166;
  --text-mid: #6b8299;
  --text-bright:#e8f0f8;

  --body:    'Barlow', sans-serif;
  --cond:    'Barlow Condensed', sans-serif;

  --nav-h: 58px;
  --sidebar-w: 300px;
  --radius: 4px;
  --shadow: 0 4px 24px rgba(0,0,0,0.6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14.4px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-weight:400;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--body);cursor:pointer;border:none}
img{display:block}
input,select,textarea{font-family:var(--body)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ══ TOAST ══════════════════════════════════════════ */
#toast-root{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;font-size:0.88rem;font-weight:500;border-left:3px solid;min-width:220px;opacity:0;transform:translateX(16px);transition:all 0.25s;background:var(--panel2)}
.toast.visible{opacity:1;transform:translateX(0)}
.toast-success{border-color:var(--green);color:var(--green)}
.toast-error  {border-color:var(--red);color:var(--red)}
.toast-warn   {border-color:var(--gold);color:var(--gold)}
.toast-info   {border-color:var(--blue);color:var(--blue)}

/* ══ NAVBAR ══════════════════════════════════════════ */
.navbar{
  position:sticky;top:0;z-index:500;
  height:var(--nav-h);
  background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 1.4rem;gap:0;
}
.nav-logo{
  display:flex;align-items:center;gap:15px;
  margin-right:3rem;flex-shrink:0;
  font-family:var(--cond);font-size:2.2rem;
  font-weight:900;letter-spacing:4px;
  color:var(--text-bright);
}
.nav-logo-mark{
  width:42px;height:42px;
  background:var(--gold);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:900;color:#000;font-family:var(--cond);letter-spacing:0;
}
.nav-links{display:flex;height:var(--nav-h);gap:15px}
.nav-link{
  height:100%;display:flex;align-items:center;
  padding:0 1.5rem;font-size:1.15rem;font-weight:700;
  color:var(--text-mid);transition:color 0.15s;
  border-bottom:4px solid transparent;
  white-space:nowrap;
  text-transform: uppercase;
}
.nav-link:hover{color:var(--text)}
.nav-link.active{color:var(--text-bright);border-bottom-color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Exact Balance Oblong from Screenshot */
.nav-bal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 8px;
  position: relative;
  overflow: hidden;
  max-height: 40px;
}
.nav-bal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.nav-bal:hover::before { transform: translateX(100%); }
.nav-bal:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.nav-bal-icon {
  font-size: 1.1rem;
  color: var(--gold);
  filter: drop-shadow(0 0 5px var(--gold-glow));
}
.nav-bal-val {
  font-family: var(--cond);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.nav-bal-lbl {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Larger Market Grid - Exactly 4 per row */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* Card with Image Overlay */
.card-img {
  height: 220px;
  background: linear-gradient(135deg, #0d1520, #111e2e);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-overlay-text {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  text-align: left;
  pointer-events: none;
  max-width: 90%;
}

.card-overlay-name {
  font-family: var(--cond);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,1);
  line-height: 1.2;
  margin-bottom: 2px;
  text-transform: uppercase;
  word-wrap: break-word;
}

.card-overlay-meta {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-mid);
  text-shadow: 0 1px 6px rgba(0,0,0,1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-footer-large {
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
}

.price-diff-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-diff-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-diff-val-steam {
  font-family: var(--cond);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-mid);
}

.price-diff-val-listed {
  font-family: var(--cond);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

/* Price Box styles for modal */
.price-box-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.price-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 4px;
  text-align: center;
}
.pb-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.pb-val {
  font-family: var(--cond);
  font-size: 2.2rem;
  font-weight: 800;
}
.pb-val.steam { color: var(--text-mid); }
.pb-val.listed { color: var(--gold); }

/* avatar + dropdown */
.nav-user{position:relative}
.nav-avatar{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--border);overflow:hidden;
  cursor:pointer;transition:border-color 0.15s;
}
.nav-avatar:hover{border-color:var(--gold)}
.nav-avatar img{width:100%;height:100%;object-fit:cover}

.nav-dd{
  position:absolute;top:calc(100% + 10px);right:0;
  width:210px;background:var(--panel2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;z-index:600;overflow:hidden;
}
.nav-dd.open{display:block;animation:modalIn 0.15s ease both}
.nav-dd-user{
  padding:1rem 1.1rem;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--panel2),var(--bg3));
}
.nav-dd-name{font-family:var(--cond);font-size:1rem;font-weight:700;color:var(--text-bright);letter-spacing:0.5px}
.nav-dd-rep{font-size:0.75rem;color:var(--text-dim);margin-top:3px}
.nav-dd-item{
  display:flex;align-items:center;
  padding:11px 1.1rem;font-size:0.88rem;font-weight:500;
  color:var(--text-mid);cursor:pointer;
  transition:background 0.1s,color 0.1s;
  border-bottom:1px solid rgba(255,255,255,0.03);
  letter-spacing:0.2px;
}
.nav-dd-item:last-child{border:none}
.nav-dd-item:hover{background:rgba(255,255,255,0.04);color:var(--text-bright)}
.nav-dd-item.sell-item{color:var(--gold)}
.nav-dd-item.sell-item:hover{background:var(--gold-dim);color:var(--gold2)}
.nav-dd-item.danger{color:#6b8299}
.nav-dd-item.danger:hover{color:var(--red);background:var(--red-dim)}
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0}

/* steam login btn */
.btn-steam{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:#1a3042;border:1px solid #2a5072;
  color:#c7d5e0;font-size:0.88rem;font-weight:600;
  border-radius:var(--radius);cursor:pointer;
  transition:all 0.15s;letter-spacing:0.3px;
}
.btn-steam:hover{background:#1f3d52;box-shadow:0 0 16px rgba(74,145,202,0.2)}

/* ══ ALERT BAR ════════════════════════════════════════ */
.alert-bar{
  background:#1a1510;border-bottom:1px solid rgba(196,154,44,0.3);
  padding:10px 1.4rem;display:flex;align-items:center;gap:10px;
  font-size:0.88rem;color:var(--gold);font-weight:500;cursor:pointer;
}
.alert-bar:hover{background:#1e1a12}
.alert-bar-close{margin-left:auto;opacity:0.5}

/* ══ MARKET LAYOUT ════════════════════════════════════ */
.market-layout{
  display:flex;
  min-height:calc(100vh - var(--nav-h));
}

/* sidebar */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--panel);border-right:1px solid var(--border);
  padding:0;
  position:sticky;top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  overflow-y:auto;display:flex;flex-direction:column;
}

/* search at top of sidebar */
.sb-search{
  padding:18px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
  flex-shrink:0;
}
.sb-search-inner{
  position:relative;
}
.sb-search-inner input{
  width:100%;
  background:var(--bg);
  border:2px solid var(--gold);
  color:var(--text-bright);
  padding:13px 16px 13px 44px;
  font-size:1rem;font-weight:500;
  border-radius:var(--radius);outline:none;
  transition:box-shadow 0.15s;
}
.sb-search-inner input:focus{
  box-shadow:0 0 0 3px var(--gold-dim);
}
.sb-search-inner input::placeholder{color:var(--text-mid)}
.sb-search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.1rem;pointer-events:none;
}

.sb-filters{padding:18px 16px;flex:1}
.sb-section{margin-bottom:1.8rem}
.sb-title{
  font-size:0.82rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-dim);
  margin-bottom:1rem;
  display:flex;align-items:center;justify-content:space-between;
}
.sb-title button{
  font-size:0.75rem;color:var(--gold);background:none;
  border:none;cursor:pointer;letter-spacing:0;text-transform:none;
  font-weight:600;
}

/* price inputs */
.price-inputs{display:flex;gap:8px;align-items:center}
.price-inputs input{
  flex:1;width:0;background:var(--bg3);border:1px solid var(--border);
  color:var(--text-bright);padding:10px 11px;font-size:0.92rem;
  border-radius:var(--radius);outline:none;
}
.price-inputs input:focus{border-color:var(--gold)}
.price-inputs span{color:var(--text-dim);font-size:0.92rem;flex-shrink:0}

/* wear pills */
.wear-pills{display:flex;gap:6px;flex-wrap:wrap}
.wear-pill{
  padding:7px 13px;font-size:0.85rem;font-weight:600;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text-mid);border-radius:2px;cursor:pointer;
  transition:all 0.12s;
}
.wear-pill:hover{border-color:var(--border2);color:var(--text)}
.wear-pill.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold)}

/* checkbox option */
.cb-opt{
  display:flex;align-items:center;gap:10px;
  padding:9px 4px;cursor:pointer;
  font-size:0.95rem;color:var(--text-mid);
  border-radius:2px;transition:color 0.12s;
}
.cb-opt:hover{color:var(--text)}
.cb-box{
  width:17px;height:17px;border:1px solid var(--border2);
  border-radius:2px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;color:#000;transition:all 0.12s;
}
.cb-opt.on .cb-box{background:var(--gold);border-color:var(--gold);color:#000}

/* ══ MARKET MAIN ══════════════════════════════════════ */
.market-main{flex:1;min-width:0;padding:1.2rem}

.toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:1.2rem;flex-wrap:wrap;
}
.sort-sel{
  background:var(--panel2);border:1px solid var(--border);
  color:var(--text);padding:10px 13px;font-size:0.88rem;
  border-radius:var(--radius);cursor:pointer;outline:none;
}
.sort-sel:focus{border-color:var(--gold)}
.sort-sel option{background:var(--panel2)}
.results-ct{font-size:0.82rem;color:var(--text-dim);white-space:nowrap;margin-left:auto}

/* ══ LISTING CARD ══════════════════════════════════════ */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:border-color 0.18s,transform 0.18s,box-shadow 0.18s;
  display:flex;flex-direction:column;position:relative;
}
.card:hover{
  border-color:rgba(196,154,44,0.5);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,0.5),0 0 0 1px rgba(196,154,44,0.15);
}
.card-img{
  height:170px;
  background:radial-gradient(ellipse at 50% 60%, #0f1e30 0%, #080e18 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.card-img img{
  max-width:94%;max-height:94%;object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.85));
  transition:transform 0.3s;
}
.card:hover .card-img img{transform:scale(1.07)}
.card-disc{
  position:absolute;top:8px;right:8px;
  background:rgba(10,14,20,0.88);border:1px solid rgba(74,222,128,0.45);
  color:var(--green);font-size:0.72rem;font-weight:700;
  padding:3px 8px;border-radius:2px;letter-spacing:0.5px;
  z-index:2;
}
.card-fav{
  position:absolute;top:8px;right:8px;
  background:rgba(10,14,20,0.7);border:1px solid var(--border);
  width:28px;height:28px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:var(--text-dim);
  transition:all 0.15s;cursor:pointer;z-index:2;
}
.card-fav:hover,.card-fav.on{color:#ff9999;border-color:#ff9999}

/* float bar */
.float-bar-wrap{height:3px;background:var(--border);position:relative;flex-shrink:0}
.float-bar-track{
  position:absolute;top:0;left:0;right:0;height:100%;
  background:linear-gradient(90deg,#4ade80 0%,#facc15 40%,#fb923c 70%,#f87171 100%);
}
.float-dot{
  position:absolute;top:-3px;
  width:9px;height:9px;border-radius:50%;
  background:#fff;border:1.5px solid var(--bg);
  transform:translateX(-50%);
}

/* card body — weapon/skin stacked, no overlap */
.card-body{
  padding:10px 12px 8px;
  flex:1;display:flex;flex-direction:column;gap:2px;
  min-height:0;
}
.card-weapon{
  font-size:0.75rem;color:var(--text-dim);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-name{
  font-family:var(--cond);font-size:1.12rem;font-weight:700;
  color:var(--text-bright);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-meta-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:2px;
}
.card-wear{
  font-size:0.82rem;color:var(--text-mid);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-float{
  font-size:0.82rem;color:var(--text-dim);font-weight:500;
  text-align:right;white-space:nowrap;flex-shrink:0;margin-left:6px;
}

/* card footer — steam price and site price same size, opposite sides */
.card-footer{
  padding:8px 12px 10px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.18);
  flex-shrink:0;
  display:flex;flex-direction:column;gap:4px;
}
.card-price-label{
  font-size:0.65rem;color:var(--text-dim);font-weight:600;
  text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;
}
.card-price-val{
  font-family:var(--cond);font-size:1.2rem;font-weight:700;
  color:var(--text-bright);line-height:1;
}
.card-price-row{
  display:flex;align-items:flex-start;justify-content:space-between;
}
.card-seller-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:2px;
}
.card-seller{display:flex;align-items:center;gap:5px;font-size:0.7rem;color:var(--text-dim)}
.seller-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.card-offers-tag{font-size:0.65rem;color:var(--text-dim)}

/* remove old card-actions (no buttons on cards) */
.card-actions{display:none}

/* empty state */
.empty{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--text-dim);font-size:0.92rem}

/* ══ MODAL ════════════════════════════════════════════ */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.75);z-index:1000;
  align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.overlay.open{display:flex}
.modal{
  background:var(--panel2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  width:90%;max-width:480px;
  max-height:90vh;overflow-y:auto;
  animation:modalIn 0.2s ease both;
}
@keyframes modalIn{from{opacity:0;transform:scale(0.96) translateY(10px)}to{opacity:1;transform:none}}
.modal-wide{max-width:640px}
.modal-head{
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--panel2);z-index:2;
}
.modal-title{font-family:var(--cond);font-size:1.15rem;font-weight:700;letter-spacing:1px;color:var(--text-bright)}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;padding:2px 6px;transition:color 0.15s}
.modal-close:hover{color:var(--text)}
.modal-body{padding:1.3rem}
.modal-foot{padding:1rem 1.3rem;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ══ FORMS ════════════════════════════════════════════ */
.field{margin-bottom:1rem}
.field-label{display:block;font-size:0.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
.field-input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  color:var(--text-bright);padding:11px 13px;font-size:0.9rem;
  border-radius:var(--radius);outline:none;transition:border-color 0.15s;
}
.field-input:focus{border-color:var(--gold)}
.field-input::placeholder{color:var(--text-dim)}
.field-select{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  color:var(--text-bright);padding:11px 13px;font-size:0.9rem;
  border-radius:var(--radius);cursor:pointer;outline:none;
}
.field-select option{background:var(--bg3)}

input[type=range]{
  width:100%;-webkit-appearance:none;
  height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);cursor:pointer;box-shadow:0 0 6px var(--gold-glow);
}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.toggle-row-label{font-size:0.9rem;font-weight:500;color:var(--text-mid)}
.toggle{width:42px;height:24px;background:var(--border2);border-radius:12px;cursor:pointer;position:relative;transition:background 0.2s;flex-shrink:0}
.toggle.on{background:var(--gold)}
.toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform 0.2s}
.toggle.on .toggle-knob{transform:translateX(18px)}

/* ══ BUTTONS ══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;font-family:var(--body);font-size:0.9rem;
  font-weight:600;border:none;border-radius:var(--radius);
  cursor:pointer;transition:all 0.15s;letter-spacing:0.2px;
}
.btn-gold{background:var(--gold);color:#000}
.btn-gold:hover{background:var(--gold2);box-shadow:0 0 16px var(--gold-glow)}
.btn-outline{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn-outline:hover{background:var(--gold-dim)}
.btn-ghost{background:var(--bg3);color:var(--text-mid);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border2)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:8px 15px;font-size:0.82rem}
.btn:disabled{opacity:0.3;cursor:not-allowed;pointer-events:none}
.btn-full{width:100%}

/* ══ ALERTS ══════════════════════════════════════════ */
.alert{padding:10px 13px;border-left:3px solid;font-size:0.82rem;line-height:1.6;margin-bottom:1rem;border-radius:0 var(--radius) var(--radius) 0}
.alert-gold{background:rgba(196,154,44,0.08);border-color:var(--gold);color:#d4a83a}
.alert-green{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.alert-red{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.alert-blue{background:rgba(96,165,250,0.08);border-color:var(--blue);color:var(--blue)}

/* ══ PROFILE PAGE ════════════════════════════════════ */
.profile-layout{
  max-width:980px;margin:0 auto;padding:1.5rem;
  display:grid;grid-template-columns:220px 1fr;gap:1.5rem;align-items:start;
}
@media(max-width:700px){.profile-layout{grid-template-columns:1fr}}
.profile-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:10px}
.profile-card-head{background:linear-gradient(135deg,#0f1a28,#141f30);padding:1.5rem 1rem;text-align:center;border-bottom:1px solid var(--border)}
.profile-av{width:68px;height:68px;border-radius:50%;border:2px solid var(--gold);margin:0 auto 0.8rem;overflow:hidden}
.profile-av img{width:100%;height:100%;object-fit:cover}
.profile-name{font-family:var(--cond);font-size:1.15rem;font-weight:700;color:var(--text-bright);letter-spacing:1px}
.profile-since{font-size:0.75rem;color:var(--text-dim);margin-top:3px}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.pstat{background:var(--panel);padding:11px;text-align:center}
.pstat-val{font-family:var(--cond);font-size:1.15rem;font-weight:700;color:var(--gold)}
.pstat-lbl{font-size:0.68rem;color:var(--text-dim);margin-top:2px;font-weight:500;letter-spacing:0.5px}

.pnav{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.pnav-item{
  padding:12px 1.1rem;font-size:0.9rem;font-weight:500;
  color:var(--text-mid);cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:0;
  transition:background 0.12s,color 0.12s;
}
.pnav-item:last-child{border:none}
.pnav-item:hover{background:var(--bg3);color:var(--text)}
.pnav-item.active{color:var(--gold);background:var(--gold-dim);border-left:2px solid var(--gold)}
.pnav-item.danger:hover{color:var(--red)}

.tab{display:none}.tab.active{display:block}
.tab-title{font-family:var(--cond);font-size:1.4rem;font-weight:700;letter-spacing:1px;color:var(--text-bright);margin-bottom:1.3rem}

/* trades tabs */
.trades-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.3rem}
.trades-tab{
  padding:10px 18px;font-size:0.9rem;font-weight:600;
  color:var(--text-dim);cursor:pointer;background:transparent;border:none;
  border-bottom:2px solid transparent;transition:all 0.15s;
}
.trades-tab:hover{color:var(--text)}
.trades-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* trade card */
.trade-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}
.trade-card-head{padding:9px 1.1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:0.825rem;color:var(--text-dim);font-weight:500}
.trade-card-body{padding:1.1rem 1.2rem;display:flex;align-items:center;gap:1.5rem}
.trade-img{width:74px;height:53px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.trade-info{flex:1}
.trade-name{font-family:var(--cond);font-size:1.1rem;font-weight:700;color:var(--text-bright)}
.trade-meta{font-size:0.825rem;color:var(--text-dim);margin-top:4px}
.trade-price{font-family:var(--cond);font-size:1.265rem;font-weight:700;color:var(--gold);flex-shrink:0}
.trade-card-foot{padding:0.8rem 1.1rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.progress-wrap{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;background:var(--gold);transition:width 0.4s}

/* trade pipeline (CSFloat style) */
.trade-pipeline{display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;margin-top:0.8rem}
.pipe-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.pipe-circle{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;color:var(--text-dim);
  background:var(--bg3);transition:all 0.2s;
}
.pipe-circle.done{border-color:var(--gold);background:var(--gold);color:#000}
.pipe-circle.active{border-color:var(--gold);color:var(--gold)}
.pipe-line{flex:1;height:2px;background:var(--border);margin:0 -4px;align-self:flex-start;margin-top:13px}
.pipe-line.done{background:var(--gold)}
.pipe-label{font-size:0.62rem;color:var(--text-dim);text-align:center;white-space:nowrap;font-weight:500}

/* wallet */
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.3rem}
.wallet-stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem}
.wallet-stat-val{font-family:var(--cond);font-size:1.9rem;font-weight:700;color:var(--gold)}
.wallet-stat-lbl{font-size:0.75rem;color:var(--text-dim);margin-top:5px;font-weight:500}

/* ══ DEPOSIT UI (CSFLOAT STYLE) ══════════════════════ */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinners {
  -moz-appearance: textfield;
}

.deposit-input-group {
  position: relative;
  margin: 2rem 0;
}

.deposit-input-large {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  font-family: var(--cond);
  font-size: 3rem; /* Reduced from 3.5rem */
  font-weight: 800;
  color: var(--text-bright);
  text-align: center;
  padding: 8px 0;
  transition: border-color 0.3s;
}

.deposit-symbol {
  position: absolute;
  left: 25%; /* Adjusted for smaller font */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.7rem; /* Reduced from 2rem */
  font-weight: 800;
  color: var(--text-dim);
}

.pay-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 10px; /* Restored to large */
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.pay-logo-img {
  height: 24px; /* Restored to large */
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.receipt-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem; /* Spacious */
  margin-top: 1.5rem;
  display: none;
  animation: slideDown 0.3s ease-out;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px; /* More spacing */
  font-size: 1rem;
  color: var(--text-mid);
  font-weight: 700; /* Thick bold */
}

.receipt-row span:last-child {
  color: var(--text-bright);
  font-weight: 800; /* Even thicker for values */
}

.receipt-row.total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px dashed var(--border);
  color: var(--text-bright);
  font-weight: 900;
  font-size: 1.25rem;
}
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.pay-btn:hover {
  border-color: var(--text-mid);
  background: var(--panel2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.pay-btn.on {
  background: var(--gold-dim);
  border-color: var(--gold);
  box-shadow: 0 0 15px var(--gold-glow);
}

.pay-btn.on::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 8px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 900;
}

.pay-icon {
  font-size: 1.8rem;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.pay-name {
  font-family: var(--cond);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pay-fee {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.pay-btn.on .pay-fee {
  color: var(--gold);
  background: rgba(196,154,44,0.1);
}

.payment-footer-note {
  font-size: 0.8rem;
  color: var(--text-mid);
  background: var(--bg2);
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid var(--gold);
  margin-top: 15px;
  line-height: 1.5;
}

.payment-footer-note strong {
  color: var(--gold);
}

.btn-large-pay {
  height: 48px;
  font-size: 1.1rem;
  font-family: var(--cond);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ══ SELL PAGE ════════════════════════════════════════ */
.sell-layout{max-width:920px;margin:0 auto;padding:1.5rem;display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start}
@media(max-width:700px){.sell-layout{grid-template-columns:1fr}}
.sell-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.sell-panel-head{padding:1rem 1.3rem;border-bottom:1px solid var(--border);font-family:var(--cond);font-size:1.05rem;font-weight:700;letter-spacing:1px;color:var(--text-bright)}
.sell-panel-body{padding:1.3rem}

.mode-tabs{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.3rem}
.mode-tab{flex:1;padding:10px;text-align:center;font-size:0.85rem;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-dim);transition:all 0.15s}
.mode-tab.on{background:var(--gold);color:#000}

.preview-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 10px)}
.preview-img{height:170px;background:linear-gradient(135deg,#0d1520,#111e2e);display:flex;align-items:center;justify-content:center}
.preview-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.8));transform:scale(1.05)}
.preview-body{padding:1.1rem}
.preview-name{font-family:var(--cond);font-size:1.15rem;font-weight:700;color:var(--text-bright)}
.preview-sub{font-size:0.78rem;color:var(--text-dim);margin-top:3px}
.preview-price-row{display:flex;align-items:baseline;gap:10px;margin-top:0.9rem}
.preview-price{font-family:var(--cond);font-size:1.9rem;font-weight:700;color:var(--gold)}
.preview-orig{font-size:0.78rem;color:var(--text-dim);text-decoration:line-through}
.preview-disc{font-size:0.78rem;color:var(--green);font-weight:600}
.calc-rows{margin-top:0.9rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius)}
.calc-row{display:flex;justify-content:space-between;padding:8px 11px;font-size:0.82rem;border-bottom:1px solid rgba(255,255,255,0.04)}
.calc-row:last-child{border:none;font-weight:600;color:var(--text-bright)}
.calc-row .lbl{color:var(--text-dim)}.calc-row .val{color:var(--text)}.calc-row .val.acc{color:var(--green)}

/* ══ LISTING DETAIL (modal) ═══════════════════════════ */
.listing-detail{padding:0}
.ld-img{height:220px;background:linear-gradient(135deg,#0d1520,#111e2e);display:flex;align-items:center;justify-content:center;position:relative}
.ld-img img{max-width:65%;max-height:65%;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.8))}
.ld-disc-badge{position:absolute;top:10px;left:10px;background:rgba(10,14,20,0.85);border:1px solid rgba(74,222,128,0.4);color:var(--green);font-size:0.75rem;font-weight:700;padding:3px 9px;border-radius:2px}
.ld-body{padding:1.3rem}
.ld-weapon{font-size:0.75rem;color:var(--text-dim);font-weight:600;margin-bottom:4px}
.ld-name{font-family:var(--cond);font-size:1.6rem;font-weight:700;color:var(--text-bright);line-height:1}
.ld-wear{font-size:0.82rem;color:var(--text-mid);margin-top:4px;margin-bottom:1rem}
.ld-float-wrap{margin-bottom:1rem}
.ld-float-label{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--text-dim);margin-bottom:5px}
.ld-float-bar{height:5px;background:var(--border);border-radius:3px;position:relative;overflow:visible}
.ld-float-track{position:absolute;inset:0;background:linear-gradient(90deg,#4ade80,#facc15,#fb923c,#f87171);border-radius:3px}
.ld-float-dot{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--bg);transform:translateX(-50%)}
.ld-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:1rem}
.ld-price{font-family:var(--cond);font-size:2.3rem;font-weight:700;color:var(--gold)}
.ld-orig{font-size:0.85rem;color:var(--text-dim);text-decoration:line-through}
.ld-save{font-size:0.85rem;color:var(--green);font-weight:600}
.ld-seller{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.ld-seller-title{font-size:0.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.6rem}
.ld-seller-row{display:flex;align-items:center;gap:12px}
.ld-seller-name{font-family:var(--cond);font-size:1.05rem;font-weight:700;color:var(--text-bright)}
.ld-seller-stats{display:flex;gap:14px;margin-top:4px}
.ld-seller-stat{font-size:0.75rem;color:var(--text-dim)}
.ld-seller-stat span{color:var(--gold);font-weight:600}
.ld-escrow{background:rgba(96,165,250,0.06);border:1px solid rgba(96,165,250,0.2);border-radius:var(--radius);padding:9px 11px;font-size:0.78rem;color:var(--blue);line-height:1.6;margin-bottom:1rem}
.ld-offer-section{border-top:1px solid var(--border);padding-top:1rem}
.ld-offer-title{font-size:0.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.7rem}
.ld-offer-range{font-size:0.82rem;color:var(--text-mid);margin-bottom:0.7rem}
.ld-offer-range span{color:var(--gold);font-weight:600}
.offer-input-row{display:flex;gap:8px}
.offer-input-row input{flex:1}

/* ══ TAGS ════════════════════════════════════════════ */
.tag{display:inline-flex;align-items:center;padding:3px 8px;font-size:0.68rem;font-weight:700;border-radius:2px;letter-spacing:0.5px;border:1px solid}
.tag-green{color:var(--green);border-color:rgba(74,222,128,0.3);background:var(--green-dim)}
.tag-gold{color:var(--gold);border-color:rgba(196,154,44,0.3);background:var(--gold-dim)}
.tag-red{color:var(--red);border-color:rgba(248,113,113,0.3);background:var(--red-dim)}
.tag-blue{color:var(--blue);border-color:rgba(96,165,250,0.3);background:rgba(96,165,250,0.08)}

.divider{height:1px;background:var(--border);margin:1rem 0}
.countdown{font-family:var(--cond);font-size:0.95rem;font-weight:700;color:var(--gold);letter-spacing:1px}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp 0.35s ease both}

/* ══ SCRAPED PREVIEW ══════════════════════════════════ */
.scraped-preview {
  margin-top: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.scraped-img-wrap {
  width: 64px;
  height: 48px;
  background: var(--bg);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.scraped-img-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.scraped-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--gold);
  color: #000;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}
.scraped-info {
  flex: 1;
  min-width: 0;
}
.scraped-name {
  font-family: var(--cond);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scraped-wear {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* PROFESSIONAL HOW IT WORKS MODAL */
.how-step { display: flex; gap: 20px; margin-bottom: 2rem; align-items: flex-start; }
.how-number { 
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; 
    border: 1px solid var(--border2); display: flex; align-items: center; 
    justify-content: center; font-family: var(--cond); font-weight: 700; 
    color: var(--text-dim); background: var(--bg2); font-size: 0.9rem;
}
.how-step.active .how-number { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.how-content h4 { 
    font-family: var(--cond); font-size: 1.1rem; font-weight: 700; 
    letter-spacing: 0.5px; color: var(--text-bright); margin-bottom: 6px; 
    text-transform: uppercase; 
}
.how-content p { color: var(--text-mid); line-height: 1.5; font-size: 0.92rem; }
.how-content strong { color: var(--text); font-weight: 600; }

/* HERO SECTION & LANDING SCREEN */
.landing-hero {
  position: relative;
  padding: 100px 1.4rem;
  display: flex;
  align-items: center;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 600px;
  z-index: 5;
}

.hero-content { flex: 1.2; }
.hero-title {
  font-family: var(--cond);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-bright);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.hero-title span { color: var(--gold); }

.hero-desc {
  font-size: 1.2rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 580px;
  margin-bottom: 40px;
}

.hero-btns { display: flex; gap: 16px; }

.hero-visual {
  flex: 0.8;
  display: flex;
  justify-content: center;
  position: relative;
}

/* Floating Card Effect */
.floating-card-mock {
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
  transform: rotate(6deg) translateY(-20px);
  animation: float 6s ease-in-out infinite;
  border-top: 4px solid var(--gold);
}

@keyframes float {
  0%, 100% { transform: rotate(6deg) translateY(-20px); }
  50% { transform: rotate(4deg) translateY(0px); }
}

/* Background Grid Overlay */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

@media(max-width:900px){
  .landing-hero { flex-direction: column; padding: 60px 1.4rem; text-align: center; gap: 40px; }
  .hero-title { font-size: 3rem; }
  .hero-desc { margin: 0 auto 30px; }
  .hero-btns { justify-content: center; }
  .hero-visual { display: none; }
}

/* SOFT AESTHETIC MODAL (Refined) */
.welcome-overlay {
    background: rgba(7, 10, 15, 0.85);
    backdrop-filter: blur(8px);
}
.welcome-modal {
    background: #121924; /* Desaturated, less harsh */
    border: 1px solid #1e2a38;
    border-top: 4px solid var(--gold);
    max-width: 600px !important;
    padding: 2.5rem !important;
}
.welcome-title {
    font-family: var(--cond);
    font-size: 2.4rem !important;
    font-weight: 800;
    color: var(--text-bright);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.welcome-text {
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    color: var(--text-mid);
    margin-bottom: 2.5rem;
}
.welcome-step {
    margin-bottom: 2.5rem;
    gap: 25px !important;
}
.welcome-step h4 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
}
.welcome-step p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}