body.login-mode { overflow: hidden; overscroll-behavior: none; }
body.login-mode .app-shell { height: var(--auth-viewport-height, 100dvh); min-height: 0; }
body.login-mode #appContent { position: fixed; top: var(--auth-viewport-top, 0px); left: 0; width: 100%; height: var(--auth-viewport-height, 100dvh); overflow: hidden; }

body.login-mode #mainContent {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.login-mode #pageContainer {
  padding: 0;
  max-width: none;
  height: 100%;
  min-height: 0 !important;
  animation: none;
  transform: none;
}

body.login-mode .gka-fab,
body.login-mode .gka-panel {
  display: none;
}

.auth-page {
  --auth-bg: #fcfdff;
  --auth-surface: #fff;
  --auth-text: #182238;
  --auth-muted: #647187;
  --auth-border: #e4e8f0;
  --auth-input: #f8fafc;
  --auth-primary: #355cde;
  --auth-soft: #edf2ff;
  --auth-glow: rgba(211, 226, 255, .52);
  --auth-danger: #b42318;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--auth-text);
  background: var(--auth-bg);
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
}

.auth-page::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 15% 75%, var(--auth-glow), transparent 55%);
}

.auth-header, .auth-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(24px, 4.5vw, 72px);
  flex-shrink: 0;
}

.auth-logo {
  width: 148px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}

.auth-logo-dark { display: none; }

.auth-header-note {
  color: var(--auth-muted);
  font-size: 12px;
  letter-spacing: 2px;
}

.auth-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 392px;
  align-items: center;
  gap: clamp(64px, 9vw, 144px);
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px 32px;
}

.auth-story { min-width: 0; }

.auth-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--auth-primary);
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 24px;
}

.auth-eyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--auth-primary);
  box-shadow: 0 0 0 5px var(--auth-soft);
}

.auth-story h1 {
  font-size: clamp(40px, 4.1vw, 58px);
  line-height: 1.35;
  letter-spacing: -2px;
  font-weight: 650;
}

.auth-story h1 > span { color: var(--auth-primary); }

.auth-story-description {
  margin-top: 22px;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.9;
}

.auth-workflow {
  margin-top: 40px;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--auth-border);
  border-radius: 18px;
  background: var(--auth-surface);
  box-shadow: 0 18px 50px -30px rgba(30, 65, 135, .3);
  transform: rotate(-2deg);
}

.auth-workflow-top, .auth-workflow-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  font-size: 11px;
  color: var(--auth-muted);
}

.auth-workflow-top { border-bottom: 1px solid var(--auth-border); }
.auth-workflow-label { font-size: 12px; font-weight: 500; }
.auth-workflow-dots { display: flex; gap: 4px; }
.auth-workflow-dots > span { width: 4px; height: 4px; border-radius: 50%; background: var(--auth-border); }

.auth-workflow-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 28px 20px 18px;
}

.auth-step { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.auth-step-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 5px; border-radius: 13px; background: var(--auth-soft); color: var(--auth-primary); }
.auth-step-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.auth-step strong { font-size: 12px; font-weight: 600; }
.auth-step > span:last-child { font-size: 11px; color: var(--auth-muted); white-space: nowrap; }
.auth-step-arrow { color: var(--auth-muted); opacity: .5; font-size: 18px; margin-top: -30px; }
.auth-workflow-bottom > span:first-child { font-weight: 700; letter-spacing: 1px; color: var(--auth-primary); }
.auth-story-footnote { margin-top: 26px; font-size: 12px; letter-spacing: .5px; color: var(--auth-muted); }

.auth-panel { min-width: 0; width: 100%; padding: 0; }
.auth-panel-eyebrow { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--auth-primary); }
.auth-panel-heading h2 { font-size: 28px; line-height: 1.4; font-weight: 650; letter-spacing: -.8px; }
.auth-panel-heading > p:last-child { margin-top: 10px; color: var(--auth-muted); font-size: 13px; }

