/* Authentication has its own layout; signed-in console surfaces stay unchanged. */
html:has(#auth-shell:not([hidden])) { background: #fff; }

#auth-shell {
  --auth-blue: #2563eb;
  --auth-ink: #181b20;
  --auth-muted: #727780;
  --auth-line: #e9ebef;
  min-height: 100dvh;
  background: #fff;
  color: var(--auth-ink);
}

#auth-shell .auth-header { flex-basis: 76px; border-bottom: 1px solid #f0f1f3; background: #fff; backdrop-filter: none; }
#auth-shell .auth-nav { width: min(1280px, calc(100% - 64px)); height: 76px; }
#auth-shell .auth-home-logo { color: #0a0a0a; }
#auth-shell .auth-nav-links { gap: 28px; }
#auth-shell .auth-nav-links a { color: #626873; transition: color .18s; }
#auth-shell .auth-nav-links a:hover { color: #0a0a0a; }
#auth-shell .auth-layout {
  display: grid;
  flex: 1 0 auto;
  width: min(1180px, calc(100% - 64px));
  max-width: 1180px;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  margin: 0 auto;
  padding: 48px 0 64px;
}

#auth-shell .auth-aside {
  display: flex;
  min-height: 0;
  padding: 40px;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: #f7f8fa;
  color: var(--auth-ink);
  box-shadow: none;
  backdrop-filter: none;
}
#auth-shell .auth-aside-copy { padding: 0; }
#auth-shell .auth-aside-copy .eyebrow { margin: 0 0 20px; color: #7c818a; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
#auth-shell .auth-aside-copy h1 { color: #181b20; font-size: clamp(38px, 3.6vw, 50px); line-height: 1.22; letter-spacing: -.04em; text-wrap: balance; }
#auth-shell .auth-aside-copy > p:last-child { max-width: 410px; margin-top: 20px; color: #737983; font-size: 14px; line-height: 1.8; }
#auth-shell .auth-product-map { margin-top: 36px; }
#auth-shell .auth-model-family { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#auth-shell .auth-model-family > div { display: grid; min-width: 0; justify-items: center; align-content: center; gap: 10px; padding: 16px 4px 13px; border: 1px solid #eceef1; border-radius: 14px; background: #fff; box-shadow: 0 3px 6px #11182703; }
#auth-shell .auth-model-family img { object-fit: contain; }
#auth-shell .auth-model-family span { color: #5e646f; font-size: 10px; font-weight: 500; }
#auth-shell .auth-model-connectors { display: block; width: 100%; height: 42px; stroke: #d9dde5; stroke-width: 1.3; }
#auth-shell .auth-gateway-card { padding: 22px; border: 1px solid #e9ebef; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px -18px #18233238, 0 2px 4px #18233203; }
#auth-shell .auth-gateway-brand { display: flex; align-items: center; gap: 10px; }
#auth-shell .auth-gateway-brand > strong { color: #0a0a0a; font-size: 23px; letter-spacing: -.04em; }
#auth-shell .auth-gateway-brand > span { display: grid; width: 32px; height: 32px; margin-left: auto; place-items: center; border-radius: 9px; background: #f5f6f8; color: #6b7280; }
#auth-shell .auth-gateway-brand > span svg { width: 17px; height: 17px; }
#auth-shell .auth-gateway-card > p { margin: 10px 0 20px; color: #7a808a; font-size: 12px; line-height: 1.6; }
#auth-shell .auth-workspace-tools { display: flex; flex-wrap: wrap; gap: 9px 16px; padding-top: 16px; border-top: 1px solid #f0f1f3; }
#auth-shell .auth-workspace-tools > span { display: inline-flex; align-items: center; gap: 6px; color: #575e69; font-size: 11px; line-height: 1.5; }
#auth-shell .auth-workspace-tools svg { width: 14px; height: 14px; color: #88919e; }
#auth-shell .auth-explore-link { display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin-top: 28px; color: #4d5562; font-size: 12px; font-weight: 500; text-decoration: none; }
#auth-shell .auth-explore-link svg { width: 15px; height: 15px; transition: transform .18s; }
#auth-shell .auth-explore-link:hover { color: #111827; }
#auth-shell .auth-explore-link:hover svg { transform: translate(2px, -2px); }

