.login-page{background:linear-gradient(125deg,#eef5ef,#f7f9f6 55%,#f0f5f1)}
.login-page .topbar{height:auto;min-height:84px;padding-block:14px}
.login-page .brand,.login-page .brand>div{min-width:0}
.login-page .brandmark{flex-shrink:0}
.login-page .brand small{font-size:12px}
.login-page .source-link{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;font-size:13px;text-underline-offset:4px}
.login-main{max-width:1380px;display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.8fr);align-items:center;gap:48px;min-height:calc(100vh - 84px);min-height:calc(100svh - 84px);padding-block:56px}
.login-main>section{min-width:0}
.login-intro h1{font-size:clamp(34px,3.3vw,46px);line-height:1.35;margin:14px 0 20px;letter-spacing:-1.2px}
.login-intro>p{max-width:380px;color:var(--muted);font-size:15px;line-height:1.85}
.login-use-cases{display:grid;gap:22px;margin-top:32px}
.login-feature{border-left:3px solid #b5d7c3;padding-left:15px}
.login-feature strong{display:block;margin-bottom:4px;font-size:15px}
.login-feature span{display:block;color:var(--muted);font-size:13px;line-height:1.8}
.login-card{padding:36px 32px 28px;border-color:#dce7df;border-radius:22px;box-shadow:0 16px 48px #244d3510}
.login-card .step{margin-bottom:9px;color:var(--green);font-size:12px;font-weight:600;letter-spacing:.3px}
.login-card h2{font-size:25px;line-height:1.5;margin-bottom:7px;overflow-wrap:anywhere}
.login-card .hint{font-size:13px;line-height:1.85;overflow-wrap:anywhere}
.login-card .login-subtitle{font-size:14px}
.login-divider{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:12px;font-weight:600;margin:28px 0 18px}
.login-divider::before,.login-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.social-button{--provider-border:#cbd5d0;--provider-tint:#f4f7f5;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:78px;padding:14px 9px;background:#fff;border:1px solid var(--provider-border);border-radius:14px;color:var(--ink);font-family:"Prompt",sans-serif;font-size:14px;font-weight:700;line-height:1.4;white-space:normal;text-align:left;box-shadow:0 3px 10px #173c3005;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.social-button>span:not(.social-icon):not(.cf-click-ripple){min-width:0;overflow-wrap:anywhere}
.social-button:not(:disabled):not([aria-disabled="true"]):hover{background:var(--provider-tint);box-shadow:0 5px 16px #173c3010;transform:translateY(-1px)}
.social-button:focus-visible{outline:3px solid #4a9c7a;outline-offset:3px}
.social-button:disabled,.social-button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
.social-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid var(--provider-border);border-radius:11px;background:#fff}
.social-icon img{display:block;width:40px;height:40px;object-fit:contain}
.google{--provider-border:#e6c7c6;--provider-tint:#fdf6f5}
.facebook{--provider-border:#bfd2f0;--provider-tint:#f3f7fe}
.line{--provider-border:#b7dfc5;--provider-tint:#f0fbf4}
.microsoft{--provider-border:#cdd4df;--provider-tint:#f5f7fa}
#login-status{margin:26px 0 16px;padding:14px 16px;font-size:13px;line-height:1.85;overflow-wrap:anywhere}
.demo-access{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;color:var(--green);font-size:14px;font-weight:600;line-height:1.7;text-underline-offset:4px}
.demo-access:focus-visible,.login-page .source-link:focus-visible{outline:3px solid #70c4a5;outline-offset:3px;border-radius:4px}
@media(max-width:1179px){
  .login-main{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:38px}
  .social-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .social-button{min-height:76px;padding:13px 14px;font-size:15px}
}
@media(max-width:900px){
  .login-main{grid-template-columns:minmax(0,1fr);gap:30px;min-height:auto;max-width:720px;padding-block:34px 40px}
  .login-intro{text-align:center}
  .login-intro h1{font-size:34px;margin-block:10px 12px}
  .login-intro h1 br{display:none}
  .login-intro>p{max-width:540px;margin-inline:auto}
  .login-use-cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px;text-align:left}
  .login-feature{padding-left:12px}
  .login-feature span{font-size:12px}
}
@media(max-width:600px){
  .login-page .topbar{min-height:80px;padding:12px 16px;gap:10px}
  .login-page .brand{gap:9px}
  .login-page .brand strong{display:block;font-size:16px}
  .login-page .brand small{font-size:11px;line-height:1.5}
  .login-page .brandmark{width:38px;height:38px}
  .login-page .source-link{font-size:12px}
  .login-main{gap:26px;padding:28px 16px 32px}
  .login-intro .eyebrow{font-size:11px}
  .login-intro h1{font-size:29px;letter-spacing:-.7px}
  .login-intro>p{font-size:14px}
  .login-use-cases{display:none}
  .login-card{padding:26px 20px 22px;border-radius:18px}
  .login-card h2{font-size:22px}
  .login-divider{margin-top:24px}
  .social-grid{gap:10px}
  .social-button{gap:7px;min-height:76px;padding:12px 8px;font-size:14px}
  .social-icon{flex-basis:44px;width:44px;height:44px;border-radius:10px}
  .social-icon img{width:38px;height:38px}
  #login-status{margin-top:22px;padding:13px 14px}
}
@media(max-width:359px){
  .login-main{padding-inline:12px}
  .login-intro h1{font-size:27px}
  .login-card{padding-inline:18px}
  .login-card h2{font-size:21px}
  .social-grid{grid-template-columns:minmax(0,1fr)}
  .social-button{justify-content:flex-start;min-height:68px;padding:10px 18px;font-size:15px;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .social-button{transition:none}
  .social-button:not(:disabled):not([aria-disabled="true"]):hover{transform:none}
}

.login-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 20px}

/* CodeFronts-inspired surface and focus treatments; see docs/codefronts-ui-sources.md.
   The opt-in scope keeps operational forms and printed output unchanged. */
@media screen{
  .cf-ui.login-page{background:radial-gradient(ellipse at 7% 18%,#dbeee2 0,transparent 38%),radial-gradient(ellipse at 96% 78%,#e5efe6 0,transparent 40%),#f5f8f4}
  .cf-ui .login-intro{position:relative;isolation:isolate}
  .cf-ui .login-intro::before{content:"";position:absolute;inset:-30px 0;z-index:-1;pointer-events:none;border-radius:32px;background:radial-gradient(ellipse at 12% 35%,#ffffffc7,transparent 72%)}
  .cf-ui .login-intro .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #cadfd0;border-radius:99px;background:#edf7ef;color:#245b43}
  .cf-ui .login-intro .eyebrow::before{content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#438562;box-shadow:0 0 0 3px #dbece0}
  .cf-ui .login-feature{border-color:#8cbda2;background:linear-gradient(90deg,#eaf4ecb3,transparent);border-radius:0 10px 10px 0}
  .cf-ui .login-card{border-color:#d0e1d5;background:linear-gradient(145deg,#fff,#fcfefc);box-shadow:0 20px 54px -30px #244d3540,inset 0 1px 0 #fff}
  .cf-ui .login-card>.step{color:#3e7055}
  .cf-ui .native-auth{border-color:#d3e3d8;background:linear-gradient(150deg,#fbfefb,#f5faf6);box-shadow:inset 0 1px 0 #fff}
  .cf-ui .native-auth-modes{background:#e5eee7;box-shadow:inset 0 1px 3px #173c3008}
  .cf-ui .native-auth-modes button[aria-pressed="true"]{background:linear-gradient(145deg,#fff,#fafffb);color:#235e45;box-shadow:0 2px 9px #284f3517,inset 0 0 0 1px #d5e4d9}
  .cf-ui .native-form>input:focus-visible,.cf-ui .native-form #native-name-field input:focus-visible{border-color:#327756;background:#fff;outline:3px solid #b4ddc5;outline-offset:2px;box-shadow:0 4px 14px #24664110}
  .cf-ui .native-password-field:focus-within{border-color:#327756;background:#fff;outline:3px solid #b4ddc5;outline-offset:2px;box-shadow:0 4px 14px #24664110}
  .cf-ui .native-otp-digits input:focus-visible{border-color:#327756;outline:3px solid #b4ddc5;outline-offset:2px;box-shadow:0 4px 14px #24664110}
  .cf-ui .social-button{background:linear-gradient(150deg,#fff,#fcfdfc);box-shadow:0 2px 8px #173c3006,inset 0 1px 0 #fff}
  .cf-ui .social-button:focus-visible{outline:3px solid #327756;outline-offset:3px;box-shadow:0 0 0 6px #e0f0e6}
  .cf-ui .social-icon{box-shadow:0 2px 5px #173c3008}
  .cf-ui .login-divider::before{background:linear-gradient(90deg,transparent,#cbded1)}
  .cf-ui .login-divider::after{background:linear-gradient(90deg,#cbded1,transparent)}
}
@media screen and (hover:hover) and (pointer:fine){
  .cf-ui .social-button:not(:disabled):not([aria-disabled="true"]):hover{background:var(--provider-tint);box-shadow:0 6px 18px #173c3012,inset 0 1px 0 #fff}
  .cf-ui .native-auth-modes button[aria-pressed="false"]:not(:disabled):hover{color:#315e46;background:#f3f8f4}
}
@media screen and (prefers-reduced-motion:no-preference){
  .cf-ui .native-auth-modes button{transition:background .18s ease,color .18s ease,box-shadow .18s ease}
  .cf-ui .native-form>input,.cf-ui .native-form #native-name-field input,.cf-ui .native-password-field{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
}
@media screen and (forced-colors:active){
  .cf-ui .login-intro::before,.cf-ui .login-intro .eyebrow::before{display:none}
  .cf-ui .login-card,.cf-ui .native-auth{background:Canvas;border-color:CanvasText;box-shadow:none}
  .cf-ui .native-auth-modes button[aria-pressed="true"]{outline:2px solid Highlight}
}