@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:            #0A0E13;
  --bg-elevated:   #10151C;
  --card:          #131A22;
  --card-hover:    #171F29;
  --border:        #202A35;
  --border-soft:   #1A222B;
  --text:          #E7EDF3;
  --text-dim:      #8695A6;
  --text-faint:    #4E5C6B;

  --teal:          #2DD9C7;
  --teal-dim:      rgba(45,217,199,0.12);
  --amber:         #F0A93B;
  --amber-dim:     rgba(240,169,59,0.12);
  --green:         #34D17E;
  --green-dim:     rgba(52,209,126,0.12);
  --red:           #F0555A;
  --red-dim:       rgba(240,85,90,0.12);

  /* glass-gradient tints used by cards/panels — redefined per theme
     below so the same markup/CSS works in both dark and light mode */
  --glass-hi:         rgba(255,255,255,0.02);
  --glass-lo:          rgba(19,26,34,0.7);
  --glass-lo-strong:   rgba(19,26,34,0.9);
  --glass-solid:       rgba(16,21,28,0.97);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Sora', var(--font-body);
  --font-num: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
  --bg:            #F3F5F8;
  --bg-elevated:   #FFFFFF;
  --card:          #FFFFFF;
  --card-hover:    #F5F7FA;
  --border:        #E1E6ED;
  --border-soft:   #EBEEF2;
  --text:          #16202C;
  --text-dim:      #5B6673;
  --text-faint:    #94A0AC;

  --teal:          #0E9C90;
  --teal-dim:      rgba(14,156,144,0.10);
  --amber:         #B4750A;
  --amber-dim:     rgba(180,117,10,0.10);
  --green:         #158A46;
  --green-dim:     rgba(21,138,70,0.10);
  --red:           #D0393F;
  --red-dim:       rgba(208,57,63,0.10);

  --glass-hi:         rgba(0,0,0,0.025);
  --glass-lo:          rgba(255,255,255,0.75);
  --glass-lo-strong:   rgba(255,255,255,0.92);
  --glass-solid:       rgba(255,255,255,0.98);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(45,217,199,0.07), transparent 60%),
    radial-gradient(900px 500px at 5% 10%, rgba(240,169,59,0.04), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }

.shell{ max-width: 1180px; margin: 0 auto; padding: 0 18px 60px; }

/* ---------- Header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding: 16px 4px; gap: 16px; flex-wrap:wrap;
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-solid);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--teal), #1a9d90);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; color:#04231f; font-size:15px;
  overflow:hidden; flex-shrink:0;
}
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:16px; letter-spacing:0.2px; }

.main-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.main-nav-link{ color: var(--text-dim); font-size:14px; font-weight:600; padding:6px 2px; border-bottom:2px solid transparent; }
.main-nav-link:hover{ color: var(--text); }
.main-nav-link.active{ color: var(--text); border-bottom-color: var(--teal); }

.wallet-pill{ display:flex; align-items:center; gap:10px; background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo-strong)); border:1px solid var(--border); padding: 8px 14px 8px 10px; border-radius: 999px; transition: border-color .12s ease; }
.wallet-pill:hover{ border-color: #2a3644; }
.wallet-icon{ width:26px; height:26px; border-radius:50%; background: var(--teal-dim); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:13px; }
.wallet-amt{ font-family: var(--font-num); font-weight:600; font-size:14px; }
.badge-live{ background: var(--green-dim); color: var(--green); font-size:10.5px; font-weight:700; letter-spacing:0.5px; padding: 3px 8px; border-radius:999px; }

.top-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{ width:38px; height:38px; border-radius:50%; background: var(--card); border:1px solid var(--border); color: var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; font-size:15px; transition: color .12s ease, background .12s ease, transform .12s ease; }
.icon-btn:hover{ color:var(--text); background:var(--card-hover); transform: translateY(-1px); }
.avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg,#3b4a5a,#222b35); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:13px; border: 1px solid var(--border); }

/* ---------- Alerts ---------- */
.alert{ padding: 12px 16px; border-radius: var(--radius-md); font-size:13.5px; margin-bottom:16px; border:1px solid transparent; }
.alert-success{ background: var(--green-dim); color: var(--green); border-color: rgba(52,209,126,0.3); }
.alert-error{ background: var(--red-dim); color: var(--red); border-color: rgba(240,85,90,0.3); }

