/* The phone frame on desktop; a real phone gets the app full-bleed. */
html, body { margin: 0; }
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #e9e9ec; }
@media (prefers-color-scheme: dark) { body { background: #0b0b0d; } }
.phone { position: relative; width: 390px; height: 844px; border-radius: 54px; background: #000; padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 2px #2a2a2e; flex: none; }
.phone::before { content: ""; position: absolute; top: 24px; left: 50%; width: 118px; height: 34px; margin-left: -59px; background: #000; border-radius: 20px; z-index: 30; }
.app { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: var(--app-bg, #fff); }
.statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 25; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 8px; font: 600 15px/1 -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--status-fg, #000); pointer-events: none; letter-spacing: -.2px; }
.statusbar .sb-right { display: flex; align-items: center; gap: 6px; }
.statusbar .sb-right i { width: 16px; height: 16px; }
.statusbar .bat { width: 24px; height: 11px; border: 1.5px solid currentColor; border-radius: 4px; position: relative; opacity: .95; }
.statusbar .bat::after { content: ""; position: absolute; inset: 2px; right: 3px; background: currentColor; border-radius: 1.5px; }
@media (max-width: 520px) {
  body { display: block; background: var(--app-bg, #fff); }
  .phone { width: auto; height: 100dvh; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
  .phone::before { display: none; }
  .app { border-radius: 0; height: 100dvh; }
  .statusbar { display: none; }
}