@font-face{
  font-family:Inter;
  src:url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#070E18;
  --bg-elev:#101C2E;
  --card:#152338;
  --line:rgba(226,184,79,.18);
  --line-strong:rgba(226,184,79,.35);
  --gold:#E2B84F;
  --gold-soft:#F0D78C;
  --ivory:#F6F1E4;
  --muted:#C5CDD8;
  --dim:#9AA3B2;
  --up:#8BE0A8;
  --up-dim:#6FBF8C;
  --nav:#0B1524;
  --chip:#1A2A42;
  --input:#0C1726;
  --danger-bg:transparent;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:390px;height:844px;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Noto Sans",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ivory);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" 1,"cv11" 1;
  position:relative;
}

.sb{
  height:47px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 28px 0 34px;
  font-weight:600;
  font-size:16px;
  color:var(--ivory);
  letter-spacing:-.2px;
}
.sbi{display:flex;gap:6px;align-items:center}

.ex{
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  color:var(--gold-soft);
  text-transform:uppercase;
}

.head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:4px 0 12px;
  min-height:56px;
}
.head h1{
  font-size:28px;
  font-weight:700;
  letter-spacing:-.6px;
  line-height:1.15;
}
.kicker{
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:3px;
}

.scr{
  position:absolute;
  top:47px;
  left:0;
  right:0;
  bottom:84px;
  overflow:hidden;
  padding:2px 20px 8px;
}
.scr.lock{
  bottom:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 28px;
}

.hb{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  width:134px;
  height:5px;
  border-radius:3px;
  background:var(--ivory);
  opacity:.85;
  z-index:6;
}

.nav{
  position:absolute;
  left:0;right:0;bottom:0;
  height:84px;
  background:var(--nav);
  border-top:1px solid var(--line);
  display:flex;
  padding:6px 4px 0;
  z-index:5;
}
.nav a{
  flex:1;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  font-size:11px;
  font-weight:600;
  color:var(--dim);
  text-decoration:none;
  letter-spacing:-.1px;
}
.nav a .ico{
  width:44px;
  height:32px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav a.on{color:var(--gold-soft)}
.nav a.on .ico{background:rgba(226,184,79,.14);color:var(--gold)}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px;
}
.hero{
  background:linear-gradient(180deg,#1A2C46 0%,#132033 100%);
  border:1px solid var(--line-strong);
  border-radius:22px;
  padding:18px 18px 16px;
}

.money{display:flex;flex-direction:column;font-variant-numeric:tabular-nums lining-nums}
.money .usd{font-weight:700;letter-spacing:-.8px;color:var(--ivory);line-height:1.05}
.money .cad{font-weight:500;color:var(--muted);letter-spacing:-.2px;line-height:1.2}
.money.lg .usd{font-size:40px}
.money.lg .cad{font-size:17px;margin-top:5px}
.money.md .usd{font-size:22px;letter-spacing:-.4px}
.money.md .cad{font-size:15px;margin-top:2px}
.money.sm .usd{font-size:17px;letter-spacing:-.3px}
.money.sm .cad{font-size:13px;margin-top:1px}
.money.up .usd{color:var(--up)}
.money.up .cad{color:var(--up-dim)}

.label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:-.1px;
}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:28px;
  padding:0 10px;
  border-radius:14px;
  background:var(--chip);
  border:1px solid var(--line);
  color:var(--ivory);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.1px;
  white-space:nowrap;
}

