/**
 * Auth screen (login/register) and onboarding – exact design from design_mocks/test-login.html
 * Scoped under #auth-screen and #onboarding-screen so they do not affect the main app.
 */
#auth-screen,
#onboarding-screen {
  --auth-color-blue: #5ba9ff;
  --auth-color-green: #56c98d;
  --auth-color-red: #ef6e6e;
  --auth-text-primary: #1f2a37;
  --auth-text-secondary: #425466;
  --auth-text-tertiary: #7f95aa;
  --auth-border-light: rgba(255, 255, 255, 0.7);
  --auth-radius-md: 10px;
  --auth-space-xs: 4px;
  --auth-space-sm: 8px;
  --auth-space-md: 12px;
  --auth-space-base: 16px;
  --auth-space-lg: 24px;
  --auth-space-xl: 32px;
  --auth-shadow-sm: 0 6px 16px rgba(89, 120, 158, 0.1);
  --auth-shadow-md: 0 10px 24px rgba(89, 120, 158, 0.13);
  --auth-focus-ring: 0 0 0 3px rgba(120, 191, 248, 0.28), 0 8px 18px rgba(96, 147, 191, 0.18);
  --auth-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --auth-duration-fast: 160ms;
  --auth-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --auth-font-mono: "SF Mono", Monaco, "Inconsolata", "Roboto Mono", monospace;

  min-height: 100vh;
  font-family: var(--auth-font-body);
  color: var(--auth-text-primary);
  background: linear-gradient(180deg, rgba(237, 246, 253, 0.96), rgba(225, 238, 249, 0.88));
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-x: hidden;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

#auth-screen *,
#auth-screen *::before,
#auth-screen *::after,
#onboarding-screen *,
#onboarding-screen *::before,
#onboarding-screen *::after {
  box-sizing: border-box;
}

#auth-screen::before,
#auth-screen::after,
#onboarding-screen::before,
#onboarding-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#auth-screen::before,
#onboarding-screen::before {
  left: -20vw;
  top: -18vh;
  width: 142vw;
  height: 54vh;
  border-radius: 0 0 58% 42% / 0 0 72% 68%;
  transform: rotate(-7deg);
  opacity: 0.66;
  background:
    linear-gradient(102deg, rgba(139, 199, 255, 0.48) 0%, rgba(139, 199, 255, 0.26) 34%, rgba(120, 207, 165, 0.22) 68%, rgba(120, 207, 165, 0.1) 100%),
    radial-gradient(42% 80% at 12% 26%, rgba(255, 255, 255, 0.24), transparent 74%),
    radial-gradient(28% 56% at 78% 22%, rgba(255, 208, 103, 0.14), transparent 70%);
}

#auth-screen::after,
#onboarding-screen::after {
  left: -18vw;
  bottom: -26vh;
  width: 136vw;
  height: 52vh;
  border-radius: 60% 40% 0 0 / 66% 62% 0 0;
  transform: rotate(8deg);
  opacity: 0.58;
  background:
    linear-gradient(94deg, rgba(139, 199, 255, 0.38) 0%, rgba(139, 199, 255, 0.2) 44%, rgba(255, 208, 103, 0.14) 72%, rgba(239, 110, 110, 0.12) 100%),
    radial-gradient(30% 60% at 26% 70%, rgba(255, 255, 255, 0.22), transparent 78%),
    radial-gradient(24% 48% at 82% 42%, rgba(120, 207, 165, 0.16), transparent 72%);
}

#auth-screen .page,
#onboarding-screen .page {
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: var(--auth-space-xl) 0;
}

#auth-screen .login-card,
#onboarding-screen .login-card {
  border-radius: 22px;
  border: 1px solid var(--auth-border-light);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(237, 247, 255, 0.1));
  box-shadow: var(--auth-shadow-md);
  backdrop-filter: blur(10px) saturate(118%);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  padding: clamp(20px, 2.6vw, 32px);
  border-color: rgba(255, 255, 255, 0.62);
}

#auth-screen .auth-theme-toggle-row,
#onboarding-screen .auth-theme-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--auth-space-base);
}

#auth-screen .auth-theme-btn,
#onboarding-screen .auth-theme-btn {
  min-height: 38px;
  border: 1px solid rgba(188, 212, 232, 0.92);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 249, 255, 0.9));
  color: #2d4d69;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#auth-screen .auth-theme-btn:hover,
