/* MIA — telas interativas · base compartilhada
   Layout desenhado em 402 x 874 pt (iPhone 16 Pro) e escalado pela largura real do aparelho. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root { --s: 1; --glass: rgba(255,255,255,0.22); --glass-border: rgba(255,255,255,0.35); --ink: #fff; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #000;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
body {
  font-family: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'cv11' 1; letter-spacing: -0.01em;
}

/* ---------- fundo com textura animada ---------- */
.mesh { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, #1a1f4d 0%, #3b1f5a 50%, #141a3a 100%); z-index: 0; }
.mesh .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.85; mix-blend-mode: screen; will-change: transform; }
.mesh .b1 { width: 90vmax; height: 70vmax; left: -30vmax; top: -25vmax; background: #4f6dff; animation: m1 26s ease-in-out infinite alternate; }
.mesh .b2 { width: 80vmax; height: 80vmax; right: -35vmax; top: -10vmax; background: #c05cff; animation: m2 31s ease-in-out infinite alternate; }
.mesh .b3 { width: 90vmax; height: 70vmax; left: 0; bottom: -35vmax; background: #ff7a45; animation: m3 29s ease-in-out infinite alternate; }
.mesh .b4 { width: 70vmax; height: 60vmax; left: -30vmax; bottom: -10vmax; background: #1fd3c5; animation: m4 23s ease-in-out infinite alternate; }
@keyframes m1 { from { transform: translate(0,0) scale(1); } to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes m2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-16vmax, 14vmax) scale(0.9); } }
@keyframes m3 { from { transform: translate(0,0) scale(1); } to { transform: translate(10vmax, -14vmax) scale(1.1); } }
@keyframes m4 { from { transform: translate(0,0) scale(1); } to { transform: translate(18vmax, -8vmax) scale(1.2); } }
.mesh.dim::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.mesh.white { background: #fff; } .mesh.white .blob { display: none; }

/* ---------- palco escalado ---------- */
.stage {
  position: fixed; left: 50%; top: 0; width: 402px; height: calc(var(--vh, 100vh) / var(--s));
  transform: translateX(-50%) scale(var(--s)); transform-origin: top center; z-index: 1;
}

/* ---------- barra de status, Dynamic Island ---------- */
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 20px; background: #000; z-index: 50; }
.status { position: absolute; top: 14px; left: 0; right: 0; height: 24px; padding: 0 26px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; z-index: 40; }
.status .right { display: flex; align-items: center; gap: 7px; }
.status svg { display: block; }
.status.dark { color: #000; }
.ic-signal { width: 19px; height: 12px; } .ic-wifi { width: 17px; height: 12px; } .ic-batt { width: 27px; height: 13px; }
/* como app em tela cheia, o iOS/Android mostram a barra de status real: escondemos a nossa e a ilha */
html.standalone .status, html.standalone .island { display: none; }

/* ---------- tela bloqueada ---------- */
.lock-date { position: absolute; top: 76px; left: 0; right: 0; text-align: center; font-size: 21px; font-weight: 600; }
.lock-time { position: absolute; top: 98px; left: 0; right: 0; text-align: center; font-size: 100px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; text-shadow: 0 2px 24px rgba(0,0,0,0.18); }
.notifs { position: absolute; left: 12px; right: 12px; bottom: 112px; display: flex; flex-direction: column; gap: 8px; }
.notif {
  background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-radius: 24px; padding: 13px 14px 14px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transform: translateY(0); opacity: 1; transition: transform .55s cubic-bezier(.2,.9,.25,1.2), opacity .4s ease;
}
.notif.hidden { transform: translateY(140px) scale(.96); opacity: 0; pointer-events: none; }
.notif .icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; }
.notif .icon.msg { background: linear-gradient(180deg, #5df777, #15c03a); }
.notif .icon.cal { background: #fff; color: #e5342c; flex-direction: column; font-size: 10px; line-height: 1; }
.notif .icon.cal .d { font-size: 22px; color: #111; font-weight: 600; letter-spacing: -0.03em; }
.notif .head { display: flex; justify-content: space-between; align-items: baseline; }
.notif .app { font-size: 15px; font-weight: 700; } .notif .when { font-size: 13px; opacity: .7; font-weight: 500; }
.notif .title { font-size: 15px; font-weight: 700; margin-top: 1px; }
.notif .body { font-size: 15px; line-height: 1.3; font-weight: 500; margin-top: 2px; }
.notif .body.caps { text-transform: uppercase; }
.quick { position: absolute; bottom: 44px; left: 0; right: 0; padding: 0 46px; display: flex; justify-content: space-between; }
.quick .btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: grid; place-items: center; }
.home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 140px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.9); }
.home.dark { background: #000; }

/* ---------- tela "armada" (preta, aguardando a deixa) ---------- */
.armed { position: fixed; inset: 0; background: #000; z-index: 90; display: grid; place-items: center; color: rgba(255,255,255,0.35); font-size: 14px; font-weight: 500; text-align: center; line-height: 1.6; transition: opacity .3s; }
.armed.off { opacity: 0; pointer-events: none; }
.armed b { color: rgba(255,255,255,0.6); font-weight: 600; }
.armed .count { font-size: 44px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: -0.03em; }

/* ---------- aviso do operador ---------- */
.op-toast { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 8px; z-index: 99; opacity: 0; transition: opacity .3s; pointer-events: none; }
.op-toast.on { opacity: 1; }