.item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  min-height:76px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
}
.thumb{
  width:52px;
  height:52px;
  border-radius:12px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.item .meta{flex:1;min-width:0}
.item .name{
  font-size:16px;
  font-weight:650;
  letter-spacing:-.3px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item .qty{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-top:2px;
}

.seg{
  display:flex;
  height:44px;
  padding:3px;
  border-radius:12px;
  background:#0C1726;
  border:1px solid var(--line);
}
.seg button{
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:16px;
  font-weight:650;
  border-radius:9px;
  letter-spacing:-.2px;
}
.seg button.on{
  background:rgba(226,184,79,.16);
  color:var(--gold-soft);
}

.field{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:44px;
  height:48px;
  padding:0 12px;
  background:var(--input);
  border:1px solid var(--line);
  border-radius:12px;
}
.field .fl{
  font-size:11px;
  font-weight:650;
  color:var(--gold);
  letter-spacing:.2px;
  line-height:1;
  margin-bottom:3px;
}
.field .fv{
  font-size:16px;
  font-weight:500;
  color:var(--ivory);
  letter-spacing:-.2px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.field .ph{color:var(--dim)}

.btn{
  height:48px;
  min-height:44px;
  border:0;
  border-radius:14px;
  background:var(--gold);
  color:#1A1203;
  font:inherit;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.2px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-text{
  min-height:44px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:650;
  color:var(--gold-soft);
  letter-spacing:-.2px;
  background:none;
  border:0;
}

.loc-choice{
  display:flex;
  gap:8px;
}
.loc-choice .pick{
  flex:1;
  height:44px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--input);
  color:var(--muted);
  font:inherit;
  font-size:16px;
  font-weight:650;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loc-choice .pick.on{
  border-color:var(--gold);
  background:rgba(226,184,79,.12);
  color:var(--gold-soft);
}

.buy{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.buy:last-child{border-bottom:0}
.buy .when{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:-.1px;
}
.buy .what{
  font-size:15px;
  font-weight:650;
  letter-spacing:-.2px;
  line-height:1.25;
  margin:2px 0 3px;
}
.buy .sub{
  font-size:13px;
  color:var(--muted);
  font-weight:500;
}
.buy .amt{text-align:right;flex:none}

.note{
  font-size:13px;
  font-weight:500;
  color:var(--dim);
  letter-spacing:-.1px;
}

.place{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px;
}
.place.on{
  border-color:var(--line-strong);
  background:linear-gradient(180deg,#1A2C46 0%,#152338 100%);
}
.place .title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.3px;
}
.metal-line{
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:-.1px;
}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* v0.2 */
.sync{
  font-size:13px;
  font-weight:550;
  color:var(--dim);
  letter-spacing:-.1px;
  line-height:1.3;
  text-align:right;
}
.banner{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  background:#E2B84F;
  color:#1A1203;
  font-size:14px;
  font-weight:650;
  letter-spacing:-.15px;
  line-height:1.25;
  margin:0 0 10px;
}
.banner svg{flex:none}
.item{min-height:64px;padding:8px 10px}
.item.compact{min-height:64px}
.chip.view{
  background:rgba(226,184,79,.12);
  border-color:var(--line-strong);
  color:var(--gold-soft);
  height:auto;
  min-height:28px;
  padding:4px 8px;
  line-height:1.15;
  white-space:normal;
  text-align:center;
  max-width:88px;
}
.link-btn{
  min-height:44px;
  padding:10px 4px 10px 12px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-size:16px;
  font-weight:650;
  color:var(--gold-soft);
  letter-spacing:-.2px;
  background:none;
  border:0;
  text-decoration:none;
  white-space:nowrap;
}
.idle-note{
  margin-top:8px;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
  text-align:center;
  letter-spacing:-.15px;
  line-height:1.35;
  max-width:280px;
}
.passkey-note{
  margin-top:8px;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
  text-align:center;
  letter-spacing:-.15px;
}
.spot-label{
  font-size:13px;
  font-weight:500;
  color:var(--dim);
  letter-spacing:-.1px;
  line-height:1.4;
  margin-top:10px;
}
.spot-label strong{
  color:var(--ivory);
  font-weight:650;
}
.dimmer{
  position:absolute;
  inset:0;
  background:rgba(5,10,16,.62);
  z-index:8;
}
.confirm{
  position:absolute;
  left:10px;right:10px;
  bottom:16px;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:22px;
  padding:16px 16px 18px;
  z-index:9;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.confirm h2{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.35px;
  margin:0 0 4px;
}
.confirm .rows{margin:12px 0 14px}
.confirm .cr{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  letter-spacing:-.15px;
}
.confirm .cr:last-child{border-bottom:0}
.confirm .ck{color:var(--muted);font-weight:550;flex:none}
.confirm .cv{font-weight:650;text-align:right}
.place .viewline{
  font-size:13px;
  font-weight:600;
  color:var(--gold-soft);
  margin-top:8px;
  letter-spacing:-.1px;
  line-height:1.3;
}