:root { --sso-navy:#073b67; --sso-blue:#087abb; --sso-teal:#06a6a6; --sso-ink:#173b5c; --sso-muted:#65819a; --sso-line:#dbe8f2; }
* { box-sizing:border-box; }
body.sso-page { min-height:100vh; margin:0; color:var(--sso-ink); background:linear-gradient(135deg,#eef8fc,#f7fbfe 52%,#e3f1f8); font-family:Inter,"Segoe UI",Arial,sans-serif; }
.sso-shell { min-height:100vh; display:grid; grid-template-rows:70px 1fr 42px; }.sso-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 5.4vw; color:#fff; background:linear-gradient(105deg,var(--sso-navy),#075f94 62%,#0989ba); box-shadow:0 3px 12px rgba(5,56,99,.17); }.sso-brand { display:flex; align-items:center; gap:13px; min-width:0; }.sso-facility-logo,.sso-facility-logo-fallback { flex:0 0 42px; width:42px; height:42px; border-radius:50%; }.sso-facility-logo { display:block; padding:3px; object-fit:contain; border:1px solid rgba(255,255,255,.55); background:#fff; }.sso-facility-logo-fallback { display:grid; place-items:center; border:2px solid rgba(255,255,255,.84); color:#fff; font-size:23px; font-weight:800; }.sso-brand strong { display:block; font-size:17px; letter-spacing:.03em; }.sso-brand span,.sso-header-note { font-size:12px; opacity:.83; }.sso-header-note { white-space:nowrap; }
.sso-main { width:min(1120px,100%); display:grid; grid-template-columns:minmax(280px,.94fr) minmax(360px,1.06fr); align-items:center; gap:58px; margin:0 auto; padding:44px 32px; }.sso-intro { padding:24px 4px; }.sso-eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; color:#087abb; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.sso-eyebrow::before { width:28px; height:3px; border-radius:99px; background:var(--sso-teal); content:""; }.sso-intro h1 { max-width:450px; margin:0; color:var(--sso-navy); font-size:clamp(28px,3.3vw,42px); line-height:1.15; letter-spacing:-.035em; }.sso-intro > p { max-width:460px; margin:17px 0 28px; color:#52708c; font-size:16px; line-height:1.65; }.sso-benefits { display:grid; gap:13px; margin:0; padding:0; list-style:none; }.sso-benefits li { display:flex; align-items:flex-start; gap:11px; color:#41617e; font-size:14px; line-height:1.45; }.sso-benefits b { display:grid; flex:0 0 24px; width:24px; height:24px; place-items:center; border-radius:50%; color:#087abb; background:#dff4f3; font-size:14px; }
.sso-card { position:relative; overflow:hidden; padding:32px; border:1px solid rgba(194,216,231,.9); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 20px 45px rgba(8,68,106,.14); }.sso-card::before { position:absolute; top:0; right:0; left:0; height:5px; background:linear-gradient(90deg,var(--sso-teal),#0b8aca 55%,#07549b); content:""; }.sso-card-head { display:flex; align-items:center; gap:13px; margin-bottom:21px; }.sso-card-icon { width:45px; height:45px; display:grid; place-items:center; overflow:hidden; border-radius:13px; background:linear-gradient(135deg,#ddf7f4,#e8f1ff); }.sso-card-icon img { display:block; width:28px; height:28px; object-fit:contain; }.sso-card h2 { margin:0; color:var(--sso-navy); font-size:21px; letter-spacing:-.02em; }.sso-card-head p { margin:4px 0 0; color:var(--sso-muted); font-size:13px; }.sso-status { display:flex; gap:10px; align-items:flex-start; min-height:59px; margin:0 0 19px; padding:13px 14px; border:1px solid #d7e9f4; border-radius:10px; color:#426783; background:#f4f9fc; font-size:14px; line-height:1.45; }.sso-status::before { flex:0 0 auto; width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--sso-teal); box-shadow:0 0 0 4px rgba(6,166,166,.11); content:""; }.sso-status--centered { align-items:center; justify-content:center; text-align:center; color:#166f79; border-color:#b9e5e4; background:#eaf9f8; font-weight:700; }.sso-status--centered::before { margin-top:0; }.sso-open { width:100%; min-height:48px; border:0; border-radius:9px; color:#fff; background:linear-gradient(100deg,#087abb,#0a91bd); box-shadow:0 8px 18px rgba(7,122,187,.24); font:700 15px/1 Inter,"Segoe UI",Arial,sans-serif; cursor:pointer; }.sso-open::after { margin-left:9px; content:"→"; }.sso-hint { display:flex; gap:8px; margin:17px 0 0; color:#6c8498; font-size:12px; line-height:1.5; }.sso-hint::before { color:#0a8aad; content:"ⓘ"; }.sso-security { display:flex; align-items:center; gap:7px; margin-top:22px; padding-top:16px; border-top:1px solid var(--sso-line); color:#7890a2; font-size:12px; }.sso-security b { color:#0b8191; font-size:14px; }.sso-footer { display:flex; align-items:center; justify-content:center; gap:8px; color:#708aa0; font-size:12px; }.sso-footer img { display:block; width:auto; height:18px; }.sso-footer strong { color:#3d6684; }
@media (max-width:1040px) { .sso-header { padding-inline:32px; }.sso-main { grid-template-columns:minmax(260px,.9fr) minmax(340px,1.1fr); gap:34px; padding-inline:28px; }.sso-intro h1 { font-size:34px; }.sso-card { padding:28px; } }
@media (max-width:760px) { .sso-shell { grid-template-rows:62px minmax(0,1fr) auto; }.sso-header { padding:0 18px; }.sso-header-note { display:none; }.sso-facility-logo,.sso-facility-logo-fallback { flex-basis:38px; width:38px; height:38px; }.sso-brand { gap:10px; }.sso-brand strong { font-size:14px; }.sso-brand span { font-size:10px; }.sso-main { align-content:center; grid-template-columns:1fr; gap:11px; padding:14px 20px 10px; }.sso-intro { padding:0 2px; }.sso-eyebrow { margin-bottom:8px; font-size:11px; }.sso-intro h1 { font-size:29px; line-height:1.12; }.sso-intro > p { margin:10px 0 0; font-size:13px; line-height:1.48; }.sso-benefits { display:none; }.sso-card { padding:19px 21px; border-radius:16px; }.sso-card-head { gap:8px; margin-bottom:13px; }.sso-card-icon { width:36px; height:36px; border-radius:10px; }.sso-card-icon img { width:23px; height:23px; }.sso-card h2 { font-size:15px; line-height:1.2; letter-spacing:-.03em; white-space:nowrap; }.sso-card-head p { margin-top:2px; font-size:10.5px; line-height:1.25; white-space:nowrap; }.sso-status { min-height:0; gap:7px; margin-bottom:13px; padding:11px; font-size:10.5px; white-space:nowrap; }.sso-status--centered { justify-content:center; padding-inline:13px; font-size:10px; letter-spacing:-.025em; }.sso-status--centered::before { display:none; }.sso-status::before { width:8px; height:8px; }.sso-open { min-height:44px; font-size:13px; white-space:nowrap; }.sso-hint { margin-top:11px; font-size:11px; }.sso-security { gap:5px; margin-top:13px; padding-top:12px; font-size:10px; white-space:nowrap; }.sso-footer { min-height:34px; flex-wrap:wrap; gap:5px; padding:7px 16px; font-size:10px; text-align:center; }.sso-footer img { height:15px; } }