#onboarding-screen .auth-theme-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 199, 255, 0.68);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(226, 243, 255, 0.94));
}

#auth-screen .auth-theme-btn:focus-visible,
#onboarding-screen .auth-theme-btn:focus-visible {
  outline: 2px solid rgba(88, 156, 209, 0.5);
  outline-offset: 2px;
}

#auth-screen .auth-theme-btn-icon,
#onboarding-screen .auth-theme-btn-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 199, 255, 0.55);
  background: rgba(255, 255, 255, 0.74);
  color: #295476;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

#auth-screen .auth-theme-btn-label,
#onboarding-screen .auth-theme-btn-label {
  line-height: 1;
}

#auth-screen .auth-tabs {
  position: relative;
  display: flex;
  gap: 6px;
  margin-bottom: var(--auth-space-base);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(186, 207, 230, 0.66);
  background: linear-gradient(180deg, rgba(236, 244, 252, 0.86), rgba(232, 241, 250, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#auth-screen .auth-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  border: 1px solid rgba(177, 201, 224, 0.76);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 251, 255, 0.9));
  box-shadow: 0 4px 10px rgba(102, 130, 158, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transition: transform 220ms var(--auth-ease), width 220ms var(--auth-ease);
  will-change: transform, width;
}

#auth-screen .auth-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #2f465a;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--auth-duration-fast) var(--auth-ease);
}

#auth-screen .auth-tab:hover {
  background: rgba(255, 255, 255, 0.62);
}

#auth-screen .auth-tab.is-active {
  color: #162736;
}

#auth-screen .auth-tab:focus-visible {
  outline: none;
  box-shadow: var(--auth-focus-ring);
}

#auth-screen .auth-panel {
  display: none;
}

#auth-screen .auth-panel.is-active {
  display: block;
}

#auth-screen .form-head,
#onboarding-screen .form-head {
  margin-bottom: var(--auth-space-lg);
}

#auth-screen .form-head h2,
#onboarding-screen .form-head h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  margin-bottom: var(--auth-space-xs);
}

#auth-screen .form-head p,
#onboarding-screen .form-head p {
  color: var(--auth-text-secondary);
  font-size: 14px;
}

#auth-screen .summary,
#onboarding-screen .summary {
  margin-bottom: var(--auth-space-base);
  border-radius: var(--auth-radius-md);
  border: 1px solid rgba(236, 148, 154, 0.72);
  background: linear-gradient(90deg, rgba(255, 215, 218, 0.7), rgba(255, 235, 223, 0.68));
  color: #7c2f3b;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  display: none;
}

#auth-screen .summary.active,
#onboarding-screen .summary.active {
  display: block;
}

#auth-screen .field,
#onboarding-screen .field {
  display: grid;
  gap: 6px;
  margin-bottom: var(--auth-space-base);
}

#auth-screen .field label,
#onboarding-screen .field label {
  font-size: 12px;
  color: var(--auth-text-secondary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

#auth-screen .field-wrap,
#onboarding-screen .field-wrap {
  position: relative;
}

#auth-screen .input,
#onboarding-screen .input {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(178, 203, 228, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 255, 0.88));
  color: var(--auth-text-primary);
  padding: 10px 42px 10px 12px;
  font-size: 15px;
  transition: border-color var(--auth-duration-fast) var(--auth-ease), box-shadow var(--auth-duration-fast) var(--auth-ease), transform var(--auth-duration-fast) var(--auth-ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), var(--auth-shadow-sm);
}

#auth-screen .input::placeholder,
#onboarding-screen .input::placeholder {
  color: var(--auth-text-tertiary);
}

#auth-screen .input:focus,
#onboarding-screen .input:focus {
  outline: none;
  border-color: var(--auth-color-blue);
  box-shadow: var(--auth-focus-ring);
  transform: translateY(-1px);
}

#auth-screen .field.invalid .input {
  border-color: rgba(235, 134, 142, 0.92);
  box-shadow: 0 0 0 3px rgba(242, 160, 166, 0.22);
}

#auth-screen .field-icon,
#onboarding-screen .field-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--auth-text-tertiary);
  font-family: var(--auth-font-mono);
  pointer-events: none;
}

