/* Black iOS, Robinhood/Phantom level. No neon, no glow. */
:root {
  --bg: #000;
  --text: #fff;
  --secondary: rgba(235,235,245,0.6);
  --tertiary: rgba(235,235,245,0.3);
  --sep: rgba(84,84,88,0.55);
  --card: #1c1c1e;
  --card2: #2c2c2e;
  --green: #00d35a;
  --red: #ff453a;
  --orange: #ff9f0a;
  --cyan: #64d2ff;
  --blue: #0a84ff;
  --yellow: #ffd60a;
  --pink: #ff6b9a;
}
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; height: 100%; }
#app { padding: env(safe-area-inset-top) 16px 80px; min-height: 100%; }
.paper-badge { background: var(--orange); color: #000; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; display: inline-block; }
.card { background: var(--card); border-radius: 20px; padding: 16px; margin: 12px 0; }
.odometer { font-family: "SF Pro Display", -apple-system, sans-serif; font-variant-numeric: tabular-nums; font-size: 42px; font-weight: 600; letter-spacing: -0.5px; }
.green { color: var(--green); }
.red { color: var(--red); }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: rgba(28,28,30,0.92); backdrop-filter: blur(20px); display: flex; border-top: 1px solid var(--sep); padding-bottom: env(safe-area-inset-bottom); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--secondary); }
.tab.active { color: var(--text); }
.tab svg { width: 24px; height: 24px; margin-bottom: 2px; }
.screen { display: none; }
.screen.active { display: block; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sep); }
.pill { border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 500; }
.pill.pass { background: rgba(0,211,90,0.15); color: var(--green); }
.pill.fail { background: rgba(255,69,58,0.15); color: var(--red); }