*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 700px at 50% -10%, #F9E6F0 0%, rgba(249,230,240,0) 60%),
    #EDEFF3;
  color:var(--ink);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Desktop device frame (collapses on real phones) ---------- */
.stage{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.stage-head{ text-align:center; display:flex; align-items:center; gap:14px; }
.stage-head .logo{ width:56px; height:56px; border-radius:14px; box-shadow:var(--e2); flex:none; }
.stage-head .txt{ text-align:left; }
.stage-head h1{ font-family:var(--font-brand); font-style:italic; font-weight:400; font-size:30px; line-height:1;
  letter-spacing:.01em; margin:0 0 4px; color:var(--accent-deep); }
.stage-head p{ margin:0; font-size:12.5px; color:var(--ink-2); }
.stage-head b{ color:var(--accent-deep); font-weight:650; }

.device{
  position:relative; width:390px; height:844px;
  background:var(--surface);
  border-radius:46px;
  box-shadow: 0 0 0 11px #14181D, 0 0 0 13px #2A3038, 0 40px 90px rgba(14,18,22,.34);
  overflow:hidden;
}
.notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:112px; height:31px; background:#14181D; border-radius:20px; z-index:900;
}
@media (max-width:520px){
  body{ padding:0; display:block; background:var(--surface); }
  .stage{ gap:0; }
  .stage-head{ display:none; }
  .device{ width:100vw; height:100dvh; border-radius:0; box-shadow:none; }
  .notch{ display:none; }
}

/* ---------- App shell ---------- */
.app{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--canvas); overflow:hidden; }
.statusbar{
  height:54px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 24px 6px; font-size:13.5px; font-weight:650; letter-spacing:.01em;
  color:var(--ink); position:relative; z-index:60; pointer-events:none;
}
.statusbar .sb-r{ display:flex; align-items:center; gap:5px; }
.viewport{ position:relative; flex:1; min-height:0; }

/* Screens */
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--canvas); overflow:hidden; z-index:1;
  opacity:0; visibility:hidden; transform:translateX(18px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.screen.active{ opacity:1; visibility:visible; transform:none; }
.screen.push{ z-index:2; transform:translateX(100%); transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) linear, visibility var(--dur-3); }
.screen.push.active{ transform:translateX(0); box-shadow:-14px 0 40px rgba(14,18,22,.10); }

.scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.scroll::-webkit-scrollbar{ width:0; height:0; }