/* ---------- Balance card ---------- */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

.balance-card{
  background: linear-gradient(155deg, rgba(45,217,199,0.08), var(--glass-lo-strong) 45%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow:hidden;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 20px 40px -24px rgba(0,0,0,0.6);
  animation: fadeUp .35s ease both;
}
.balance-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(420px 220px at 100% 0%, rgba(45,217,199,0.10), transparent 70%);
}
.balance-label{ color: var(--text-dim); font-size:13px; margin-bottom:10px; }
.balance-row{ display:flex; align-items:flex-end; justify-content:space-between; }
.balance-amt{ font-family: var(--font-display); font-weight:800; font-size:40px; letter-spacing:-0.5px; }
.balance-tag{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; background: var(--green-dim); color:var(--green); font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; }

/* ---------- Action grid ---------- */
.action-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; }
.action-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 14px; display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.action-card:hover{ background: var(--card-hover); border-color:#2a3644; transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0,0,0,0.65); }
.action-card:active{ transform: translateY(-1px) scale(0.98); }
.action-ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; transition: transform .15s ease; }
.action-card:hover .action-ico{ transform: scale(1.08); }
.action-ico.deposit{ background: var(--teal-dim); color:var(--teal); }
.action-ico.withdraw{ background: var(--amber-dim); color:var(--amber); }
.action-ico.trade{ background: var(--green-dim); color:var(--green); }
.action-ico.convert{ background: var(--teal-dim); color:var(--teal); }
.action-label{ font-size:13.5px; font-weight:600; }

/* ---------- Tabs ---------- */
.tab-row{ display:flex; gap:28px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x:auto; }
.tab-item{ padding: 4px 2px 14px; color: var(--text-dim); font-weight:600; font-size:14.5px; cursor:pointer; position:relative; white-space:nowrap; transition: color .12s ease; }
.tab-item:hover{ color: var(--text); }
.tab-item.active{ color:var(--text); }
.tab-item.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--teal); border-radius:2px; }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.panel-title{ color: var(--text-dim); font-size:13.5px; font-weight:600; }
.link-teal{ color: var(--teal); font-size:13px; font-weight:600; transition: opacity .12s ease; }
.link-teal:hover{ opacity:0.75; }

/* ---------- Asset list ---------- */
.asset-list{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; margin-bottom:22px;
}
.asset-row{ display:flex; align-items:center; justify-content:space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); transition: background .12s ease; }
.asset-row:hover{ background: var(--glass-hi); }
.asset-row:last-child{ border-bottom:none; }
.asset-left{ display:flex; align-items:center; gap:12px; }
.asset-ico{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; }
.asset-name{ font-weight:600; font-size:14.5px; }
.asset-sym{ color: var(--text-dim); font-size:12.5px; }
.asset-right{ text-align:right; }
.asset-usd{ font-family: var(--font-num); font-weight:600; font-size:14.5px; }
.asset-qty{ color: var(--text-dim); font-size:12px; font-family: var(--font-num); }

/* ---------- Two-col layout: chart + order panel ---------- */
.trade-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:16px; margin-bottom:22px; }
@media (max-width: 880px){ .trade-grid{ grid-template-columns: 1fr; } }