#auth-shell .auth-main { min-height: 0; padding: 0; background: transparent; }
#auth-shell .auth-panel { width: 100%; margin: 0; padding: 32px; border: 1px solid #eceef1; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px -24px #17233829, 0 2px 5px #17233803; backdrop-filter: none; }
#auth-shell .auth-panel-header { margin-bottom: 26px; }
#auth-shell .auth-panel-header .eyebrow { margin: 0 0 12px; color: #7c818a; font-size: 11px; font-weight: 500; }
#auth-shell .auth-panel-header h2 { margin-bottom: 10px; color: #171b22; font-size: 30px; line-height: 1.25; letter-spacing: -.035em; }
#auth-shell .auth-panel-header p:last-child { color: #7b818b; font-size: 13px; line-height: 1.7; }
#auth-shell .auth-tabs { margin-bottom: 24px; padding: 4px; border: 1px solid #eeeff2; border-radius: 11px; background: #f5f6f8; }
#auth-shell .auth-tabs button { min-height: 36px; border-radius: 8px; color: #7b818b; font-size: 13px; transition: color .18s, background .18s, box-shadow .18s; }
#auth-shell .auth-tabs button:hover { color: #181b20; background: #eceef1; }
#auth-shell .auth-tabs button.active, #auth-shell .auth-tabs button.active:hover { color: #181b20; background: #fff; box-shadow: 0 1px 4px #17233814; }
#auth-shell .auth-panel form { gap: 19px; }
#auth-shell .auth-panel .auth-field > label { color: #414650; font-size: 12px; font-weight: 500; }
#auth-shell .auth-panel .auth-input-wrap > input { height: 50px; min-height: 50px; border-color: #e3e6eb; border-radius: 10px; background: #fafbfc; color: #202530; font-size: 14px; transition: background .18s, border-color .18s, box-shadow .18s; }
#auth-shell .auth-panel .auth-input-wrap > input:hover { border-color: #c6ccd6; }
#auth-shell .auth-panel .auth-input-wrap > input:focus { border-color: #8ba9e5; background: #fff; box-shadow: 0 0 0 3px #2563eb0d; }
#auth-shell .auth-panel .auth-input-wrap > input:user-invalid { border-color: #dc6262; background: #fffafa; }
#auth-shell .auth-panel .auth-input-wrap > input:user-invalid:focus { box-shadow: 0 0 0 3px #dc262610; }
#auth-shell .auth-panel :is(.form-error, .form-success):empty { display: none; }
#auth-shell .auth-panel .primary-button { min-height: 48px; border: 1px solid #181b20; border-radius: 10px; background: #181b20; color: #fff; font-size: 14px; box-shadow: 0 3px 6px #1118270d; transition: background .18s, box-shadow .18s, transform .18s; }
#auth-shell .auth-panel .primary-button:hover:not(:disabled) { background: #313740; box-shadow: 0 5px 12px #1118271a; transform: translateY(-1px); }
#auth-shell .auth-panel .primary-button:active:not(:disabled) { transform: translateY(0); }
#auth-shell .oauth-button { border: 1px solid #e3e6eb; border-radius: 10px; color: #30353d; background: #fff; box-shadow: none; transition: background .18s, border-color .18s; }
#auth-shell .oauth-button:hover { border-color: #c6ccd6; background: #f7f8fa; }
#auth-shell .auth-availability-note { border-radius: 10px; background: #f5f7fa; }
#auth-shell .auth-main .back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: #8a9099; font-size: 12px; text-decoration: none; }
#auth-shell .auth-main .back-link:hover { color: #30353d; text-decoration: underline; }
#auth-shell :is(button, a) { cursor: pointer; }
#auth-shell button:disabled { cursor: not-allowed; }
#auth-shell :is(button, a, input):focus-visible { outline: 2px solid #7697d5; outline-offset: 3px; }

@media (max-width: 1050px) {
  #auth-shell .auth-layout { width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; }
  #auth-shell .auth-aside { padding: 28px; }
  #auth-shell .auth-aside-copy h1 { font-size: 38px; }
  #auth-shell .auth-gateway-card { padding: 18px; }
  #auth-shell .auth-panel { padding: 28px; }
}
@media (max-width: 820px) {
  #auth-shell .auth-header { flex-basis: 64px; }
  #auth-shell .auth-nav { width: calc(100% - 40px); height: 64px; }
  #auth-shell .auth-layout { display: block; flex: 0 0 auto; width: min(440px, calc(100% - 40px)); padding: 40px 0; }
  #auth-shell .auth-aside { display: none; }
  #auth-shell .auth-main { min-height: 0; padding: 0; }
  #auth-shell .auth-panel { margin: 0; padding: 28px; }
  #auth-shell .auth-panel .auth-input-wrap > input { font-size: 16px; }
}
@media (max-width: 480px) {
  #auth-shell .auth-layout { width: 100%; padding: 32px 24px; }
  #auth-shell .auth-panel { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  #auth-shell .auth-panel-header { margin-bottom: 28px; }
  #auth-shell .auth-panel-header h2 { font-size: 30px; }
  #auth-shell .auth-main .back-link { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #auth-shell :is(button, a, input), #auth-shell .auth-explore-link svg { transition: none; }
}