:root{
  --login-nav:#14223a;
  --login-nav-2:#1f3559;
  --login-bg:#eef2f7;
  --login-card:#ffffff;
  --login-ink:#182235;
  --login-muted:#6d788a;
  --login-line:#d7dee8;
  --login-blue:#27518f;
  --login-blue-dark:#1f4278;
  --login-blue-soft:#e8f0fb;
  --login-green:#17784a;
}

body[data-account-page="login"]{
  background:var(--login-bg);
  color:var(--login-ink);
}

body[data-account-page="login"] .background-logo,
body[data-account-page="reset-password"] .background-logo{
  pointer-events:none!important;
}

body[data-account-page="login"] .mobile-menu-overlay,
body[data-account-page="reset-password"] .mobile-menu-overlay,
body[data-account-page="login"] .share-sheet-overlay,
body[data-account-page="reset-password"] .share-sheet-overlay{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body[data-account-page="login"].mobile-menu-open,
body[data-account-page="reset-password"].mobile-menu-open{
  overflow:auto!important;
}

body[data-account-page="login"] .background-logo{
  opacity:.025;
  filter:grayscale(1);
}

body[data-account-page="login"] .navbar{
  border-bottom:1px solid rgba(215,222,232,.9);
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(25,45,75,.06);
  backdrop-filter:blur(16px);
}

body[data-account-page="login"] .account-main{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 110px);
  padding:104px 18px 50px;
  background:
    radial-gradient(circle at 12% 8%,rgba(39,81,143,.10),transparent 28%),
    linear-gradient(180deg,#f8fafc 0%,var(--login-bg) 42%,#e8edf4 100%);
}

body[data-account-page="login"] a,
body[data-account-page="login"] button,
body[data-account-page="login"] input,
body[data-account-page="login"] select,
body[data-account-page="reset-password"] a,
body[data-account-page="reset-password"] button,
body[data-account-page="reset-password"] input,
body[data-account-page="reset-password"] select{
  pointer-events:auto!important;
}

body[data-account-page="login"] .login-workspace{
  width:min(1080px,100%);
}

body[data-account-page="login"] .login-workspace-hero{
  position:relative;
  overflow:hidden;
  min-height:154px;
  padding:24px 27px;
  border:1px solid #263d61;
  border-radius:22px;
  background:
    radial-gradient(circle at 88% 20%,rgba(121,169,243,.28),transparent 28%),
    linear-gradient(135deg,var(--login-nav) 0%,var(--login-nav-2) 66%,#274b79 100%);
  box-shadow:0 18px 42px rgba(20,34,58,.20);
}

body[data-account-page="login"] .login-workspace-hero::after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:-86px;
  width:250px;
  height:250px;
  border:42px solid rgba(255,255,255,.055);
  border-radius:50%;
  pointer-events:none;
}

body[data-account-page="login"] .login-kicker{
  color:#b9d4fa;
}

body[data-account-page="login"] .login-workspace-hero h1{
  color:#fff;
  font-size:clamp(2rem,4vw,2.75rem);
  letter-spacing:-.045em;
}

body[data-account-page="login"] .login-workspace-hero p{
  max-width:590px;
  color:#d6e0ef;
}

body[data-account-page="login"] .login-hero-actions{
  position:relative;
  z-index:1;
  flex-wrap:wrap;
  justify-content:flex-end;
}

body[data-account-page="login"] .login-hero-button{
  min-height:42px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:11px;
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:none;
}

body[data-account-page="login"] .login-hero-button:hover{
  background:rgba(255,255,255,.15);
}

body[data-account-page="login"] .login-hero-button-primary{
  border-color:#79a9f3;
  color:#10213c;
  background:#79a9f3;
  box-shadow:0 9px 20px rgba(4,15,34,.22);
}

body[data-account-page="login"] .login-command-mark{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}

body[data-account-page="login"] .login-access-panel{
  margin-top:15px;
  padding:18px;
  border:1px solid var(--login-line);
  border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 34px rgba(25,45,75,.09);
}

body[data-account-page="login"] .login-panel-head{
  margin-bottom:14px;
}

body[data-account-page="login"] .login-panel-head h2,
body[data-account-page="login"] .login-section-heading h3,
body[data-account-page="login"] .login-signin-copy h3{
  color:var(--login-ink);
}

body[data-account-page="login"] .login-panel-head p,
body[data-account-page="login"] .login-section-heading p,
body[data-account-page="login"] .login-signin-copy p{
  color:var(--login-muted);
}

body[data-account-page="login"] .login-panel-eyebrow,
body[data-account-page="login"] .login-section-heading span,
body[data-account-page="login"] .login-signin-copy span{
  color:var(--login-blue);
}

body[data-account-page="login"] .login-security-pill{
  border-color:#bfd0e8;
  color:var(--login-blue-dark);
  background:var(--login-blue-soft);
}

body[data-account-page="login"] .account-tabs{
  gap:7px;
  margin-bottom:13px;
  padding:4px;
  border:1px solid var(--login-line);
  border-radius:13px;
  background:#f3f6fa;
}

body[data-account-page="login"] .account-tab{
  min-height:38px;
  border:0;
  border-radius:9px;
  color:#536174;
  background:transparent;
  box-shadow:none;
}

body[data-account-page="login"] .account-tab:hover{
  border:0;
  background:#fff;
}

body[data-account-page="login"] .account-tab.active{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--login-blue-dark),var(--login-blue));
  box-shadow:0 6px 15px rgba(39,81,143,.22);
}

