:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #031426; color: #eef8ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 14%, #0d5f7c 0, transparent 32%), radial-gradient(circle at 86% 82%, #123b68 0, transparent 34%), #031426; }
.accessShell { min-height: 100vh; width: min(1120px, 100%); margin: auto; padding: clamp(28px, 6vw, 84px) 28px; display: grid; align-content: center; gap: 46px; }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 12px; color: inherit; text-decoration: none; letter-spacing: .04em; }
.brandDrop { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 18px 18px 22px 22px; background: linear-gradient(155deg, #52e18f, #049ce6); box-shadow: 0 0 30px #14bfe366; }
.brand b { display: block; font-size: 1.9rem; letter-spacing: .07em; }.brand small { color: #6ce4ff; font-size: .56rem; letter-spacing: .14em; }
.accessCard { width: min(520px, 100%); padding: clamp(26px, 4vw, 42px); border: 1px solid #34c7f580; border-radius: 22px; background: #072747dd; box-shadow: 0 26px 80px #000a; }
.eyebrow { margin: 0 0 10px; color: #b7ff39; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }.accessCard h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); }.lead { color: #c2d9e9; line-height: 1.6; }
form { display: grid; gap: 16px; margin-top: 24px; } label { display: grid; gap: 7px; color: #c4e3f2; font-size: .86rem; font-weight: 700; } input, select { width: 100%; padding: 13px 14px; border: 1px solid #4785a9; border-radius: 9px; background: #041b32; color: #fff; font: inherit; } input:focus, select:focus { outline: 2px solid #35ceff; outline-offset: 2px; }
button { border: 1px solid #52dfff; border-radius: 9px; padding: 13px 16px; color: #062037; background: linear-gradient(90deg, #75edc0, #35c9ff); font-weight: 800; cursor: pointer; } button:disabled { opacity: .55; cursor: wait; }.textButton { margin-top: 16px; padding: 0; border: 0; color: #7ce7ff; background: transparent; text-decoration: underline; }
.status { min-height: 48px; margin-top: 22px; padding: 13px; border-radius: 9px; background: #0a3558; color: #d5edfc; line-height: 1.45; }.status.error { background: #5a2735; color: #ffd8dd; }.status.good { background: #164d43; color: #d7fff0; }.formHint { margin: 0; color: #d7edfa; }
.boundary { display: grid; gap: 5px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #3d6482; color: #a9c3d7; font-size: .82rem; line-height: 1.5; }.boundary b { color: #72e6ff; }
.adminTools { margin-top: 28px; padding-top: 24px; border-top: 1px solid #3d6482; }.adminTools h2 { margin: 0; font-size: 1.2rem; }.provisionResult { margin-top: 16px; padding: 13px; border-radius: 9px; background: #144a3e; color: #e1fff3; line-height: 1.5; word-break: break-word; }.provisionResult strong { display: block; margin-top: 6px; font-family: ui-monospace, monospace; font-size: 1rem; }
@media (max-width: 600px) { .accessShell { padding: 28px 18px; }.accessCard { padding: 26px 20px; } }

/* Production promotion: preserved operational-flow composition from the
   legacy member-access visual, now hosted only on the WUOS custom domain. */
.gateway { position: relative; isolation: isolate; min-height: 100vh; display: grid; grid-template-columns: minmax(330px, 440px) 1fr; overflow: hidden; background: #031426; }
.gateway::before { content: ''; position: absolute; z-index: 0; inset: -26px; background: #031426 url('/assets/wuos-operational-flow.png') center/cover no-repeat; filter: blur(20px); opacity: .54; transform: scale(1.05); }
.gateway::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: url('/assets/wuos-operational-flow.png') center/contain no-repeat; }
.gateway .brand { width: fit-content; position: static; margin-bottom: 22px; }
.gateway .loginCard { align-self: center; z-index: 1; max-height: calc(100vh - 60px); overflow: auto; margin: 30px; padding: 30px; border: 1px solid #5fd8ff80; border-radius: 18px; background: #071f39e8; backdrop-filter: blur(16px); box-shadow: 0 24px 58px #0009; }
.gateway .loginCard h1 { font-size: 36px; }
.gateway .story { display: none; }
.gateway .storyShade { position: absolute; inset: 0; background: linear-gradient(90deg, #03142699, transparent 35%, #03142633); }
.gateway .storyText { position: absolute; left: 9%; bottom: 8%; max-width: 420px; text-shadow: 0 2px 15px #001; }
.gateway .storyText span { color: #b2ef58; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.gateway .storyText h2 { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.08; margin: 12px 0; }
.gateway .storyText p { color: #d0e8f7; line-height: 1.6; }
.gateway .brandDrop { width: 43px; height: 43px; }
@media (max-width: 850px) { .gateway { grid-template-columns: 1fr; }.gateway::after { background-position: 55% top; background-size: cover; }.gateway .loginCard { margin: 24px; max-width: 460px; }.gateway .story { display: none; }.gateway .storyText { left: 24px; bottom: 25px; right: 24px; }.gateway .brand { top: 18px; left: 24px; } }
@media (max-width: 480px) { .gateway .loginCard { margin: 14px; padding: 23px; max-height: none; margin-top: 92px; }.gateway .story { display: none; } }

/* Desktop access drawer: hover/focus reveals controls; leaving the left edge
   restores the full operational-flow view. */
@media (min-width: 851px) {
  .gateway { grid-template-columns: 1fr; }
  .gateway .accessDrawer { position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: 52px; max-height: none; margin: 0; padding: 0; overflow: hidden; border-width: 0 1px 0 0; border-radius: 0 18px 18px 0; cursor: e-resize; transition: width .28s ease, padding .28s ease, background .28s ease; }
  .gateway .accessDrawer::after { content: 'WUOS ACCESS'; position: absolute; top: 50%; left: 17px; color: #b2ef58; font-size: 10px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; opacity: 1; transition: opacity .14s ease; }
  .gateway .accessDrawer > * { transition: opacity .16s ease; }
  .gateway .accessDrawer:not(:hover):not(:focus-within) > * { opacity: 0; pointer-events: none; }
  .gateway .accessDrawer:hover, .gateway .accessDrawer:focus-within { width: min(440px, 34vw); padding: 30px; overflow-y: auto; cursor: default; border-width: 1px; }
  .gateway .accessDrawer:hover::after, .gateway .accessDrawer:focus-within::after { opacity: 0; }
  .gateway .story { display: none; }
}