#auth-screen .password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #3d5c77;
  cursor: pointer;
  transition: all var(--auth-duration-fast) var(--auth-ease);
  display: inline-grid;
  place-items: center;
}

#auth-screen .password-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#auth-screen .password-toggle .icon-eye-off {
  display: none;
}

#auth-screen .password-toggle.is-revealed .icon-eye {
  display: none;
}

#auth-screen .password-toggle.is-revealed .icon-eye-off {
  display: block;
}

#auth-screen .password-toggle:hover {
  border-color: rgba(139, 199, 255, 0.62);
  background: linear-gradient(90deg, rgba(132, 201, 255, 0.2), rgba(134, 223, 117, 0.14));
  transform: translateY(-50%) translateY(-1px);
}

#auth-screen .password-toggle:focus-visible {
  outline: none;
  box-shadow: var(--auth-focus-ring);
}

#auth-screen .hint {
  font-size: 12px;
  color: var(--auth-text-tertiary);
}

#auth-screen .error {
  display: none;
  font-size: 12px;
  color: #9a4150;
  font-weight: 600;
}

#auth-screen .field.invalid .error {
  display: block;
}

#auth-screen .row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--auth-space-md);
  margin-bottom: var(--auth-space-base);
}

#auth-screen .recover {
  color: #29597f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted rgba(64, 121, 173, 0.5);
}

#auth-screen .recover:focus-visible {
  outline: none;
  box-shadow: var(--auth-focus-ring);
  border-radius: 4px;
}

#auth-screen .checks {
  margin-bottom: var(--auth-space-base);
}

#auth-screen .check-field {
  padding: 0;
}

#auth-screen .check-field.invalid {
  border: 0;
  box-shadow: none;
}

#auth-screen .check-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--auth-text-secondary);
  font-size: 13px;
  user-select: none;
  cursor: pointer;
}

#auth-screen .check-item input {
  margin-top: 2px;
  accent-color: var(--auth-color-blue);
}

#auth-screen .check-item strong {
  color: var(--auth-text-primary);
  font-weight: 600;
}

#auth-screen .check-error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #9a4150;
  font-weight: 600;
}

#auth-screen .check-field.invalid .check-error {
  display: block;
}

#auth-screen .check-field.invalid .check-item {
  color: #9a4150;
}

#auth-screen .actions,
#onboarding-screen .actions {
  display: grid;
  gap: 10px;
}

#auth-screen .btn,
#onboarding-screen .btn {
  min-height: 44px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--auth-duration-fast) var(--auth-ease), box-shadow var(--auth-duration-fast) var(--auth-ease), border-color var(--auth-duration-fast) var(--auth-ease), background var(--auth-duration-fast) var(--auth-ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

#auth-screen .btn:focus-visible,
#onboarding-screen .btn:focus-visible {
  outline: none;
  box-shadow: var(--auth-focus-ring);
}

#auth-screen .btn-primary,
#onboarding-screen .btn-primary {
  color: #24513e;
  border-color: rgba(126, 182, 155, 0.58);
  background: linear-gradient(95deg, rgba(182, 228, 205, 0.84), rgba(214, 240, 224, 0.88));
}

#auth-screen .btn-primary:hover,
#onboarding-screen .btn-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(116, 170, 145, 0.66);
  background: linear-gradient(95deg, rgba(168, 219, 191, 0.9), rgba(202, 232, 212, 0.92));
  box-shadow: 0 8px 16px rgba(92, 139, 181, 0.18);
}

#auth-screen .btn-primary[disabled],
#onboarding-screen .btn-primary[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

#auth-screen .status,
#onboarding-screen .status {
  margin-top: var(--auth-space-base);
  min-height: 20px;
  color: var(--auth-text-secondary);
  font-size: 13px;
  font-weight: 500;
}

#auth-screen .status[data-state="success"],
#onboarding-screen .status[data-state="success"] {
  color: #216242;
}

#auth-screen .status[data-state="error"],
#onboarding-screen .status[data-state="error"] {
  color: #9a4150;
}