body[data-account-page="login"] .login-panel-grid{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:14px;
}

body[data-account-page="login"] .login-form-card,
body[data-account-page="login"] .login-side-card{
  border-radius:16px;
}

body[data-account-page="login"] .login-form-card{
  border-color:var(--login-line);
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  box-shadow:0 12px 28px rgba(25,45,75,.08);
}

body[data-account-page="login"] .login-form-card::before{
  height:5px;
  background:linear-gradient(90deg,var(--login-blue-dark),#4d79b7,#79a9f3);
}

body[data-account-page="login"] .login-form-card>[data-auth-panel]{
  padding:20px;
}

body[data-account-page="login"] .login-signin-intro{
  border-color:#e2e7ef;
}

body[data-account-page="login"] .login-signin-badge{
  border-color:#c8d5e6;
  background:linear-gradient(145deg,var(--login-blue-soft),#fff);
  box-shadow:0 7px 16px rgba(39,81,143,.09);
}

body[data-account-page="login"] .login-field-label,
body[data-account-page="login"] .account-form label{
  color:#405067;
}

body[data-account-page="login"] .login-input-shell{
  border-color:#c5cfdd;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(25,45,75,.025);
}

body[data-account-page="login"] .login-input-shell:focus-within{
  border-color:#6f91c2;
  box-shadow:0 0 0 4px rgba(39,81,143,.11);
}

body[data-account-page="login"] .login-input-icon{
  border-color:#e2e7ef;
  color:var(--login-blue);
}

body[data-account-page="login"] .login-password-toggle{
  border-color:#e2e7ef;
  color:var(--login-blue-dark);
  background:#f3f6fa;
}

body[data-account-page="login"] .login-password-toggle:hover{
  background:var(--login-blue-soft);
}

body[data-account-page="login"] .account-form input,
body[data-account-page="login"] .account-form select{
  border-color:#c5cfdd;
  color:var(--login-ink);
}

body[data-account-page="login"] .account-form input:focus,
body[data-account-page="login"] .account-form select:focus{
  border-color:#6f91c2;
  box-shadow:0 0 0 4px rgba(39,81,143,.11);
}

body[data-account-page="login"] .login-protected-note{
  color:#657184;
}

body[data-account-page="login"] .login-protected-dot{
  background:var(--login-green);
  box-shadow:0 0 0 4px rgba(23,120,74,.10);
}

body[data-account-page="login"] .login-reset-link,
body[data-account-page="login"] .login-create-prompt a{
  color:var(--login-blue-dark);
}

body[data-account-page="login"] .login-submit-button,
body[data-account-page="login"] .account-button{
  border:1px solid var(--login-blue);
  color:#fff;
  background:linear-gradient(135deg,var(--login-blue-dark),var(--login-blue));
  box-shadow:0 9px 20px rgba(39,81,143,.20);
}

body[data-account-page="login"] .login-submit-button:hover,
body[data-account-page="login"] .account-button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 25px rgba(39,81,143,.25);
}

body[data-account-page="login"] .login-create-prompt,
body[data-account-page="login"] .login-signin-intro{
  border-color:#e2e7ef;
}

body[data-account-page="login"] .login-side-card{
  padding:19px;
  border-color:#273c5d;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(121,169,243,.22),transparent 28%),
    linear-gradient(180deg,var(--login-nav-2),var(--login-nav));
  box-shadow:0 12px 28px rgba(20,34,58,.16);
}

body[data-account-page="login"] .login-side-card .login-panel-eyebrow{
  color:#9dc2f4;
}

body[data-account-page="login"] .login-side-card h3{
  color:#fff;
}

body[data-account-page="login"] .login-side-list>div{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
}

body[data-account-page="login"] .login-side-list b{
  color:#fff;
}

body[data-account-page="login"] .login-side-list small{
  color:#c3cede;
}

body[data-account-page="login"] .login-access-note{
  border-color:rgba(255,255,255,.12);
  color:#c3cede;
}

body[data-account-page="login"] .login-access-note::before{
  background:#79a9f3;
  color:#10213c;
}

body[data-account-page="login"] .account-config-warning{
  border-color:#e7c982;
  background:#fff4d9;
}

@media(max-width:900px){
  body[data-account-page="login"] .login-panel-grid{grid-template-columns:1fr}
  body[data-account-page="login"] .login-side-card{order:2}
}

@media(max-width:640px){
  body[data-account-page="login"] .account-main{padding:88px 12px 36px}
  body[data-account-page="login"] .login-workspace-hero{align-items:flex-start;min-height:0;padding:20px;flex-direction:column}
  body[data-account-page="login"] .login-hero-actions{width:100%;justify-content:flex-start}
  body[data-account-page="login"] .login-command-mark{display:none}
  body[data-account-page="login"] .login-access-panel{padding:12px;border-radius:16px}
  body[data-account-page="login"] .login-panel-head{align-items:flex-start;flex-direction:column;gap:10px}
  body[data-account-page="login"] .login-security-pill{align-self:flex-start}
  body[data-account-page="login"] .account-tabs{display:grid;grid-template-columns:repeat(3,1fr)}
  body[data-account-page="login"] .account-tab{padding:8px 5px;font-size:.68rem}
  body[data-account-page="login"] .login-form-card>[data-auth-panel]{padding:17px}
}
