:root { --cream: #fdfceb; --cream-deep: #fff6d6; --blue: #004a66; --blue-dark: #00394f; --orange: #f15931; --orange-dark: #d94724; --aqua: #bcecf0; --ink-soft: #547383; font-family: Inter, Arial, sans-serif; background: var(--cream); }
* { box-sizing: border-box; }
html, body { max-width: 100%; min-height: 100%; overflow-x: hidden; }
.portal-body { min-width: 320px; margin: 0; background: var(--cream); color: var(--blue); }
.portal-shell { min-height: 100vh; }
.brand-panel { position: relative; min-height: 244px; overflow: hidden; color: #fff; background: var(--blue); isolation: isolate; }
.brand-panel::before, .brand-panel::after { position: absolute; z-index: -1; content: ""; }
.brand-panel::before { width: 330px; height: 330px; top: -188px; right: -120px; border: 24px solid rgba(188,236,240,.2); border-radius: 50%; }
.brand-panel::after { width: 300px; height: 130px; bottom: -88px; left: -32px; border-radius: 50%; background: var(--orange); transform: rotate(-12deg); }
.brand-panel__content { display: flex; min-height: 244px; padding: 1.35rem 1.25rem; flex-direction: column; justify-content: center; }
.brand { display: block; width: min(72vw, 280px); margin-bottom: 1rem; }.brand img { display: block; width: 100%; }
.brand-kicker { margin: 0 0 .35rem; color: var(--aqua); font-size: .73rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.brand-message { max-width: 270px; margin: 0; font-size: 1.1rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.25; }.brand-footer, .orbit-two { display: none; }
.orbit { position: absolute; z-index: -1; width: 215px; height: 215px; border: 2px dashed rgba(255,255,255,.25); border-radius: 50%; }.orbit-one { top: -90px; right: -75px; }.planet { position: absolute; z-index: -1; width: 42px; height: 42px; top: 38px; right: 12%; border: 5px solid var(--cream); border-radius: 50%; background: var(--orange); }
.form-panel { display: grid; min-width: 0; min-height: calc(100vh - 244px); padding: 1.5rem 1rem 2.5rem; place-items: start center; }.form-panel__inner { width: min(calc(100vw - 2rem), 475px); min-width: 0; }
.portal-label { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.portal-label span { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.card { width: 100%; padding: 1.55rem 1.25rem; border: 1px solid #e8dfbd; border-radius: 28px; background: #fff; box-shadow: 0 12px 30px rgba(0,74,102,.1); }
.eyebrow { margin: 0 0 .65rem; color: var(--orange); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } h1 { margin: 0; color: var(--blue); font-size: clamp(2.15rem, 10vw, 3.2rem); font-weight: 850; letter-spacing: -.065em; line-height: .98; overflow-wrap: anywhere; }.account-email { display: inline; font-size: clamp(1.35rem, 6.5vw, 2.35rem); letter-spacing: -.06em; overflow-wrap: anywhere; }.lede { margin: 1rem 0 1.6rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.auth-form { display: grid; gap: 1.1rem; }.field { display: grid; gap: .5rem; } label { color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } input { width: 100%; min-height: 54px; padding: .8rem 1rem; border: 1px solid #cce3e4; border-radius: 16px; background: #fbffff; color: var(--blue); font: 600 16px Inter, Arial, sans-serif; transition: border-color .18s, box-shadow .18s, transform .18s; } input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(241,89,49,.16); outline: 0; }.checkbox-field { display: flex; align-items: center; gap: .65rem; min-height: 32px; }.checkbox-field input[type="checkbox"] { width: 22px; min-width: 22px; height: 22px; min-height: 22px; margin: 0; padding: 0; accent-color: var(--orange); box-shadow: none; }.checkbox-field label { font-size: .84rem; letter-spacing: .02em; text-transform: none; }.checkbox-field .error { width: 100%; }
.primary { display: flex; min-height: 56px; align-items: center; justify-content: center; gap: .7rem; border: 0; border-radius: 999px; background: var(--orange); box-shadow: 0 5px 0 var(--orange-dark); color: #fff; cursor: pointer; font: 800 1rem Inter, Arial, sans-serif; touch-action: manipulation; transition: transform .18s, box-shadow .18s, background .18s; }.primary:hover { background: var(--orange-dark); box-shadow: 0 2px 0 #b83b1c; transform: translateY(3px); }.primary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }.primary:disabled { box-shadow: none; cursor: not-allowed; opacity: .5; transform: none; }
.tiny-note { margin: 1.55rem 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }.tiny-note span { color: var(--orange); }.form-link { margin: 1.4rem 0 0; color: var(--ink-soft); font-size: .9rem; }.form-link a, .form-link button { color: var(--blue); font: 750 .9rem Inter, Arial, sans-serif; }.form-link button { display: inline; min-height: 0; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 0!important; border-radius: 0; background: transparent!important; box-shadow: none!important; cursor: pointer; line-height: 1.4; text-decoration: underline; }.help, .error, .errorlist { margin: 0; font: .82rem/1.4 Inter, Arial, sans-serif; overflow-wrap: anywhere; }.help { color: var(--ink-soft); }.error, .errorlist { padding-left: 0; color: #b73822; list-style: none; }.message { margin-bottom: 1.25rem; padding: .85rem 1rem; border-radius: 16px; background: var(--cream-deep); color: var(--blue); font-weight: 700; }.logout { margin: 1.8rem 0 0; text-align: center; }.logout button { border: 0; background: none; color: var(--ink-soft); cursor: pointer; font: 700 .85rem Inter, Arial, sans-serif; text-decoration: underline; }.dashboard, .coming-soon { min-width: 0; max-width: 100%; }.dashboard h2 { margin: 0; }.coming-soon { display: flex; gap: .85rem; align-items: flex-start; margin-top: 2rem; padding: 1.1rem; border-radius: 18px; background: #eefafb; }.coming-soon span { color: var(--orange); font-size: 1.4rem; }.coming-soon p { margin: .3rem 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.code-entry { display: flex; width: 100%; gap: .42rem; justify-content: space-between; }.code-digit { flex: 1 1 0; width: 0; min-width: 0; min-height: 58px; padding: 0; border-radius: 16px; font-size: 1.42rem; font-weight: 800; letter-spacing: 0; text-align: center; }.code-digit:focus { transform: translateY(-2px); }.code-status { min-height: 1.2em; color: #b73822; }.code-fallback { display: none; }
@media (min-width: 821px) { .portal-shell { display: grid; grid-template-columns: minmax(410px, 46vw) 1fr; }.brand-panel { min-height: 100vh; }.brand-panel__content { min-height: 100vh; padding: clamp(2.5rem, 7vw, 6.2rem); }.brand { width: min(100%, 380px); margin-bottom: 1.7rem; }.brand-message { max-width: 350px; font-size: clamp(1.3rem, 2.25vw, 1.85rem); }.brand-footer { display: block; position: absolute; left: clamp(2.5rem, 7vw, 6.2rem); bottom: 2rem; margin: 0; color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }.orbit { width: 380px; height: 380px; }.orbit-one { top: -160px; right: -140px; }.orbit-two { display: block; right: 12%; bottom: 12%; width: 180px; height: 180px; border-color: rgba(255,255,255,.15); }.planet { width: 70px; height: 70px; top: 16%; right: auto; left: 12%; border-width: 7px; }.form-panel { min-height: 100vh; padding: 2rem; place-items: center; }.form-panel__inner { width: min(100%, 475px); }.card { padding: 2.75rem; border-radius: 34px; }.portal-label { margin-bottom: 1.35rem; }.code-entry { gap: .65rem; }.code-digit { max-width: 58px; min-height: 64px; font-size: 1.6rem; } }