:root{
  --bg0:#060B1A;
  --bg1:#0B1026;
  --card: rgba(255,255,255,.06);
  --cardBorder: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --accent:#7C3AED;
  --accent2:#06B6D4;
  --topbar-h: 64px;
}

html, body { height: 100%; margin: 0; padding: 0; }

body{
  margin: 0;
  padding: 0;
  background:
    radial-gradient(900px 400px at 10% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 400px at 90% 30%, rgba(6,182,212,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}
.web3-glass{
  background: var(--card);
  border: 1px solid var(--cardBorder);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.web3-ring{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 12px 40px rgba(0,0,0,.35);
}

.web3-gradient{
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(6,182,212,.18));
}

.web3-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.web3-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.web3-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.75rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}

.chip--ok{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); }
.chip--warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.chip--bad{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.6rem .9rem;
  border-radius:.85rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn--primary{
  border-color: rgba(124,58,237,.45);
  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(6,182,212,.55));
}

.input{
  width: 100%;
  padding: .65rem .85rem;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  outline: none;
}
.input:focus{
  border-color: rgba(124,58,237,.70);
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

.table{ width:100%; border-collapse: separate; border-spacing: 0; }
.table th{ text-align:left; font-weight:600; font-size:.8rem; color: rgba(255,255,255,.70); padding:.85rem .9rem; border-bottom:1px solid rgba(255,255,255,.10); white-space:nowrap; }
.table td{ padding:.85rem .9rem; border-bottom:1px solid rgba(255,255,255,.06); vertical-align: top; }
.table tr:hover td{ background: rgba(255,255,255,.03); }

.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
}
.bottom-nav-inner{
  max-width: 960px;
  margin: 0 auto;
  border-radius: 1.25rem;
  overflow: hidden;
}
.bottom-nav a{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  padding:.55rem .25rem;
  font-size: .7rem;
  color: rgba(255,255,255,.70);
  border-top: 1px solid rgba(255,255,255,.10);
}
.bottom-nav a svg{ opacity: .9; }
.bottom-nav a[data-active="1"]{
  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.20));
}
.bottom-nav a[data-active="1"] .nav-dot{
  opacity: 1;
}
.nav-dot{ width: 18px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.65); opacity: 0; }

.page-pad-bottom{ padding-bottom: 150px; }
@media (min-width: 640px){ .page-pad-bottom{ padding-bottom: 170px; } }

.btn--sm{ padding:.4rem .6rem; border-radius:.75rem; font-size:.75rem; }
.btn--danger{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.btn--danger:hover{ border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.14); }


