:root { color-scheme: dark; --ink:#edf7ff; --muted:#a6bfd1; --cyan:#28b7ff; --aqua:#2de2d1; }
html { min-height:100%; background:#0b1016; }
body { margin:0; min-height:100dvh; color:var(--ink); font-family:"Segoe UI",Arial,sans-serif;
  background:linear-gradient(90deg,rgba(4,10,18,.22),rgba(4,13,23,.22) 40%,rgba(2,9,17,.78) 76%),
    url("/v1/iam/auth/login-art.webp") center center / cover no-repeat fixed, #0b1016; }
.shell { width:min(1440px,calc(100% - 96px)); min-height:100dvh; margin:auto; padding:48px 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,430px); gap:clamp(40px,7vw,140px); align-items:center; }
.story { align-self:center; max-width:690px; padding-top:32px; text-shadow:0 3px 20px #06101a; }
.brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:750; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:9px;
  background:#f3f8fc; color:#102231; font-style:italic; font-size:25px; box-shadow:0 2px 24px #03132166; }
.brand small { display:block; font-size:9px; letter-spacing:.26em; color:#c3d9e7; font-weight:600; }
.eyebrow { margin-top:clamp(90px,15vh,190px); color:var(--aqua); font-size:12px; font-weight:800; letter-spacing:.28em; }
.story h2 { margin:12px 0 16px; max-width:660px; font-size:clamp(40px,4.5vw,76px); line-height:1.04; letter-spacing:-.045em; }
.lead { max-width:620px; color:#d4e6f2; font-size:clamp(17px,1.4vw,21px); line-height:1.5; }
.network { display:none; }
.cap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:540px; margin-top:28px; }
.cap { padding:13px 16px; border:1px solid #5e91ac70; border-radius:9px;
  background:rgba(4,17,30,.47); backdrop-filter:blur(8px); }
.cap b { display:block; font-size:14px; } .cap span { display:none; }
.card { width:100%; max-width:none; padding:34px 32px; text-align:left; border-radius:18px;
  border:1px solid #6b9abb55; background:linear-gradient(145deg,rgba(10,25,43,.94),rgba(5,15,29,.90));
  box-shadow:0 28px 70px #0009, inset 0 1px #ffffff16; backdrop-filter:blur(18px); }
.card h1 { font-size:30px; letter-spacing:-.025em; margin:0 0 4px; }
.card .subtitle { margin:0 0 28px; color:#aac0d0; font-size:14px; }
.status-row { display:flex; align-items:center; justify-content:flex-start; gap:12px;
  min-height:58px; padding:13px 15px; border:1px solid #4e768c66; border-radius:10px; font-size:14px; line-height:1.35; }
.status-row.pending { color:#bed7e9; background:#15304b87; }
.status-row.key-present { color:#b5efe3; background:#0d3b3b9c; border-color:#2de2d171; }
.status-row.key-missing { color:#ffd0c9; background:#5e292688; border-color:#fa8f8170; }
.dot { width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
details { margin:12px 0 0; color:#a7c2d2; font-size:12px; }
summary { cursor:pointer; width:max-content; padding:4px 0; }
.field { font-size:12px; color:#91b3ca; margin:5px 0; } .field span { color:#d4ebfa; overflow-wrap:anywhere; }
button,#windowsClientLink { width:100%; min-height:48px; margin-top:16px; padding:12px 16px;
  border:1px solid transparent; border-radius:10px; font:700 14px "Segoe UI",Arial,sans-serif; cursor:pointer; }
#signInBtn { background:linear-gradient(90deg,#0879e6,#28b7ff); color:white; box-shadow:0 6px 24px #0369af55; }
#signInBtn:disabled { background:#26384b; color:#9cb2c4; box-shadow:none; cursor:not-allowed; }
#retryBtn { background:#18344b; color:#d8edfa; border-color:#5285a5; }
#errorMsg { color:#ffb7aa; font-size:13px; min-height:16px; margin-top:12px; line-height:1.4; }
.client-download { margin-top:26px; padding-top:22px; border-top:1px solid #83a9bb36; }
.client-download-title { font-size:14px; font-weight:750; }
.client-download-state { font-size:12px; color:#9db7c7; margin:7px 0 10px; min-height:18px; }
#windowsClientLink { display:flex; align-items:center; justify-content:center; margin:0; text-align:center;
  text-decoration:none; background:#17374e; border-color:#4c829d; color:#dcefff; }
#windowsClientLink[aria-disabled="true"] { color:#a5b6c2; background:#1d2d3c; border-color:#34495c; pointer-events:none; }
#windowsClientHash { color:#7e9fb0; font:10px Consolas,monospace; margin-top:10px; overflow-wrap:anywhere; }
.no-agent-help { margin:15px 0 0; color:#9db7c7; font-size:12px; line-height:1.5; }
button:hover:not(:disabled),a:hover:not([aria-disabled="true"]) { filter:brightness(1.11); }
:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; }
@media (max-width:900px) { body { background-position:30% center; background-attachment:scroll; }
  .shell { width:min(100% - 40px,700px); padding:26px 0 42px; display:flex; flex-direction:column; gap:34px; align-items:stretch; }
  .story { padding:0; } .eyebrow { margin-top:60px; } .story h2 { font-size:clamp(34px,7vw,58px); }
  .card { max-width:650px; align-self:center; } }
@media (max-width:560px) { .shell { width:min(100% - 28px,460px); }
  .eyebrow { margin-top:36px; } .story h2 { font-size:36px; }
  .lead { font-size:15px; } .cap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cap { padding:10px; } .cap b { font-size:12px; } .card { padding:25px 18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }