/* ============================================================
   Sales Analytics · iOS app — design system (mobyte.ai tokens)
   Palette: only brand hex. Accent used sparingly. Geist stack.
   ============================================================ */
:root{
  --bg:#ffffff;
  --surface:#f4f2fd;
  --fg:#0c0618;
  --muted:#5f5b67;
  --border:#e6dfff;
  --accent:#5a28ff;
  --accent-2:#1447e6;

  --r-lg:28px; --r-md:18px; --r-sm:12px; --r-pill:999px;

  --shadow:0 20px 50px rgba(12,6,24,.10);
  --shadow-sm:0 6px 18px rgba(12,6,24,.06);
  --shadow-accent:0 18px 44px rgba(90,40,255,.22);
  --grad:linear-gradient(135deg,#5a28ff 0%,#1447e6 100%);

  --font:"Geist",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--fg);
  background:
    radial-gradient(1200px 700px at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    #f4f2fd;
  -webkit-font-smoothing:antialiased;
  display:grid;place-items:center;min-height:100vh;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- Phone shell ---------- */
.phone{
  position:relative;width:390px;height:844px;background:var(--bg);
  border-radius:52px;overflow:hidden;
  box-shadow:0 40px 90px rgba(12,6,24,.28), inset 0 0 0 1px var(--border);
  display:flex;flex-direction:column;
}
.statusbar{
  height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px 0;font-weight:600;font-size:15px;position:relative;z-index:5;
}
.statusbar .island{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  width:118px;height:33px;background:#0c0618;border-radius:var(--r-pill);
}
.statusbar .glyphs{display:flex;align-items:center;gap:6px}
.statusbar .glyphs svg{display:block}

.screen{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 20px 118px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{display:none}

/* app header inside screen */
.apphead{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px}
.apphead .hi{font-size:13px;color:var(--muted);font-weight:500}
.apphead h1{font-size:24px;letter-spacing:-.02em;line-height:1.1}
.avatar{
  width:44px;height:44px;border-radius:var(--r-pill);flex:none;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:15px;box-shadow:var(--shadow-accent);
}
.backbtn{width:40px;height:40px;border-radius:var(--r-pill);background:var(--surface);
  display:grid;place-items:center;border:1px solid var(--border)}

/* ---------- Tab bar ---------- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;height:92px;padding:10px 18px 26px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--border);display:flex;justify-content:space-around;z-index:6;
}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;
  color:var(--muted);font-size:10.5px;font-weight:600;padding-top:6px}
.tab svg{width:24px;height:24px}
.tab.active{color:var(--accent)}
.homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:134px;height:5px;border-radius:var(--r-pill);background:#0c0618;opacity:.9;z-index:7}

/* ---------- Cards & primitives ---------- */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:16px;box-shadow:var(--shadow-sm)}
.card.flat{box-shadow:none;background:var(--surface)}
.card.hero{background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow-accent)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hero .eyebrow{color:rgba(255,255,255,.75)}
.big{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.delta{font-family:var(--mono);font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill)}
.delta.up{color:var(--accent-2);background:rgba(20,71,230,.10)}
.delta.down{color:var(--muted);background:var(--surface)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:var(--r-pill);background:var(--surface);
  color:var(--fg);border:1px solid var(--border)}
.chip.accent{background:rgba(90,40,255,.10);color:var(--accent);border-color:transparent}
.chip.win{background:rgba(20,71,230,.10);color:var(--accent-2);border-color:transparent}
.chip.lost{background:var(--surface);color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;padding:14px 18px;border-radius:var(--r-pill);
  background:var(--fg);color:#fff;width:100%}
.btn.accent{background:var(--accent);box-shadow:var(--shadow-accent)}
.btn.ghost{background:var(--surface);color:var(--fg);border:1px solid var(--border)}
.btn:active{transform:translateY(1px)}

/* progress bar */
.bar{height:8px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad)}

/* section label */
.sec{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 12px}
.sec h2{font-size:16px;letter-spacing:-.01em}
.sec a{font-size:13px;color:var(--accent);font-weight:600}

/* progress ring */
.ring{width:120px;height:120px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(#5a28ff var(--p,0%), #e6dfff 0);position:relative}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bg)}
.ring .val{position:relative;text-align:center}
.ring .val b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.ring .val span{display:block;font-size:11px;color:var(--muted)}

/* list rows */
.lrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.lrow:last-child{border-bottom:none}
.tag{width:38px;height:38px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-weight:600;font-size:13px;background:var(--surface);color:var(--muted)}
.tag.win{background:rgba(90,40,255,.12);color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:12.5px}