/* --- App-style header + dashboard (sample UI) --- */
.app-topbar{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.app-topbar{ padding-top: 0; }
.app-topbar .web3-glass{ padding-top: 0; }
.app-topbar-inner{ max-width: 1100px; margin: 0 auto; padding: .6rem 1rem; display:flex; align-items:center; justify-content: space-between; gap: .75rem; }

.icon-btn{
  width: 42px; height: 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.icon-btn:hover{ background: rgba(255,255,255,.10); }

.icon-row{ display:flex; align-items:center; gap:.5rem; }

.connected-pill{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-width: 160px;
  height: 42px;
  padding: 0 .9rem;
  border-radius: 999px;
  border: 1px solid rgba(6,182,212,.35);
  background: linear-gradient(135deg, rgba(6,182,212,.22), rgba(124,58,237,.18));
  color: rgba(255,255,255,.92);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.notif-dot{ position: relative; }
.notif-dot::after{
  content:'';
  position:absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

.dash-wrap{ max-width: 1100px; margin: 0 auto; padding: calc(var(--topbar-h) + .65rem) 1rem 1rem; }



/* --- Dashboard (v2) --- */
.dash-mini{ display:flex; align-items:stretch; justify-content: space-between; gap: 10px; margin-top: 2px; }
.market-strip{ flex: 1; display:flex; align-items:center; gap: 10px; padding: .55rem .65rem; border-radius: 16px; overflow:hidden; }
.market-item{ display:flex; align-items:center; gap: 6px; font-size: .74rem; color: rgba(255,255,255,.78); white-space: nowrap; }
.market-dot{ width: 7px; height: 7px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(0,0,0,.22); }
.market-sym{ font-weight: 900; color: rgba(255,255,255,.90); }
.market-val{ color: rgba(255,255,255,.70); }

.balance-pill{ display:flex; align-items:center; gap: 8px; padding: .55rem .65rem; border-radius: 16px; font-size: .75rem; white-space: nowrap; }
.balance-pill strong{ font-weight: 900; }

.welcome-block{ text-align: center; margin: .85rem 0 .65rem; }
.welcome-title{ font-weight: 950; font-size: 1.06rem; letter-spacing: -.02em; }
.welcome-sub{ font-size: .78rem; color: rgba(255,255,255,.65); margin-top: 2px; }

.balance-card{ border-radius: 22px; padding: 16px; }
.balance-card-head{ text-align: center; }
.balance-card-title{ font-size: .72rem; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.balance-card-sub{ margin-top: 6px; font-size: .78rem; color: rgba(255,255,255,.62); }
.balance-amount{ text-align:center; font-size: 1.72rem; font-weight: 950; margin-top: 10px; letter-spacing: -.02em; }
.balance-meta{ display:flex; align-items:center; justify-content:center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.balance-updated{ text-align:center; font-size: .72rem; color: rgba(255,255,255,.55); margin-top: 10px; }
.balance-actions{ margin-top: 12px; display:grid; gap: 10px; }
.balance-btn{ display:flex; align-items:center; justify-content:center; height: 44px; border-radius: 14px; font-weight: 900; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); }
.balance-btn:hover{ background: rgba(255,255,255,.10); }
.balance-btn:active{ transform: translateY(1px); }
.balance-actions .balance-btn:first-child{ border-color: rgba(124,58,237,.45); background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(6,182,212,.45)); }

.stats-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.stat-card{ border-radius: 18px; padding: 14px; }
.stat-top{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.stat-label{ font-size: .72rem; color: rgba(255,255,255,.68); font-weight: 800; }
.stat-ico{ width: 28px; height: 28px; border-radius: 12px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-weight: 900; color: rgba(255,255,255,.88); }
.stat-value{ margin-top: 8px; font-size: .98rem; font-weight: 950; letter-spacing: -.01em; }
.stat-foot{ margin-top: 8px; font-size: .72rem; color: rgba(255,255,255,.55); display:flex; align-items:center; gap: 8px; }
.stat-dot{ width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.28); }

.verify-card{ margin-top: 12px; border-radius: 22px; padding: 16px; text-align:center; }
.verify-icon{ width: 44px; height: 44px; border-radius: 16px; margin: 0 auto 10px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.12); background: rgba(239,68,68,.10); color: rgba(255,255,255,.92); }
.verify-title{ font-weight: 950; letter-spacing: -.01em; }
.verify-sub{ margin-top: 4px; font-size: .78rem; color: rgba(255,255,255,.62); }
.verify-btn{ margin-top: 12px; display:flex; align-items:center; justify-content:center; gap: 8px; height: 44px; border-radius: 14px; font-weight: 900; border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.16); color: rgba(255,255,255,.95); }
.verify-btn:hover{ background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.55); }
.verify-caret{ opacity: .9; }

@media (min-width: 640px){
  .stats-grid{ gap: 12px; }
}

@media (max-width: 360px){
  .stats-grid{ grid-template-columns: 1fr; }
}

@media (min-width: 640px){
  .dash-mini{ margin-top: 6px; }
  .balance-actions{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px){
  .dash-mini{ flex-direction: column; }
  .balance-pill{ justify-content: space-between; }
  .market-strip{ flex-wrap: wrap; }
}
.greeting-card{ border-radius: 18px; padding: 14px; }
.greeting-row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; }
.greeting-left{ display:flex; align-items:center; gap: 12px; }
.avatar{
  width: 44px; height: 44px;
  border-radius: 14px;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.avatar img{ width:100%; height:100%; object-fit: cover; }

.greet-title{ font-weight: 800; font-size: 1rem; letter-spacing:-.01em; }
.greet-sub{ font-size: .78rem; color: rgba(255,255,255,.68); }

.wallet-card{ border-radius: 18px; padding: 18px; }
.wallet-hero{
  background: linear-gradient(135deg, rgba(6,182,212,.22), rgba(59,130,246,.55));
  border: 1px solid rgba(255,255,255,.12);
}
.wallet-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items:center; }
.wallet-amount{ font-size: 1.6rem; font-weight: 900; letter-spacing:-.02em; }
.wallet-muted{ font-size: .78rem; color: rgba(255,255,255,.72); }
.wallet-lines{ display:flex; flex-direction: column; gap: .35rem; }
.wallet-line{ display:flex; justify-content: space-between; gap: .75rem; font-size: .78rem; color: rgba(255,255,255,.80); }

.action-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.action-tile{ border-radius: 16px; padding: 14px; text-align:center; }
.action-ico{ display:flex; align-items:center; justify-content:center; width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.action-label{ font-size: .8rem; font-weight: 700; }

.section-label{ margin-top: 14px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.70); }

.nav-card{ border-radius: 18px; padding: 14px; }
.nav-mini{ display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.nav-mini a{ text-align:center; padding: 10px 6px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); color: rgba(255,255,255,.78); font-size: .7rem; }
.nav-mini a:hover{ background: rgba(255,255,255,.08); }
.nav-mini svg{ margin: 0 auto 6px; display:block; }

@media (min-width: 1024px){
  .dash-wrap{ padding: calc(var(--topbar-h) + 1.5rem) 1rem 1rem; }
  .connected-pill{ min-width: 220px; }
}

@media (max-width: 390px){
  .connected-pill{ min-width: 140px; }
  .wallet-grid{ grid-template-columns: 1fr; }
  .action-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-mini{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.notif-modal{ position: fixed; inset: 0; z-index: 60; display: none; }
.notif-modal[data-open="1"]{ display: block; }
.notif-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.notif-sheet{
  position: absolute;
  top: calc(var(--topbar-h) + 8px);
  right: 12px;
  left: 12px;
  max-width: 520px;
  margin-left: auto;
  border-radius: 18px;
  overflow: hidden;
}
@media (min-width: 640px){
  .notif-sheet{ top: calc(var(--topbar-h) + 12px); right: 16px; left: auto; width: 420px; }
}
.notif-head{ display:flex; align-items:center; justify-content: space-between; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.notif-title{ font-weight: 800; letter-spacing:-.01em; }
.notif-list{ max-height: 60vh; overflow: auto; }
.notif-item{ padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.notif-item:hover{ background: rgba(255,255,255,.04); }
.notif-item .t{ font-weight: 700; font-size: .9rem; }
.notif-item .b{ margin-top: 4px; font-size: .8rem; color: rgba(255,255,255,.70); }
.notif-item .d{ margin-top: 6px; font-size: .72rem; color: rgba(255,255,255,.55); }




.token-card{ border-radius: 18px; overflow: hidden; }
.token-row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.token-row:last-child{ border-bottom: 0; }
.token-left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.token-icon{ width: 36px; height: 36px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color: #fff; font-weight: 900; font-size: .72rem; border:1px solid rgba(255,255,255,.12); overflow:hidden; }
.token-name{ font-weight: 800; font-size: .92rem; line-height: 1.1; }
.token-sub{ font-size: .75rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.token-right{ text-align:right; }
.token-price{ font-weight: 900; font-size: .92rem; }
.token-usd{ font-size: .75rem; color: rgba(255,255,255,.55); margin-top: 2px; }

.apy-banner{ border-radius: 18px; padding: 12px 14px; display:flex; align-items:center; justify-content: space-between; gap: 12px; }
.apy-banner .t{ font-weight: 800; }
.apy-banner .b{ font-size: .8rem; color: rgba(255,255,255,.70); }

.token-icon img{ width:100%; height:100%; object-fit: cover; display:block; }

/* --- Transactions (dashboard) --- */
.tx-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 12px; }
.tx-more{ font-size: .78rem; color: rgba(255,255,255,.75); padding: .25rem .55rem; border-radius: 999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.tx-more:hover{ background: rgba(255,255,255,.08); }
.tx-card{ border-radius: 18px; overflow: hidden; }
.tx-row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.tx-row:last-child{ border-bottom: 0; }
.tx-left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.tx-ico{ width: 36px; height: 36px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight: 950; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); }
.tx-meta{ min-width: 0; }
.tx-title{ font-weight: 900; font-size: .92rem; line-height: 1.15; }
.tx-sub{ font-size: .75rem; color: rgba(255,255,255,.62); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-right{ text-align:right; display:flex; flex-direction: column; align-items:flex-end; gap: 6px; }
.tx-date{ font-size: .72rem; color: rgba(255,255,255,.55); }
.tx-empty{ padding: 14px; font-size: .85rem; color: rgba(255,255,255,.65); }






/* Ensure content not hidden behind bottom nav */
.dash-wrap.page-pad-bottom{ padding-bottom: calc(240px + env(safe-area-inset-bottom)); }
@media (min-width: 640px){ .dash-wrap.page-pad-bottom{ padding-bottom: calc(260px + env(safe-area-inset-bottom)); } }


/* --- Sidebar (hamburger menu) --- */
.sidebar-modal{ position: fixed; inset: 0; z-index: 70; display: none; }
.sidebar-modal[data-open="1"]{ display: block; }
.sidebar-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.60); }
.sidebar-sheet{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(86vw, 340px);
  border-radius: 0 22px 22px 0;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}
.sidebar-head{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.sidebar-user{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.sidebar-avatar{ width: 42px; height: 42px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); flex: 0 0 auto; }
.sidebar-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.sidebar-avatar--fallback{ display:flex; align-items:center; justify-content:center; font-weight: 950; color: rgba(255,255,255,.92); }
.sidebar-user-meta{ min-width: 0; }
.sidebar-user-name{ font-weight: 950; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-sub{ margin-top: 2px; font-size: .72rem; color: rgba(255,255,255,.60); }

.sidebar-body{ padding: 10px 10px calc(18px + env(safe-area-inset-bottom)); overflow: auto; }
.sidebar-section{ margin: 10px 8px 6px; font-size: .70rem; font-weight: 900; letter-spacing: .10em; color: rgba(255,255,255,.60); }
.sidebar-link{ display:flex; align-items:center; gap: 12px; padding: 12px 12px; margin: 4px 6px; border-radius: 16px; color: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.sidebar-link:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.sidebar-link[data-active="1"]{ border-color: rgba(124,58,237,.45); background: linear-gradient(135deg, rgba(124,58,237,.26), rgba(6,182,212,.12)); }
.sidebar-ico{ width: 34px; height: 34px; border-radius: 14px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); color: rgba(255,255,255,.92); flex: 0 0 auto; }
.sidebar-ico svg{ width: 18px; height: 18px; display:block; }
.sidebar-text{ font-weight: 800; }

/* Sidebar scroll + sizing fixes */
.sidebar-sheet{ display:flex; flex-direction: column; }
.sidebar-head{ flex: 0 0 auto; }
.sidebar-body{ flex: 1 1 auto; min-height: 0; }

.sidebar-link{ font-size: .85rem; padding: 10px 12px; }
.sidebar-text{ font-size: .88rem; }
.sidebar-section{ font-size: .66rem; }

/* --- KYC form --- */
.kyc-card{ border-radius: 18px; padding: 14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.kyc-card-title{ font-weight: 950; letter-spacing: -.01em; }
.kyc-card-sub{ margin-top: 4px; font-size: .78rem; color: rgba(255,255,255,.62); }

.kyc-progress .bar{ height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.kyc-progress .fill{ height: 100%; width: 33%; background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(6,182,212,.55)); }
.kyc-progress .steps{ margin-top: 10px; display:flex; align-items:center; justify-content: space-between; gap: 10px; font-size: .72rem; color: rgba(255,255,255,.65); }
.kyc-progress .step{ display:flex; align-items:center; gap: 8px; white-space: nowrap; }
.kyc-progress .step span{ width: 20px; height: 20px; border-radius: 999px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.20); font-weight: 900; }
.kyc-progress .step.active{ color: rgba(255,255,255,.90); }
.kyc-progress .step.active span{ border-color: rgba(124,58,237,.55); background: rgba(124,58,237,.22); }