/* ============================================================
   Boro — iOS artboard design system
   393 x 852 portrait. Native iOS fintech, Polestar restraint.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root{
  --bg:#FDFCF9; --white:#FFFFFF; --black:#070808; --text:#111214;
  --muted:#AEB1B5; --muted-d:#646A72; --line:#E7E8EA;
  --soft:#F2F4F6; --soft-2:#F7F8F9;
  --blue:#075DF4; --blue-soft:#DDE8FF; --green:#45B86B;
  --red:#EA565D; --orange:#FF9918; --purple:#8B6BFF;
  --num-tracking:-0.055em;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html,body{margin:0;padding:0;}
body{
  background:#e6e5e1; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter','SF Pro Display','SF Pro Text',system-ui,sans-serif;
  color:var(--text);
}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;vertical-align:middle;}
.fill .material-symbols-outlined,.material-symbols-outlined.fill{font-variation-settings:'FILL' 1;}

/* ---- Artboard ---- */
.screen{
  position:relative; width:393px; height:852px;
  background:var(--bg); overflow:hidden;
}
.screen.embed{box-shadow:none;}
.abs{position:absolute;}

/* ---- Status bar ---- */
.statusbar{position:absolute;top:0;left:0;right:0;height:44px;z-index:50;}
.statusbar .time{position:absolute;left:46px;top:15px;font-size:17px;font-weight:600;letter-spacing:-0.01em;color:#000;}
.statusbar .sb-ic{position:absolute;right:20px;top:17px;display:flex;gap:7px;align-items:center;}
.statusbar.dark .time{color:#fff;}
.statusbar.dark .sb-ic svg [fill="#000"],.statusbar.dark .sb-ic svg [stroke="#000"]{fill:#fff;stroke:#fff;}

/* ---- Logo: B in circle, outline only ---- */
.logo{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--black);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--black);
  line-height:1;letter-spacing:0;}
.logo.dark{border-color:#fff;color:#fff;}

/* ---- Home indicator ---- */
.home-ind{position:absolute;left:50%;transform:translateX(-50%);bottom:9px;width:134px;height:5px;border-radius:3px;background:#0c0d0e;}
.home-ind.light{background:rgba(255,255,255,.85);}

/* ---- Type helpers ---- */
.t-title{font-size:22px;font-weight:650;letter-spacing:-0.01em;color:var(--black);}
.t-screen{font-size:21px;font-weight:650;letter-spacing:-0.01em;}
.t-row{font-size:19px;font-weight:650;letter-spacing:-0.01em;}
.t-muted{font-size:17px;color:var(--muted);font-weight:400;}
.t-muted-d{color:var(--muted-d);}
.num-balance{font-weight:650;letter-spacing:var(--num-tracking);line-height:.95;}
.num-input{font-weight:600;letter-spacing:-0.045em;line-height:1;}

/* ---- Pills / buttons ---- */
.btn-primary{display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;
  border-radius:29px;font-weight:650;font-size:17px;border:0;}
.btn-dark{display:flex;align-items:center;justify-content:center;background:var(--black);color:#fff;border-radius:29px;font-weight:650;font-size:17px;border:0;}
.soft-pill{background:var(--soft);border-radius:21px;display:flex;align-items:center;justify-content:center;font-weight:600;}
.green-pill{background:rgba(69,184,107,.12);color:var(--green);border-radius:999px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:3px;padding:3px 9px;}

/* ---- Cards ---- */
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;}
.card-lg{background:var(--white);border:1px solid var(--line);border-radius:22px;}

/* ---- Token chips ---- */
.token{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;}
.token.btc{background:var(--orange);}
.token.usdc{background:var(--blue);}
.token.bor{background:var(--black);}

/* ---- Floating bottom action bar ---- */
.dock{position:absolute;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);}
.shadow-soft{box-shadow:0 6px 24px -8px rgba(12,14,16,.18),0 2px 8px -4px rgba(12,14,16,.12);}
.shadow-fab{box-shadow:0 10px 26px -8px rgba(7,93,244,.28),0 4px 10px -4px rgba(0,0,0,.18);}

/* keypad */
.keypad{position:absolute;left:24px;width:345px;display:grid;grid-template-columns:repeat(3,1fr);}
.keypad button{background:transparent;border:0;font-family:inherit;font-size:36px;font-weight:400;color:var(--text);
  height:54px;display:flex;align-items:center;justify-content:center;letter-spacing:-0.02em;}
.keypad button:active{opacity:.4;}
.keypad .sym{font-size:30px;}