* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body#gradientAuth {
  /* Match Materio's font and surfaces without importing its global skin.
     Links, focus rings and filled controls have separate contrast roles. */
  --auth-font:"Materio Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --auth-primary:#1769c2;
  --auth-primary-hover:#1257a3;
  --auth-blue:#1769c2;
  --auth-blue-dark:#1257a3;
  --auth-accent:#4099ff;
  --auth-ink:#433c50;
  --auth-muted:#6d6777;
  --auth-placeholder:#797382;
  --auth-line:#e7e5eb;
  --auth-input-line:#cbc8d0;
  --auth-input-hover:#827d8b;
  --auth-canvas:#f4f5fa;
  --auth-surface:#ffffff;
  --auth-input:#ffffff;
  --auth-soft:#e8f3ff;
  --auth-danger:#b42337;
  --auth-danger-bg:#fff2f3;
  --auth-danger-line:#f0c6cd;
  --auth-success:#146c4f;
  --auth-success-bg:#edf9f3;
  --auth-success-line:#b7ddcb;
  --auth-motion:155ms cubic-bezier(.4,0,.2,1);
  color: var(--auth-ink);
  background: var(--auth-surface);
  font:400 15px/24px var(--auth-font);
  font-synthesis:none;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing: antialiased;
}
body#gradientAuth :is(input, button) {
  font: inherit;
}
body#gradientAuth a {
  color: var(--auth-blue);
  text-decoration: none;
  text-underline-offset: 3px;
}
body#gradientAuth a:hover {
  color: var(--auth-blue-dark);
  text-decoration: underline;
}
body#gradientAuth :is(a, button, input):focus-visible {
  outline: 2px solid var(--auth-blue);
  outline-offset: 3px;
}
body#gradientAuth [hidden] {
  display: none !important;
}
body#gradientAuth .auth-form {
  display: grid;
  gap: 22px;
}
body#gradientAuth .auth-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
body#gradientAuth .field {
  display: block;
  min-width: 0;
}
body#gradientAuth .field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
  color: var(--auth-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
body#gradientAuth .field-note {
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
body#gradientAuth .input-wrap {
  position: relative;
  display: block;
}
body#gradientAuth .field input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--auth-input-line);
  border-radius: 8px;
  background: var(--auth-input);
  color: var(--auth-ink);
  font-size: 15px;
  line-height: 22px;
  outline: 0;
  transition: border-color var(--auth-motion), background var(--auth-motion), box-shadow var(--auth-motion);
}
body#gradientAuth .field input::placeholder {
  color: var(--auth-placeholder);
  opacity: 1;
}
body#gradientAuth .field input:hover {
  border-color: var(--auth-input-hover);
}
body#gradientAuth .field input:focus {
  border-color: var(--auth-accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 16%, transparent);
}
body#gradientAuth .field:focus-within .field-label {
  color: var(--auth-blue);
}
body#gradientAuth .field input.password {
  padding-right: 52px;
}
body#gradientAuth .password-toggle {
  position: absolute;
  inset: 1px 1px 1px auto;
  display: grid;
  place-items: center;
  width: 42px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--auth-muted);
  cursor: pointer;
  transition: color var(--auth-motion), background var(--auth-motion);
}
body#gradientAuth .password-toggle:hover {
  color: var(--auth-blue);
  background: var(--auth-soft);
}
body#gradientAuth .password-toggle svg {
  width: 19px;
  height: 19px;
}
body#gradientAuth .password-toggle .auth-eye-hidden,
body#gradientAuth .password-toggle.is-visible .auth-eye-visible {
  display: none;
}
body#gradientAuth .password-toggle.is-visible .auth-eye-hidden {
  display: block;
}
body#gradientAuth .auth-remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
body#gradientAuth .auth-remember input {
  appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0;
  border: 1px solid var(--auth-input-line);
  border-radius: 4px;
  background: var(--auth-input);
  cursor: pointer;
  transition: border-color var(--auth-motion), background-color var(--auth-motion);
}
body#gradientAuth .auth-remember input:checked {
  border-color: var(--auth-primary);
  background: var(--auth-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4.5 9 3 3 6-6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
body#gradientAuth .auth-session-choice {
  padding: 14px;
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  background: var(--auth-canvas);
}
body#gradientAuth .auth-session-choice p {
  margin: 4px 0 0 28px;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 20px;
}
body#gradientAuth .auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--auth-primary);
  border-radius: 8px;
  background: var(--auth-primary);
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--auth-motion), border-color var(--auth-motion), box-shadow var(--auth-motion);
}
body#gradientAuth .auth-submit:hover {
  background: var(--auth-primary-hover);
  border-color: var(--auth-primary-hover);
}
body#gradientAuth .auth-submit:disabled {
  opacity: .68;
  cursor: wait;
}
body#gradientAuth .auth-message {
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid var(--auth-danger-line);
  border-radius: 6px;
  background: var(--auth-danger-bg);
  color: var(--auth-danger);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}
