:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --navy: #06142e;
  --navy-2: #0a2754;
  --blue: #087cf0;
  --green: #68cb2c;
  --text: #10233d;
  --muted: #61718a;
  --line: #d9e1eb;
  --danger: #b42318;
  --surface: #ffffff;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--navy); }
body { min-height: 100dvh; }
button { font: inherit; }
.hidden { display: none !important; }
.app-shell { width: 100%; height: 100%; min-height: 100dvh; }
.screen { width: 100%; height: 100%; min-height: 100dvh; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 0%, #174d93 0, var(--navy) 44%, #030b1b 100%); }
.screen-center { display: grid; place-items: center; }
.card { width: min(100%, 430px); background: rgba(255,255,255,.985); border-radius: 24px; padding: 28px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); text-align: center; }
.app-logo { width: 148px; height: 148px; object-fit: contain; margin: -5px auto 8px; display: block; }
.eyebrow { margin: 2px 0 7px; color: #176bcc; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; color: var(--text); font-size: clamp(27px, 8vw, 36px); line-height: 1.08; }
.lead { margin: 14px auto 22px; color: var(--muted); line-height: 1.5; font-size: 16px; }
.install-steps { list-style: none; padding: 0; margin: 22px 0; text-align: left; display: grid; gap: 13px; }
.install-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; color: var(--text); line-height: 1.4; }
.install-steps li > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e7f2ff; color: #096bd4; font-weight: 800; }
.button { width: 100%; min-height: 48px; border: 0; border-radius: 13px; padding: 11px 18px; cursor: pointer; font-weight: 750; }
.button-secondary { background: #edf3f9; color: #173552; }
.google-button { min-height: 44px; display: flex; justify-content: center; margin: 8px auto 12px; }
.progress { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 10px; }
.spinner { width: 22px; height: 22px; border: 3px solid rgba(9,96,190,.18); border-top-color: #087cf0; border-radius: 50%; animation: spin .85s linear infinite; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.message { border-radius: 12px; padding: 12px; margin: 12px 0; background: #fff0ee; color: var(--danger); line-height: 1.4; }
.privacy-note, .small-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 18px 0 0; }
.portal-screen { width: 100%; height: 100%; min-height: 100dvh; background: #f4f7fa; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.native-bar { min-height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: white; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 2px 12px rgba(0,0,0,.2); z-index: 5; }
.brand-mini { display: flex; align-items: center; min-width: 0; gap: 9px; }
.brand-mini img { width: 40px; height: 40px; border-radius: 10px; }
.brand-mini div { display: grid; min-width: 0; }
.brand-mini strong { font-size: 17px; line-height: 1; }
.brand-mini small { margin-top: 4px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }
.native-actions { display: flex; gap: 5px; align-items: center; }
.icon-button { min-width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: white; font-weight: 700; padding: 0 9px; }
#portalFrame { width: 100%; height: 100%; border: 0; background: white; z-index: 1; }
.portal-loading { position: absolute; inset: calc(58px + env(safe-area-inset-top)) 0 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(244,247,250,.96); color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 11px 15px; border-radius: 12px; color: white; background: rgba(6,20,46,.94); box-shadow: 0 8px 24px rgba(0,0,0,.25); text-align: center; }
@media (min-width: 800px) {
  .portal-screen { max-width: 1280px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.35); }
}