#auth-screen .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-theme="dark"] #auth-screen,
html[data-theme="dark"] #onboarding-screen {
  color-scheme: dark;
  --auth-color-blue: #7fc3ff;
  --auth-color-green: #5fd89d;
  --auth-color-red: #ff8b96;
  --auth-text-primary: #edf4ff;
  --auth-text-secondary: #b2c5d8;
  --auth-text-tertiary: #8198b0;
  --auth-border-light: rgba(169, 205, 239, 0.26);
  --auth-shadow-sm: 0 10px 20px rgba(0, 0, 0, 0.3);
  --auth-shadow-md: 0 22px 44px rgba(0, 0, 0, 0.36);
  --auth-focus-ring: 0 0 0 2px rgba(7, 14, 24, 0.96), 0 0 0 4px rgba(127, 195, 255, 0.72);
  background:
    radial-gradient(circle at 12% -4%, rgba(95, 216, 157, 0.14), transparent 34%),
    radial-gradient(circle at 84% 8%, rgba(127, 195, 255, 0.16), transparent 36%),
    linear-gradient(180deg, #050b13, #0a1421 46%, #0b1726);
}

html[data-theme="dark"] #auth-screen::before,
html[data-theme="dark"] #onboarding-screen::before {
  opacity: 0.48;
  background:
    linear-gradient(102deg, rgba(127, 195, 255, 0.22) 0%, rgba(127, 195, 255, 0.12) 34%, rgba(95, 216, 157, 0.16) 68%, rgba(95, 216, 157, 0.04) 100%),
    radial-gradient(42% 80% at 12% 26%, rgba(255, 255, 255, 0.07), transparent 74%),
    radial-gradient(28% 56% at 78% 22%, rgba(255, 208, 103, 0.08), transparent 70%);
}

html[data-theme="dark"] #auth-screen::after,
html[data-theme="dark"] #onboarding-screen::after {
  opacity: 0.44;
  background:
    linear-gradient(94deg, rgba(127, 195, 255, 0.16) 0%, rgba(127, 195, 255, 0.08) 44%, rgba(255, 208, 103, 0.07) 72%, rgba(255, 139, 150, 0.07) 100%),
    radial-gradient(30% 60% at 26% 70%, rgba(255, 255, 255, 0.08), transparent 78%),
    radial-gradient(24% 48% at 82% 42%, rgba(95, 216, 157, 0.1), transparent 72%);
}

html[data-theme="dark"] #auth-screen .login-card,
html[data-theme="dark"] #onboarding-screen .login-card {
  border-color: rgba(166, 203, 238, 0.28);
  background: linear-gradient(148deg, rgba(15, 24, 36, 0.62), rgba(11, 20, 31, 0.48));
  backdrop-filter: blur(14px) saturate(132%);
  -webkit-backdrop-filter: blur(14px) saturate(132%);
}

html[data-theme="dark"] #auth-screen .auth-theme-btn,
html[data-theme="dark"] #onboarding-screen .auth-theme-btn {
  border-color: rgba(104, 152, 190, 0.58);
  background: linear-gradient(160deg, rgba(20, 35, 51, 0.95), rgba(15, 27, 40, 0.9));
  color: #d6e7f7;
}

html[data-theme="dark"] #auth-screen .auth-theme-btn:hover,
html[data-theme="dark"] #onboarding-screen .auth-theme-btn:hover {
  border-color: rgba(138, 194, 238, 0.82);
  background: linear-gradient(160deg, rgba(24, 42, 61, 0.97), rgba(18, 33, 49, 0.93));
}

html[data-theme="dark"] #auth-screen .auth-theme-btn-icon,
html[data-theme="dark"] #onboarding-screen .auth-theme-btn-icon {
  border-color: rgba(116, 160, 197, 0.52);
  background: rgba(22, 35, 51, 0.88);
  color: #b9cee0;
}

html[data-theme="dark"] #auth-screen .auth-tabs {
  border-color: rgba(146, 186, 223, 0.3);
  background: linear-gradient(180deg, rgba(16, 29, 44, 0.88), rgba(13, 25, 39, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] #auth-screen .auth-tab-indicator {
  border-color: rgba(164, 202, 236, 0.36);
  background: linear-gradient(180deg, rgba(36, 57, 79, 0.9), rgba(31, 52, 74, 0.86));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] #auth-screen .auth-tab {
  color: #aac0d6;
}

html[data-theme="dark"] #auth-screen .auth-tab:hover {
  background: rgba(158, 194, 229, 0.12);
}

html[data-theme="dark"] #auth-screen .auth-tab.is-active {
  color: #eef6ff;
}

