/* AurumMY — Modern minimalist offline demo */
:root{
  --bg:#0a0d14;
  --surface:#0f1420;
  --card:#121a2a;
  --text:#f3f6ff;
  --muted:#97a4c2;
  --line:rgba(255,255,255,.08);

  --gold:#f6c756;
  --silver:#cfd6df;
  --ok:#3fe7a5;
  --danger:#ff5c6c;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 18px;
  --r2: 22px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(246,199,86,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 0%, rgba(207,214,223,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}

.appShell{
  width:min(430px, 100vw);
  height:min(900px, 100vh);
  padding:14px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 4px 12px;
}

.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
}
.brandName{font-weight:900; letter-spacing:.2px;}
.brandTag{font-size:12px;color:var(--muted);margin-top:2px}

.phone{
  height:calc(100% - 64px);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.screen{
  height:100%;
  overflow:auto;
  padding:14px 14px 86px;
}

.hidden{display:none !important;}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:14px;
  margin-bottom:12px;
}

.hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

.row{display:flex;align-items:center}
.between{justify-content:space-between}
.gap{gap:10px}
.stackRight{text-align:right}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.title{font-weight:860}
.big{font-size:28px;font-weight:950}
.huge{font-size:28px;font-weight:950}
.walletAmt{font-size:18px;font-weight:900}

.priceLine{display:flex;align-items:baseline;gap:10px;margin-top:6px}

.metalTabs{
  display:flex;
  gap:8px;
  margin-top:6px;
}
.metalTabs.compact{margin-top:10px}
.metalTab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-weight:900;
}
.metalTab.active{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.16);
}
.pill.up{color:var(--ok); border-color:rgba(63,231,165,.30)}
.pill.down{color:var(--danger); border-color:rgba(255,92,108,.28)}

.chartWrap{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
canvas{display:block;width:100%;height:auto;background:rgba(0,0,0,.18)}

.ctaRow{display:flex;gap:10px;margin-top:12px}

button{
  border:1px solid transparent;
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:16px;
  padding:10px 12px;
  font-weight:850;
  cursor:pointer;
  transition: transform .06s ease, background .18s ease, border-color .18s ease;
}
button:active{transform:scale(.99)}
button:hover{background:rgba(255,255,255,.08)}
.primary{
  background:linear-gradient(135deg, rgba(246,199,86,1), rgba(214,167,56,.95));
  color:#1b1203;
  border-color:rgba(0,0,0,.12);
}
.secondary{
  border-color:rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
}
.danger{
  background:rgba(255,92,108,.16);
  border-color:rgba(255,92,108,.24);
  color:#ffd0d6;
}
.full{width:100%}

.iconBtn{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  padding:0;
}
.iconBtn.sm{width:40px;height:40px;border-radius:14px}

.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
  font-weight:900;
}
.smallchip{padding:7px 10px;font-size:12px}
.bigchip{padding:10px 14px}

.hr{height:1px;background:var(--line);margin:12px 0}
.divider{width:1px;background:var(--line)}

.holdings2{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:10px;
  padding:12px;border-radius:18px;
  background:rgba(0,0,0,.14);
  border:1px solid var(--line);
}
.holdItem{min-width:0}
.hVal{font-size:18px;font-weight:950}

.listHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}

.tx{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
}
.tx:last-child{border-bottom:none}
.txLeft{display:flex;align-items:center;gap:10px}
.badge{
  width:34px;height:34px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.badge.gold{color:rgba(246,199,86,1)}
.badge.silver{color:rgba(207,214,223,1)}
.txTitle{font-weight:900}
.txSub{font-size:12px;color:var(--muted)}
.txAmt{font-weight:950}
.txAmt.pos{color:var(--ok)}
.txAmt.neg{color:var(--danger)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tile{
  display:flex;gap:10px;align-items:center;
  text-align:left;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
}
.tileIcon{font-size:16px;font-weight:900;opacity:.9}
.tileTitle{font-weight:950}
.tileSub{font-size:12px;color:var(--muted);margin-top:2px}

.bottomNav{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-around;
  padding:10px 10px 12px;
  background:rgba(8,10,16,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.10);
}
.navBtn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:74px;
  padding:8px 8px;
  border-radius:18px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-weight:900;
}
.navBtn.active{
  color:var(--text);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
.navIcon{display:flex}
.navTxt{font-size:11px}

.field{margin-top:12px}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
input{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--text);
  font-size:16px;
  outline:none;
}
input:focus{border-color:rgba(246,199,86,.55);box-shadow:0 0 0 4px rgba(246,199,86,.12)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

.segmented{
  display:flex;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  overflow:hidden;
  margin-top:10px;
}
.seg{
  flex:1;
  padding:10px 8px;
  border-radius:0;
  border:none;
  background:transparent;
  color:var(--muted);
  font-weight:950;
}
.seg.active{
  background:rgba(255,255,255,.08);
  color:var(--text);
}

.quote{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.14);
}
.qRow{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.qRow.bold{font-weight:950}

.assetHero2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.assetBig{
  padding:12px;border-radius:18px;border:1px solid var(--line);
  background:rgba(0,0,0,.14);
}

.txList{margin-top:10px}
.filterPills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.avatar{
  width:46px;height:46px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.profileList{margin-top:12px}
.pRow{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 10px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  margin-bottom:10px;
}
.chev{color:var(--muted);font-weight:950}

.modalBackdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.56);
  display:flex;align-items:flex-end;justify-content:center;
  padding:16px;
  z-index:50;
}
.modal{
  width:min(420px, 100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,26,42,.98), rgba(10,13,20,.98));
  box-shadow: var(--shadow);
  padding:14px;
}
.modalActions{display:flex;gap:10px;margin-top:12px}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
  z-index:60;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-weight:900;
}