/* Phone frame on desktop; full-bleed on a real phone. */
html, body { margin: 0; height: 100%; }
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0B0110; }
.phone { position: relative; width: 390px; height: 844px; border-radius: 54px; background: #000; padding: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 2px #2A0A47; 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, #1D0238); }
.statusbar { position: absolute; top: 12px; left: 12px; right: 12px; 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, #EDEDED);
  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, #1D0238); }
  .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; }
  .screen { padding-top: 12px; }
}