.chart-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border); border-radius: var(--radius-md); padding:16px;
  transition: border-color .15s ease;
}
.chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:10px; }
.pair-title{ display:flex; align-items:center; gap:10px; }
.pair-ico{ width:26px; height:26px; border-radius:50%; background:#f7931a; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#1a1200; }
.pair-name{ font-weight:700; font-size:14.5px; }
.pair-meta{ color: var(--text-dim); font-size:12px; }
.price-now{ font-family: var(--font-num); font-weight:700; font-size:15px; }
.price-delta{ font-family: var(--font-num); font-size:12.5px; }
.up{ color: var(--green); } .down{ color: var(--red); }

.chart-wrap{ height: 220px; }

/* order panel */
.order-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border); border-radius: var(--radius-md); padding:16px;
  display:flex; flex-direction:column; gap:14px;
}
.side-row{ display:flex; gap:8px; }
.side-btn{
  flex:1; padding:10px; text-align:center; border-radius:8px; font-weight:700; font-size:13.5px; cursor:pointer;
  border:1px solid var(--border); color: var(--text-dim); background: var(--bg-elevated);
  transition: transform .1s ease, filter .15s ease;
}
.side-btn:hover{ filter:brightness(1.1); }
.side-btn:active{ transform: scale(0.98); }
.side-btn.buy.active{ background: var(--green); color:#04220f; border-color:var(--green); box-shadow: 0 6px 18px -8px rgba(52,209,126,0.5); }
.side-btn.sell.active{ background: var(--red); color:#2a0506; border-color:var(--red); box-shadow: 0 6px 18px -8px rgba(240,85,90,0.5); }

.market-tabs{ display:flex; gap:6px; }
.market-tab{ flex:1; text-align:center; padding:7px; font-size:12.5px; font-weight:600; color: var(--text-dim); background: var(--bg-elevated); border:1px solid var(--border); border-radius:7px; cursor:pointer; }
.market-tab.active{ color: var(--text); border-color:#2a3644; background: var(--card-hover); }
.market-tab.disabled{ opacity:0.45; cursor:not-allowed; }

.sl-tp-toggle{ font-size:13px; color: var(--text-dim); display:flex; align-items:center; gap:8px; }
.sl-tp-toggle input{ accent-color: var(--teal); width:15px; height:15px; }

.leverage-block{ margin-top:2px; }
.coming-soon-tag{ background: var(--amber-dim); color: var(--amber); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:0.3px; }
.leverage-slider{ width:100%; margin-top:8px; accent-color: var(--text-faint); opacity:0.5; cursor:not-allowed; }

.progress-track{ height:8px; border-radius:999px; background: var(--bg-elevated); border:1px solid var(--border); overflow:hidden; }
.progress-fill{ height:100%; border-radius:999px; transition: width .4s ease; }

.field-label{ font-size:11px; letter-spacing:0.4px; color: var(--text-faint); text-transform:uppercase; margin-bottom:6px; font-weight:700; }
.amt-input{ display:flex; align-items:center; gap:6px; background: var(--bg-elevated); border:1px solid var(--border); border-radius:9px; padding: 11px 12px; }
.amt-input input, .amt-input select{ background:none; border:none; outline:none; color: var(--text); font-family: var(--font-num); font-weight:600; font-size:15px; width:100%; }
.amt-input select{ font-family: var(--font-body); cursor:pointer; }
.amt-input select option{ background: var(--bg-elevated); color: var(--text); }
.amt-input span{ color: var(--text-dim); font-family: var(--font-num); }

.pct-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.pct-btn{ padding:8px 12px; text-align:center; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--text-dim); background: var(--bg-elevated); border:1px solid var(--border); cursor:pointer; }
.pct-btn:hover{ color: var(--text); border-color:#2a3644; }

.kv-row{ display:flex; justify-content:space-between; font-size:12.5px; color: var(--text-dim); }
.kv-row b{ color: var(--text); font-family: var(--font-num); font-weight:600; }

.submit-btn{
  margin-top:2px; padding:13px; text-align:center; border-radius:9px;
  background: linear-gradient(135deg, var(--green), #26b567);
  color:#04220f; font-weight:700; font-size:14.5px; cursor:pointer; border:none; display:block;
  transition: transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px -12px rgba(52,209,126,0.55);
}
.submit-btn:hover{ box-shadow: 0 14px 30px -12px rgba(52,209,126,0.7); }
.submit-btn:active{ transform: scale(0.98); }
.submit-btn-sell{
  background: linear-gradient(135deg, var(--red), #d1414a);
  color:#2a0506;
  box-shadow: 0 10px 24px -12px rgba(240,85,90,0.55);
}
.submit-btn-sell:hover{ box-shadow: 0 14px 30px -12px rgba(240,85,90,0.7); }

/* ---------- History / tables ---------- */
.history-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border); border-radius: var(--radius-md); padding:18px; margin-bottom:18px;
}
.hist-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.hist-tab{ display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:8px; font-size:13px; font-weight:600; color: var(--text-dim); background: var(--bg-elevated); border:1px solid var(--border); cursor:pointer; transition: background .12s ease, color .12s ease; }
.hist-tab:hover{ color: var(--text); }
.hist-tab.active{ background: var(--teal); color:#04231f; border-color: var(--teal); }
.hist-tab .count{ background: rgba(0,0,0,0.18); padding:1px 6px; border-radius:999px; font-size:11px; }
.hist-tab.active .count{ background: rgba(0,0,0,0.15); }

.empty-state{ text-align:center; padding: 38px 20px; color: var(--text-faint); font-size:13.5px; }

table.trade-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.trade-table th{ text-align:left; color: var(--text-faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border); font-size:11.5px; text-transform:uppercase; letter-spacing:0.3px; }
table.trade-table td{ padding:11px 10px; border-bottom:1px solid var(--border-soft); font-family: var(--font-num); vertical-align:middle; }
table.trade-table tr{ transition: background .1s ease; }
table.trade-table tbody tr:hover{ background: var(--glass-hi); }
table.trade-table tr:last-child td{ border-bottom:none; }
.side-tag{ padding:3px 9px; border-radius:6px; font-weight:700; font-size:11.5px; font-family: var(--font-body); }
.side-tag.buy{ background: var(--green-dim); color: var(--green); }
.side-tag.sell{ background: var(--red-dim); color: var(--red); }

/* ---------- Auth pages ---------- */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.auth-card{ width:100%; max-width:400px; background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; }
.auth-title{ font-family: var(--font-display); font-size:22px; font-weight:700; margin: 0 0 18px; text-align:center; }
.auth-foot{ text-align:center; color: var(--text-dim); font-size:13px; margin-top:18px; }
.auth-foot a{ color: var(--teal); font-weight:600; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#2a3644; border-radius:4px; }
::-webkit-scrollbar-track{ background:transparent; }

@media (max-width: 700px){
  .action-grid{ grid-template-columns: repeat(2,1fr); }
  .balance-amt{ font-size:32px; }
}

/* ---------- Grid nav overlay (opened by the hamburger button) ---------- */
.nav-overlay{
  display:none;
  position: fixed; inset:0; z-index:1000;
}
.nav-overlay.open{ display:block; }

.nav-overlay-backdrop{
  position:absolute; inset:0;
  background: rgba(6,9,13,0.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .15s ease both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp{ from{ opacity:0; transform: translateY(16px) scale(0.98); } to{ opacity:1; transform:none; } }

.nav-grid-panel{
  position:relative;
  max-width: 720px;
  margin: 8vh auto 0;
  padding: 22px;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-solid));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  animation: slideUp .2s ease both;
  max-height: 88vh;
  overflow-y: auto;
}
.nav-grid-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}

/* Grid nav cards: icon + title + short description */
.nav-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.nav-grid-card{
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nav-grid-card:hover{
  background: var(--card-hover);
  border-color: #2a3644;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -18px rgba(0,0,0,0.65);
}
.nav-grid-card:active{ transform: translateY(-1px) scale(0.98); }
.nav-grid-card.active{ border-color: var(--teal); background: var(--teal-dim); }
.nav-grid-card .action-ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; transition: transform .15s ease; }
.nav-grid-card:hover .action-ico{ transform: scale(1.08); }
.nav-grid-card-title{ font-size:13.5px; font-weight:600; }
.nav-grid-card-desc{ font-size:11px; color: var(--text-faint); line-height:1.35; }

/* Desktop: 4–6 per row depending on width */
@media (max-width: 1100px){ .nav-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 940px){ .nav-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Tablet: 3 per row */
@media (max-width: 760px){
  .nav-grid-panel{ max-width: 92vw; }
  .nav-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: 2 per row, full-height panel */
@media (max-width: 560px){
  .nav-grid-panel{ margin: 0; max-width:none; height:100%; max-height:none; border-radius:0; }
  .nav-grid{ grid-template-columns: repeat(2, 1fr); }
  .nav-grid-card-desc{ font-size:10.5px; }
}

/* ---------- Notification bell + dropdown ---------- */
.notif-wrap{ position:relative; }
.dot-alert{
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; padding:0 3px; border-radius:999px;
  background: var(--red); color:#fff; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid var(--bg);
}
.notif-dropdown{
  display:none;
  position:absolute; top:calc(100% + 10px); right:0;
  width:320px; max-height:400px; overflow-y:auto;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-solid));
  border:1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,0.7);
  z-index: 900;
  animation: slideUp .15s ease both;
}
.notif-dropdown.open{ display:block; }
.notif-dropdown-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border-soft);
  font-size:13px; font-weight:700;
}
.notif-item{ padding:12px 14px; border-bottom:1px solid var(--border-soft); }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background: rgba(45,217,199,0.05); }
.notif-item-title{ font-size:13px; font-weight:600; }
.notif-item-msg{ font-size:12px; color: var(--text-dim); margin-top:3px; line-height:1.4; }
.notif-item-time{ font-size:10.5px; color: var(--text-faint); margin-top:5px; }

