/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 24px; border-radius: var(--radius);
  font-size: .9rem; font-weight: 700; font-family: inherit;
  transition: all var(--transition); cursor: pointer;
  white-space: nowrap; border: 1px solid transparent; letter-spacing: .01em;
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-indigo2), #7c3aed);
  color: #fff; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(99,102,241,.2);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.4); filter: brightness(1.1) }
.btn-green {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(16,185,129,.2);
}
.btn-green:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(16,185,129,.4); filter: brightness(1.1) }
.btn-ghost {
  background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1);
  color: var(--c-txt1); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); transform:translateY(-1px) }
.btn-danger {
  background: var(--c-red2); border-color: rgba(248,113,113,.2);
  color: var(--c-red);
}
.btn-danger:hover { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.4) }
.btn-sm { padding: 8px 16px; font-size: .8rem }
.btn-lg { padding: 14px 32px; font-size: .95rem; border-radius: 14px }
.btn-icon { padding: 8px; border-radius: 10px; width: 38px; height: 38px }

/* ══════════════════════════════════
   CARDS
══════════════════════════════════ */
.card {
  background: rgba(14,16,26,0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  transition: all var(--transition);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
}
.card:hover {
  border-color: rgba(255,255,255,0.13);
  box-shadow: 0 16px 56px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  transform: translateY(-2px);
}

/* ══════════════════════════════════
   BADGES & TOAST
══════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: .7rem; font-weight: 800; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid transparent;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.b-active  { background:var(--c-green2);  color:var(--c-green); border-color: rgba(52,211,153,0.2) }  .b-active::before  { background:var(--c-green); box-shadow: 0 0 8px var(--c-green) }
.b-locked  { background:var(--c-amber2);  color:var(--c-amber); border-color: rgba(251,191,36,0.2) }  .b-locked::before  { background:var(--c-amber); animation:pulse 1.5s infinite; box-shadow: 0 0 8px var(--c-amber) }
.b-settled { background:var(--c-indigo3); color:var(--c-indigo); border-color: rgba(99,102,241,0.2) }  .b-settled::before { background:var(--c-indigo) }
.b-expired { background:rgba(255,255,255,.05); color:var(--c-txt2); border-color: var(--c-border) }      .b-expired::before { background:var(--c-txt3) }
.b-pending { background:var(--c-violet2); color:var(--c-violet); border-color: rgba(167,139,250,0.2) }  .b-pending::before { background:var(--c-violet); animation:pulse 1.2s infinite; box-shadow: 0 0 8px var(--c-violet) }
.b-rent    { background:var(--c-green2);  color:var(--c-green)  }
.b-sale    { background:var(--c-violet2); color:var(--c-violet) }

.toast-wrap { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:12px }
.toast {
  padding: 14px 20px; border-radius: var(--radius-lg);
  background: rgba(30,34,50,0.9); backdrop-filter: blur(12px);
  border: 1px solid var(--c-border2); border-left-width: 4px;
  font-size: .85rem; font-weight: 600; color: var(--c-txt1);
  box-shadow: var(--shadow-lg); animation: fadeUp .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; align-items: center; gap: 10px; max-width: 360px;
}
.toast.ok  { border-left-color: var(--c-green) }
.toast.err { border-left-color: var(--c-red) }
.toast.wrn { border-left-color: var(--c-amber) }

/* ══════════════════════════════════
   LISTINGS PAGE
══════════════════════════════════ */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:32px; gap:16px; flex-wrap:wrap;
}
.page-header h2 { font-size:1.8rem; font-weight:900; letter-spacing:-.03em }
.filter-row {
  display:flex; gap:12px; flex-wrap:wrap;
  padding:16px; background:rgba(255,255,255,0.02); border-radius:var(--radius-xl);
  border:1px solid var(--c-border); margin-bottom:32px; backdrop-filter: blur(12px);
}
.filter-row select,.filter-row input { flex:1; min-width:160px; max-width:280px; background: rgba(0,0,0,0.3) }
.listings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px }
.listing-card {
  border-radius:var(--radius-xl); overflow:hidden;
  background:rgba(12,14,24,0.8); backdrop-filter: blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.07);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1); cursor:pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.listing-card:hover {
  border-color:rgba(99,102,241,0.3);
  transform:translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.15), 0 0 40px rgba(99,102,241,0.08);
}
.listing-thumb {
  height:190px;
  background: linear-gradient(135deg, rgba(91,99,240,0.12) 0%, rgba(160,140,248,0.08) 50%, rgba(0,0,0,0.4) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; position:relative; overflow:hidden;
}
.listing-thumb::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.1) 0%, transparent 70%);
}
.listing-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 30%, rgba(12,14,24,1));
}
.listing-thumb-badges {
  position:absolute; top:12px; left:12px; right:12px;
  display:flex; justify-content:space-between; z-index:1;
}
.listing-info { padding:20px 22px 22px; position: relative; z-index: 2 }
.listing-info h3 { font-weight:800; font-size:1.05rem; margin-bottom:6px; letter-spacing: -.01em; line-height:1.3 }
.listing-price {
  font-family:var(--mono); font-size:1.25rem; font-weight:800;
  background: linear-gradient(135deg, var(--c-indigo), var(--c-violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom:12px;
}
.listing-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.listing-hash { font-family:var(--mono); font-size:.68rem; color:var(--c-txt3); margin-bottom:16px; letter-spacing:.02em }