:root{
  --bg:#070b14; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8;
  --green:#22c55e; --red:#ef4444; --gray:#64748b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui}
.wrap{max-width:1100px;margin:auto;padding:16px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card{background:var(--card);border-radius:14px;padding:14px;margin-bottom:14px}
.phoneShell{background:#020617;border-radius:22px;padding:14px}
.phoneTop{display:flex;justify-content:space-between;margin-bottom:12px}
.badge{background:#020617;padding:6px 10px;border-radius:999px;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}
.green{background:var(--green)} .red{background:var(--red)} .gray{background:var(--gray)}
.screen{display:flex;justify-content:space-between;background:#020617;border-radius:12px;padding:10px;margin-bottom:10px}
.num{font-size:22px;font-family:monospace}
.controls{display:flex;gap:10px}
.btn{flex:1;padding:12px;border:none;border-radius:999px;font-size:16px;color:#fff;cursor:pointer}
.btn.green{background:var(--green)}
.btn.red{background:var(--red)}
.btn.gray{background:var(--gray)}
.log{background:#020617;border-radius:12px;padding:8px;height:140px;overflow:auto;font-size:13px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.sheet{background:#020617;padding:20px;border-radius:18px;width:320px;text-align:center}
.pulse{margin:12px 0;color:var(--green);animation:pulse 1s infinite}
@keyframes pulse{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}