@media (max-width: 480px){
  .notif-dropdown{ position:fixed; top:64px; right:8px; left:8px; width:auto; }
}

/* ---------- Crypto wallet deposit box ---------- */
.wallet-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.wallet-tab{ padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color: var(--text-dim); background: var(--bg-elevated); border:1px solid var(--border); cursor:pointer; transition: background .12s ease, color .12s ease; }
.wallet-tab:hover{ color: var(--text); }
.wallet-tab.active{ background: var(--teal); color:#04231f; border-color: var(--teal); }
.wallet-address-row{ display:flex; align-items:center; gap:10px; background: var(--bg-elevated); border:1px solid var(--border); border-radius:9px; padding:11px 12px; }
.wallet-address-text{ flex:1; font-family: var(--font-num); font-size:12.5px; color: var(--text); word-break: break-all; }
.wallet-copy-btn{ flex-shrink:0; }

/* ---------- Real estate listings ---------- */
.property-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 900px){ .property-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .property-grid{ grid-template-columns: 1fr; } }

.property-card{
  display:block;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo));
  border:1px solid var(--border); border-radius: var(--radius-md);
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.property-card:hover{ transform: translateY(-3px); border-color:#2a3644; box-shadow: 0 14px 28px -18px rgba(0,0,0,0.65); }
.property-card-img{
  height:150px; background-size:cover; background-position:center;
  background-color: var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; font-size:34px; color: var(--text-faint);
}
.property-card-body{ padding:16px; }
.property-card-title{ font-weight:700; font-size:14.5px; margin-bottom:4px; }
.property-card-loc{ color: var(--text-dim); font-size:12px; }

.property-detail-img{
  height:260px; border-radius: var(--radius-md); background-size:cover; background-position:center;
  background-color: var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; font-size:46px; color: var(--text-faint);
}