body#gradientAuth .auth-message.ok {
  background: var(--auth-success-bg);
  border-color: var(--auth-success-line);
  color: var(--auth-success);
}
body#gradientAuth .role-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body#gradientAuth .role-picker legend {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
body#gradientAuth .role-picker legend .field-note {
  float: right;
  margin-left: 8px;
}
body#gradientAuth .role-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
body#gradientAuth .role-option input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
body#gradientAuth .role-option > span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  min-height: 106px;
  padding: 14px;
  border: 1px solid var(--auth-input-line);
  border-radius: 10px;
  background: var(--auth-input);
  transition: border-color var(--auth-motion), background var(--auth-motion), box-shadow var(--auth-motion);
}
body#gradientAuth .role-option > span::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 14px;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--auth-input-line);
  border-radius: 50%;
  background: var(--auth-input);
}
body#gradientAuth .role-option svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0;
  color: var(--auth-muted);
}
body#gradientAuth .role-copy {
  display: block;
  min-width: 0;
  padding-right: 0;
}
body#gradientAuth .role-option b {
  display: block;
  margin: 0 0 2px;
  padding-right: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
body#gradientAuth .role-option small {
  display: block;
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 18px;
}
body#gradientAuth .role-option:hover > span {
  border-color: var(--auth-accent);
}
body#gradientAuth .role-option input:checked + span {
  background: var(--auth-soft);
  border-color: var(--auth-accent);
}
body#gradientAuth .role-option input:checked + span::after {
  border: 5px solid var(--auth-primary);
}
body#gradientAuth .role-option input:checked + span svg {
  color: var(--auth-blue);
}
body#gradientAuth .role-option input:focus-visible + span {
  outline: 2px solid var(--auth-blue);
  outline-offset: 3px;
}
html[data-theme=dark] body#gradientAuth {
  --auth-canvas:#2c3644;
  --auth-surface:#3a4758;
  --auth-input:#313d4d;
  --auth-ink:#edf2f7;
  --auth-muted:#c0cbd7;
  --auth-placeholder:#afbdce;
  --auth-line:#566477;
  --auth-input-line:#718198;
  --auth-input-hover:#a0b1c6;
  --auth-soft:#405773;
  --auth-blue:#9ecfff;
  --auth-blue-dark:#b5dcff;
  --auth-danger:#ffb1bd;
  --auth-danger-bg:#492937;
  --auth-danger-line:#714051;
  --auth-success:#a4e9cf;
  --auth-success-bg:#193e37;
  --auth-success-line:#357a65;
  color-scheme: dark;
}
html[data-targetsize=large] body#gradientAuth :is(.field input, .auth-submit, .password-toggle) {
  min-height: 48px;
  height: 48px;
}
html[data-targetsize=large] body#gradientAuth .password-toggle {
  inset-block: 0;
  width: 46px;
}
html[data-targetsize=large] body#gradientAuth .field input.password {
  padding-right: 54px;
}
html[data-targetsize=large] body#gradientAuth .auth-remember {
  min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
  body#gradientAuth :is(input, button, .role-option > span) {
    transition: none;
  }
}
html[data-reduce-motion=on] body#gradientAuth :is(input, button, .role-option > span) {
  transition: none;
}
@media (forced-colors: active) {
  body#gradientAuth .auth-remember input {
    appearance: auto;
  }
  body#gradientAuth .role-option input:checked + span {
    outline: 2px solid Highlight;
  }
  body#gradientAuth .role-option input:checked + span::after {
    border-color: Highlight;
    forced-color-adjust: none;
  }
}