.auth-methods { display: flex; border-bottom: 1px solid var(--auth-border); gap: 32px; margin-top: 20px; margin-bottom: 16px; }
.auth-method { position: relative; min-height: 44px; padding: 0 0 13px; font-size: 14px; color: var(--auth-muted); transition: color .15s; }
.auth-method:hover { color: var(--auth-primary); }
.auth-method.is-active { color: var(--auth-text); font-weight: 600; }
.auth-method.is-active::after { content: ''; position: absolute; height: 3px; border-radius: 2px; background: var(--auth-primary); left: 0; right: 0; bottom: -1px; }
.auth-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.auth-form > * { grid-column: 1 / -1; min-width: 0; }
.auth-form > .auth-field-half { grid-column: auto; }
.auth-methods + .auth-form { margin-top: 0; }
.auth-field { margin: 0; }
.auth-field > label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--auth-text); }
.auth-optional { margin-left: 5px; color: var(--auth-muted); font-size: 11px; font-weight: 400; }

.auth-field input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--auth-border);
  border-radius: 9px;
  padding: 0 14px;
  background: var(--auth-input);
  color: var(--auth-text);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.auth-field input::placeholder { color: var(--auth-muted); opacity: 1; font-size: 14px; }
.auth-field input:focus { border-color: var(--auth-primary); box-shadow: 0 0 0 3px var(--auth-soft); background: var(--auth-surface); }
.auth-field input[aria-invalid="true"] { border-color: var(--auth-danger); }
.auth-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-danger) 12%, transparent); }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: var(--auth-text); box-shadow: 0 0 0 1000px var(--auth-input) inset; caret-color: var(--auth-text); }
.auth-code-status { margin-top: 9px; color: var(--auth-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-caps-hint { margin-top: 6px; color: #9a5a00; font-size: 12px; }
.auth-code-status[hidden], .auth-caps-hint[hidden] { display: none; }
.auth-password { position: relative; }
.auth-password input { padding-right: 48px; }
.auth-password-toggle { position: absolute; inset: 2px 2px 2px auto; width: 44px; display: grid; place-items: center; color: var(--auth-muted); border-radius: 7px; }
.auth-password-toggle svg { width: 17px; height: 17px; stroke-width: 1.6; }
.auth-password-toggle:hover { color: var(--auth-primary); background: var(--auth-soft); }
.auth-code-row { display: flex; gap: 10px; }
.auth-code-row .auth-code-input { flex: 1; width: 0; letter-spacing: 2px; }
.auth-code-input::placeholder { letter-spacing: 0; }
.auth-code-button { flex: 0 0 112px; border: 1px solid var(--auth-border); border-radius: 9px; background: var(--auth-surface); font-size: 12px; color: var(--auth-primary); white-space: nowrap; }
.auth-code-button:not(:disabled):hover { border-color: var(--auth-primary); background: var(--auth-soft); }
.auth-code-button:disabled { opacity: .6; cursor: not-allowed; }
.auth-text-button { color: var(--auth-primary); font-size: inherit; font-weight: 500; border-radius: 3px; }
.auth-text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-recovery { text-align: right; font-size: 12px; margin-top: -11px; margin-bottom: 16px; }
.auth-recovery .auth-text-button { min-height: 32px; }
.auth-agreement { display: flex; align-items: flex-start; gap: 8px; color: var(--auth-muted); font-size: 12px; line-height: 1.6; margin: 2px 0; }
.auth-agreement input { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--auth-primary); cursor: pointer; }
.auth-agreement label { cursor: pointer; }
.auth-agreement input[aria-invalid="true"] { outline: 2px solid var(--auth-danger); outline-offset: 2px; }
.auth-agreement .auth-text-button { text-align: left; }
.auth-error { margin: 0; padding: 8px 10px; border: 1px solid #f5c6c6; border-radius: 8px; color: #b42318; background: #fff4f3; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  border-radius: 9px;
  background: var(--auth-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 5px 12px -6px rgba(43, 79, 198, .5);
  transition: filter .15s, transform .15s;
}

.auth-submit:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth-submit:not(:disabled):active { filter: brightness(.96); transform: translateY(0); }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.auth-submit[aria-busy="true"]::before { content: ''; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 20px; text-align: center; font-size: 13px; color: var(--auth-muted); margin-top: 12px; }
.auth-switch .auth-text-button { margin-left: 4px; min-height: 32px; }
.auth-back { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 12px; }
.auth-panel-heading h2:focus { outline: none; }
.auth-page button:focus-visible, .auth-page a:focus-visible, .auth-agreement input:focus-visible { outline: 2px solid var(--auth-primary); outline-offset: 4px; }
.auth-footer { color: var(--auth-muted); font-size: 12px; letter-spacing: .5px; padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }

[data-theme="dark"] .auth-page {
  color-scheme: dark;
  --auth-bg: var(--ui-page);
  --auth-surface: var(--ui-surface);
  --auth-text: var(--ui-text);
  --auth-muted: var(--ui-text-muted);
  --auth-border: var(--ui-control-border);
  --auth-input: var(--ui-input);
  --auth-primary: var(--ui-primary);
  --auth-soft: var(--ui-primary-soft);
  --auth-glow: rgba(36, 62, 111, .3);
  --auth-danger: #ffb3b3;
}

[data-theme="dark"] .auth-logo-light { display: none; }
[data-theme="dark"] .auth-logo-dark { display: block; }
[data-theme="dark"] .auth-submit { background: #496be5; }
[data-theme="dark"] .auth-error { color: #fecaca; border-color: #743d46; background: #38222d; }
[data-theme="dark"] .auth-caps-hint { color: #f6cc86; }

.auth-dialog-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .5); font-family: var(--font-body); }
.auth-dialog { display: flex; flex-direction: column; width: 100%; max-width: 580px; max-height: 85vh; max-height: 85dvh; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 24px 80px rgba(0, 0, 0, .2); }
.auth-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--ui-border); }
.auth-dialog-header h3 { font-size: 15px; font-weight: 600; }
.auth-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; color: var(--ui-text-muted); }
.auth-dialog-close:hover { background: var(--ui-surface-muted); color: var(--ui-text); }
.auth-dialog-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; font-size: 13px; line-height: 1.85; }
.auth-dialog-body > div { color: var(--ui-text) !important; }
.auth-dialog-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--ui-border); }
.auth-dialog-footer button { min-height: 44px; border-radius: 8px; padding: 10px 16px; font-size: 12px; }
.auth-dialog-cancel { border: 1px solid var(--ui-border-strong); background: var(--ui-surface); }
.auth-dialog-confirm { background: #355cde; color: #fff; font-weight: 600; }
.auth-dialog-confirm:hover { background: #294bc0; }
.auth-dialog button:focus-visible, .auth-dialog-body:focus-visible { outline: 2px solid #6484f6; outline-offset: -3px; }

@media (max-width: 1000px) {
  .auth-main { gap: 56px; grid-template-columns: minmax(0, 1fr) 360px; }
  .auth-step > span:last-child { display: none; }
  .auth-workflow-steps { padding: 24px 16px 16px; }
  .auth-step-arrow { margin-top: -12px; }
}

@media (max-width: 800px) {
  .auth-header { padding: max(16px, env(safe-area-inset-top)) 24px 16px; }
  .auth-header-note { font-size: 11px; letter-spacing: 1px; }
  .auth-story { display: none; }
  .auth-field input { font-size: 16px; }
  .auth-main { display: flex; align-items: center; justify-content: center; padding: 8px 24px; }
  .auth-panel { max-width: 392px; }
  .auth-page::before { background: radial-gradient(ellipse at 50% 0, var(--auth-glow), transparent 60%); }
  .auth-footer { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 420px) {
  .auth-logo { width: 130px; height: 34px; }
  .auth-header-note { display: none; }
  .auth-panel-heading h2 { font-size: 26px; }
  .auth-code-row { gap: 8px; }
  .auth-code-button { flex-basis: 104px; }
  .auth-footer { padding: 10px 24px max(10px, env(safe-area-inset-bottom)); }
  .auth-dialog-overlay { padding: 12px; }
  .auth-dialog-header { padding-left: 18px; }
  .auth-dialog-header h3 { font-size: 14px; }
  .auth-dialog-body { padding: 18px; }
  .auth-dialog-footer { padding: 12px 18px; gap: 8px; }
  .auth-dialog-footer button { padding: 10px 12px; }
}

.auth-page[data-density="compact"] .auth-header { padding-top: 12px; padding-bottom: 12px; }
.auth-page[data-density="compact"] .auth-logo { height: 30px; }
.auth-page[data-density="compact"] .auth-footer { display: none; }
.auth-page[data-density="compact"] .auth-main { padding-top: 8px; padding-bottom: 8px; }
.auth-page[data-density="compact"] .auth-story h1 { font-size: 40px; }
.auth-page[data-density="compact"] .auth-workflow { margin-top: 20px; }
.auth-page[data-density="compact"] .auth-panel-heading > p { display: none; }
.auth-page[data-density="compact"] .auth-panel-heading h2 { font-size: 25px; }
.auth-page[data-density="compact"] .auth-form { gap: 10px; margin-top: 14px; }
.auth-page[data-density="compact"] .auth-methods + .auth-form { margin-top: 0; }
.auth-page[data-density="compact"] .auth-methods { margin-top: 12px; margin-bottom: 12px; }
.auth-page[data-density="compact"] .auth-method { min-height: 36px; padding-bottom: 8px; }
.auth-page[data-density="compact"] .auth-switch { margin-top: 8px; }
.auth-page[data-density="compact"] .auth-field > label,
.auth-page[data-density="tight"] .auth-field > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auth-page[data-density="tight"] :is(.auth-header, .auth-footer, .auth-story, .auth-panel-heading) { display: none; }
.auth-page[data-density="tight"] .auth-main { display: flex; justify-content: center; align-items: center; padding: 4px 16px; }
.auth-page[data-density="tight"] .auth-panel { max-width: 520px; }
.auth-page[data-density="tight"] .auth-form { margin-top: 0; gap: 6px; }
.auth-page[data-density="tight"] .auth-field input { height: 40px; font-size: 16px; }
.auth-page[data-density="tight"] .auth-methods { margin: 0 0 8px; gap: 24px; }
.auth-page[data-density="tight"] .auth-method { min-height: 30px; padding-bottom: 6px; }
.auth-page[data-density="tight"] .auth-agreement { margin: 0; line-height: 1.5; }
.auth-page[data-density="tight"] .auth-submit { height: 40px; }
.auth-page[data-density="tight"] .auth-switch { margin-top: 4px; font-size: 12px; }
.auth-page[data-density="tight"] .auth-switch .auth-text-button { min-height: 24px; }
.auth-page[data-minimal="true"] .auth-form { gap: 4px; }
.auth-page[data-minimal="true"] .auth-field input, .auth-page[data-minimal="true"] .auth-submit { height: 36px; }
.auth-page[data-minimal="true"] .auth-code-status { margin-top: 4px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 1.4; }
.auth-page[data-minimal="true"] .auth-error { padding: 4px 8px; line-height: 1.4; }
.auth-page[data-ultra="true"] .auth-main { padding-top: 0; padding-bottom: 0; }
.auth-page[data-ultra="true"] .auth-methods { margin-bottom: 4px; }
.auth-page[data-ultra="true"] .auth-method { min-height: 26px; }
.auth-page[data-ultra="true"] .auth-switch { margin-top: 0; }
.auth-page[data-ultra="true"][data-mode="email"] .auth-field:has(#loginEmail),
.auth-page[data-ultra="true"][data-mode="register"] .auth-field:has(#regEmail) { grid-column: 1; grid-row: 1; }
.auth-page[data-ultra="true"][data-mode="email"] .auth-invitation,
.auth-page[data-ultra="true"][data-mode="register"] .auth-field:has(#regPassword) { grid-column: 2; grid-row: 1; }
@media (min-width: 560px) {
  .auth-page[data-density="tight"] .auth-form > .auth-field { grid-column: auto; }
  .auth-page[data-density="tight"] .auth-panel { max-width: 640px; }
  .auth-page[data-density="tight"] .auth-agreement, .auth-page[data-density="tight"] .auth-submit { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::after { transition: none; }
  .auth-submit:not(:disabled):hover { transform: none; }
  .auth-submit[aria-busy="true"]::before { animation: none; }
}

.auth-invitation p { margin-top: 6px; color: var(--auth-muted); font-size: 12px; line-height: 1.6; }