* { box-sizing: border-box; }
.native main { max-width: none; margin: 0; }
.native main#main { padding: 0; }
body.native { margin: 0; min-height: 100svh; }
.native-nav { height: 96px; padding: 0 6vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--qa-line); }
.native-brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.native-brand img { width: 92px; height: auto; }
.native-nav nav { display: flex; align-items: center; gap: 32px; }
.native a { text-decoration: none; }
.native a:hover { color: var(--qa-blue); }
.native .native-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 20px; border: 1px solid var(--qa-blue); border-radius: 6px; color: white; background: var(--qa-blue); font-weight: 500; min-height: 44px; text-decoration: none; }
.native .native-button:hover { background: var(--qa-blue-hover); color: white; }
.native-eyebrow { font-size: 10px; letter-spacing: .13em; font-weight: 500; color: var(--qa-muted); }
.native-hero { position: relative; min-height: calc(100svh - 96px); padding: 6vh 10vw 8vh; background: var(--qa-paper); display: flex; align-items: center; }
.hero-content { animation: native-enter 240ms ease both; }
.hero-wordmark { display: flex; align-items: center; gap: 8px; margin: 30px 0; }
.hero-wordmark img { width: clamp(190px, 24vw, 330px); height: auto; }
.native-hero h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.08; margin: 0 0 22px; }
.native-hero p:not(.native-eyebrow) { color: var(--qa-muted); font-size: 17px; }
.native-hero .native-button { margin-top: 30px; }
.hero-caption { position: absolute; bottom: 35px; right: 6vw; color: var(--qa-muted); font-size: 12px; }
.native-platform { padding: 90px 10vw; }
.native-platform h2 { font-size: 32px; margin: 16px 0 40px; }
.platform-lines { max-width: 800px; margin-bottom: 32px; }
.platform-lines p { display: grid; grid-template-columns: 1fr 2fr; padding: 24px 0; border-top: 1px solid var(--qa-line); }
.platform-lines span { color: var(--qa-muted); }
.native-footer { display: flex; justify-content: space-between; padding: 24px 6vw; border-top: 1px solid var(--qa-line); color: var(--qa-muted); font-size: 12px; }
.native-auth-main { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10vw; min-height: calc(100svh - 164px); padding: 65px 10vw; }
.auth-intro { display: grid; place-items: center; min-width: 0; }
.auth-orbit { width: min(50%, 180px); }
.auth-orb { display: block; width: 100%; height: auto; aspect-ratio: 1; }
/* Login-only navy CRT trial; keep the shared developer screen unchanged. */
.native-auth-main:has(.auth-orb) {
  --qa-ink: #edf4ff;
  --qa-muted: #b2c2dc;
  --qa-surface: #12233e;
  --qa-input-line: #526583;
  --qa-green: #8ee0ba;
  --qa-red: #ffaaaa;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--qa-ink);
  background: radial-gradient(ellipse at 27% 48%, #123662 0%, #0b203e 38%, #070f22 85%);
  box-shadow: inset 0 0 100px #02071499;
}
.native-auth-main:has(.auth-orb)::before,
.native-auth-main:has(.auth-orb)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.native-auth-main:has(.auth-orb)::before {
  background: repeating-linear-gradient(0deg, #0005 0 1px, transparent 1px 4px),
    url('assets/brand/analog/grain.svg') 0 0 / 160px 120px;
  opacity: .16;
}
.native-auth-main:has(.auth-orb)::after {
  background: linear-gradient(180deg, transparent 40%, #93caff0a 48%, #b4ddff14 50%, transparent 54%);
  transform: translateY(-100%);
  animation: auth-tape-drift 5s linear both;
}
.native-auth-main:has(.auth-orb) .auth-links a { color: #9dc5ff; }
.native-auth-main:has(.auth-orb) .auth-links a:hover { color: #d9eaff; }
.native-auth-main:has(.auth-orb) :focus-visible { outline: 2px solid #9dc5ff; outline-offset: 4px; }
.native-auth-main:has(.auth-orb) input { color-scheme: dark; }
@keyframes auth-tape-drift { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .native-auth-main:has(.auth-orb)::after { animation: none; display: none; }
}
.auth-form-wrap { width: 100%; max-width: 400px; animation: native-enter 200ms ease both; }
.auth-form-wrap h1, .auth-form-wrap h2 { font-size: 28px; margin: 12px 0 8px; }
#form-help { color: var(--qa-muted); margin-bottom: 28px; }
#native-auth-form label { display: block; font-weight: 500; margin-bottom: 18px; }
#native-auth-form input { width: 100%; min-height: 46px; border: 1px solid var(--qa-input-line); border-radius: 6px; padding: 10px 12px; margin-top: 7px; background: var(--qa-surface); color: var(--qa-ink); }
#native-auth-form .native-button { width: 100%; margin-top: 8px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 62px !important; }
.password-field button { position: absolute; right: 8px; top: 13px; height: 34px; border: 0; background: transparent; color: var(--qa-muted); font-size: 12px; }
#password-help { display: block; margin-top: 8px; color: var(--qa-muted); font-weight: 400; }
#form-status { margin-top: 18px; color: var(--qa-green); }
#form-status.error { color: var(--qa-red); }
.auth-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; font-size: 13px; }
.auth-links a { color: var(--qa-blue); }
@keyframes native-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .native-nav { height: 78px; padding: 0 22px; } .native-nav nav { gap: 16px; font-size: 12px; } .native-nav nav a:first-child { display: none; } .native-nav .native-button { padding: 10px 12px; } .native-hero { min-height: calc(100svh - 78px); padding: 40px 7vw 70px; } .hero-caption { right: 7vw; bottom: 24px; } .native-auth-main { display: block; min-height: calc(100svh - 148px); padding: 44px 7vw; } .auth-intro { display: none; } .auth-form-wrap { margin: 0 auto; } .native-footer { gap: 24px; font-size: 10px; } .native-platform { padding: 60px 7vw; } .platform-lines p { grid-template-columns: 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .native * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

#developer-form label { display: block; margin: 20px 0; font-weight: 500; }
#developer-form input { display: block; width: 100%; min-height: 46px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--qa-input-line); border-radius: 6px; background: var(--qa-surface); color: var(--qa-ink); }
#developer-form button { width: 100%; }
#developer-form button:disabled { opacity: .55; cursor: wait; }
#domain-preview, .developer-note, #delivery-status { font-size: 13px; color: var(--qa-muted); }
.developer-note { margin-top: 24px; }
#setup-status { color: var(--qa-green); }
#setup-status.error { color: var(--qa-red); }