*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050506}
body{font-family:Arial,sans-serif;color:#f7f7f8;min-height:100vh}
.auth-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:6px;background:#050506}
.auth-card{position:relative;width:100%;max-width:620px;min-height:calc(100dvh - 12px);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#121214 0%,#0d0d0f 100%);border:2px solid #3b3b40;border-radius:30px;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.auth-content{padding:42px 48px 12px;flex:1}
.close-btn{position:absolute;right:-1px;top:-1px;width:74px;height:74px;border:0;border-radius:0 30px 0 38px;background:#fff;color:#1a1a1b;font-size:42px;line-height:1;cursor:pointer;z-index:3}
h1{text-align:center;font-size:39px;line-height:1.12;margin:24px 42px 16px;font-weight:500;letter-spacing:-.5px}
.subtitle{text-align:center;color:#c6c6ca;font-size:21px;line-height:1.35;margin:0 0 28px}
.inapp-browser-notice{margin:0 0 18px;padding:15px 17px;border:1px solid #6d5acb;border-radius:16px;background:#171421;color:#f7f7f8;font-size:15px;line-height:1.45}
.inapp-browser-notice[hidden]{display:none}
.inapp-browser-notice strong{display:block;font-size:16px;margin-bottom:5px}
.inapp-browser-notice p{margin:0 0 12px;color:#d5d1e5}
.open-external-browser{display:flex;min-height:46px;align-items:center;justify-content:center;padding:10px 14px;border-radius:24px;background:#7c3aed;color:#fff;text-decoration:none;font-weight:700;text-align:center}
.provider-grid{display:grid;grid-template-columns:1fr;gap:11px}
.provider-grid button,.other-methods button,.primary,.secondary{width:100%;min-height:68px;border:2px solid #5a5a60;border-radius:34px;background:#202022;color:#f5f5f6;font-size:23px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:22px;transition:background .15s,border-color .15s,transform .05s}
.provider-grid button:hover,.other-methods button:hover,.primary:hover,.secondary:hover{background:#28282b;border-color:#737379}
.provider-grid button:active,.other-methods button:active,.primary:active,.secondary:active{transform:translateY(1px)}
.provider-grid button:disabled,.other-methods button:disabled,.primary:disabled,.secondary:disabled{opacity:.55;cursor:wait}
.provider-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px}
.google-icon{font-size:34px;font-family:Arial,sans-serif;font-weight:700;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 45%,#fbbc05 45% 65%,#ea4335 65% 85%,#4285f4 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gitlab-icon svg{width:38px;height:38px;fill:#f26b2b}
.email-icon{font-size:31px;color:#fff}
.divider{display:flex;align-items:center;gap:22px;color:#9c9ca1;font-size:24px;margin:24px 0 18px}
.divider:before,.divider:after{content:"";height:2px;background:#4a4a4e;flex:1}
.other-toggle{width:100%;border:0;background:transparent;color:#c9c9cd;font-size:22px;padding:10px 0 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:13px}
.chevron{font-size:31px;line-height:16px;transform:translateY(-3px);transition:transform .15s}
.other-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg) translateY(2px)}
.other-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 4px}
.other-methods button{min-height:56px;border-radius:28px;font-size:17px}
.email-panel{margin-top:14px;padding-top:2px}
label{display:block;color:#d7d7da;font-size:17px;font-weight:700;margin:0 0 7px}
input{display:block;width:100%;padding:14px 16px;border:2px solid #4c4c51;border-radius:16px;background:#111113;color:#f5f5f6;font-size:18px;margin:0 0 14px;outline:none}
input:focus{border-color:#7a7a80}
.password-field{position:relative;width:100%}
.password-field input{padding-right:58px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#f5f5f6;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:24px;line-height:1}
.password-toggle:focus-visible{outline:2px solid #7a7a80;outline-offset:2px}
.password-eye{display:block;width:27px;height:27px;line-height:1}
.primary{min-height:58px;margin-top:3px;border-radius:29px;background:#fff;color:#111;font-size:18px}
.secondary{min-height:52px;margin-top:10px;border-radius:26px;background:transparent;color:#ddd;font-size:17px}
.message{min-height:24px;text-align:center;color:#fff;font-size:15px;line-height:1.35;margin:13px 0 4px}
.consent{text-align:center;color:#e1e1e3;font-size:14px;line-height:1.5;margin:18px auto 0;max-width:520px}.consent a{color:#e1e1e3;text-decoration:underline;text-underline-offset:2px}
.underlined{text-decoration:underline;text-underline-offset:2px}
.auth-footer{position:absolute;left:0;right:0;bottom:8px;border-top:0;min-height:96px;display:flex;align-items:center;justify-content:center;padding:8px 32px 16px;z-index:2;pointer-events:none}
.brand-lockup{display:flex;align-items:center;justify-content:center;gap:18px;transform:none}
.logo-crop{position:relative;width:64px;height:44px;display:flex;align-items:center;justify-content:center;overflow:visible;background:transparent;flex:0 0 64px}
.logo-crop img{display:block;width:64px;height:auto;max-width:none;position:static;transform:none}
.brand-name{font-size:34px;font-weight:600;letter-spacing:-.8px;color:#f5f5f6}
.generated-password{margin-top:8px;text-align:left;font-size:12px;color:#555}
.generated-password-row{display:flex;gap:6px;align-items:center;margin-top:5px}
#generated-password{flex:1;min-width:0;font-family:monospace;font-size:13px}
#generate-password-btn,#reject-generated-btn{width:38px;height:38px;margin:0;padding:0;border:0;border-radius:8px;cursor:pointer}
@media(max-width:480px){
  .auth-page{padding:2px;align-items:flex-start}
  .auth-card{height:calc(100dvh - 4px);min-height:calc(100dvh - 4px);border-radius:22px}
  .auth-content{padding:34px 20px 100px;overflow-y:auto}
  .close-btn{width:62px;height:62px;border-radius:0 22px 0 32px;font-size:36px}
  h1{font-size:31px;margin:18px 32px 13px}
  .subtitle{font-size:18px;margin-bottom:20px}
  .provider-grid{gap:9px}
  .provider-grid button{min-height:58px;font-size:19px;gap:16px}
  .provider-icon{width:30px;height:30px;flex-basis:30px}
  .google-icon{font-size:30px}
  .gitlab-icon svg{width:33px;height:33px}
  .email-icon{font-size:28px}
  .divider{font-size:20px;margin:20px 0 14px}
  .other-toggle{font-size:19px}
  .other-methods{grid-template-columns:1fr}
  .email-panel{margin-top:11px}
  label{font-size:16px;margin-bottom:6px}
  input{padding:13px 15px;font-size:17px;margin-bottom:12px}
  .password-toggle{right:6px}
  .password-eye{width:25px;height:25px}
  .primary{min-height:56px}
  .secondary{min-height:50px;margin-top:9px}
  .message{margin-top:11px}
  .consent{font-size:12px;line-height:1.48;margin-top:14px}
  .auth-footer{min-height:82px;padding:4px 20px 10px;bottom:4px}
  .brand-name{font-size:29px}
  .logo-crop{width:56px;height:40px;flex-basis:56px}
  .logo-crop img{width:56px}
}