html[data-theme="dark"] #auth-screen .summary,
html[data-theme="dark"] #onboarding-screen .summary {
  border-color: rgba(255, 139, 150, 0.56);
  background: linear-gradient(90deg, rgba(114, 38, 49, 0.58), rgba(112, 52, 45, 0.54));
  color: #ffd8de;
}

html[data-theme="dark"] #auth-screen .input,
html[data-theme="dark"] #onboarding-screen .input {
  border-color: rgba(141, 179, 214, 0.44);
  background: linear-gradient(180deg, rgba(20, 33, 49, 0.92), rgba(16, 28, 42, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--auth-shadow-sm);
}

html[data-theme="dark"] #auth-screen .field.invalid .input,
html[data-theme="dark"] #onboarding-screen .field.invalid .input {
  box-shadow: 0 0 0 3px rgba(242, 160, 166, 0.18);
}

html[data-theme="dark"] #auth-screen .password-toggle {
  color: #88aac7;
}

html[data-theme="dark"] #auth-screen .password-toggle:hover {
  border-color: rgba(127, 195, 255, 0.48);
  background: linear-gradient(95deg, rgba(127, 195, 255, 0.18), rgba(95, 216, 157, 0.12));
}

html[data-theme="dark"] #auth-screen .recover,
html[data-theme="dark"] #onboarding-screen .recover {
  color: #9fc8eb;
  border-bottom-color: rgba(127, 195, 255, 0.54);
}

html[data-theme="dark"] #auth-screen .error,
html[data-theme="dark"] #auth-screen .check-error,
html[data-theme="dark"] #auth-screen .check-field.invalid .check-item,
html[data-theme="dark"] #onboarding-screen .error {
  color: #f2aeb6;
}

html[data-theme="dark"] #auth-screen .btn-primary,
html[data-theme="dark"] #onboarding-screen .btn-primary {
  color: #e8f9f0;
  border-color: rgba(90, 188, 139, 0.6);
  background: linear-gradient(95deg, rgba(43, 140, 94, 0.72), rgba(40, 126, 95, 0.74));
  box-shadow: inset 0 1px 0 rgba(173, 231, 202, 0.18);
}

html[data-theme="dark"] #auth-screen .btn-primary:hover,
html[data-theme="dark"] #onboarding-screen .btn-primary:hover {
  border-color: rgba(105, 210, 157, 0.76);
  background: linear-gradient(95deg, rgba(52, 158, 107, 0.78), rgba(45, 143, 109, 0.8));
  box-shadow: 0 10px 20px rgba(5, 13, 22, 0.52);
}

html[data-theme="dark"] #auth-screen .status[data-state="success"],
html[data-theme="dark"] #onboarding-screen .status[data-state="success"] {
  color: #8fddb6;
}

html[data-theme="dark"] #auth-screen .status[data-state="error"],
html[data-theme="dark"] #onboarding-screen .status[data-state="error"] {
  color: #f2aeb6;
}

@media (max-width: 980px) {
  #auth-screen .page {
    width: min(560px, calc(100% - 24px));
  }
}

@media (max-width: 560px) {
  #auth-screen .page {
    width: min(100%, calc(100% - 20px));
    align-items: center;
    min-height: 100vh;
    padding: 16px 0;
  }

  #auth-screen .login-card {
    border-radius: 15px;
    padding: 16px;
  }

  #auth-screen .auth-tabs {
    margin-bottom: 14px;
  }

  #auth-screen .auth-tab {
    min-height: 41px;
    font-size: 14px;
  }

  #auth-screen .form-head,
  #onboarding-screen .form-head {
    margin-bottom: 16px;
  }

  #auth-screen .form-head p,
  #onboarding-screen .form-head p {
    font-size: 13px;
  }

  #auth-screen .field,
  #onboarding-screen .field {
    margin-bottom: 14px;
  }

  #auth-screen .hint {
    font-size: 11px;
  }

  #auth-screen .row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 10px;
  }

  #auth-screen .recover {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  #auth-screen .hint {
    display: none;
  }

  #auth-screen .field.invalid .error {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  #auth-screen,
  #auth-screen *,
  #auth-screen *::before,
  #auth-screen *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #auth-screen .input:focus,
  #auth-screen .btn:hover,
  #auth-screen .password-toggle:hover {
    transform: none;
  }

  #auth-screen .auth-tab-indicator {
    transition: none;
  }
}