/**
 * Account pages: React components/AuthWidgets (AuthWrapper, AuthCard,
 * HeaderLogin) and AuthForms/* (MUI InputLabel, OutlinedInput, Button,
 * Checkbox). Breakpoints are React's: sm 489, md 768, lg 1024, xl 1536.
 */

/* AuthWrapper: full-width #272727 band, card centered. */
.auth {
  display: flex;
  justify-content: center;
  background: #272727;
  font-family: var(--mui-font);
}
/* AuthCard: max-width 500 (580 from lg), margin 16 (24 from md), inner padding 0/24/32/40. */
.auth__card {
  max-width: 500px;
  margin: 16px;
  background: #272727;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 489px) { .auth__card { padding: 24px; } }
@media (min-width: 768px) { .auth__card { margin: 24px; padding: 32px; } }
@media (min-width: 1024px) { .auth__card { max-width: 580px; } }
@media (min-width: 1536px) { .auth__card { padding: 40px; } }

/* HeaderLogin: column below sm, row from sm, gap 10, space-between.
   LoginPage's Stack around it has margin-bottom -4px (xs) / 4px (sm). */
.auth__tabs {
  margin-bottom: -4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
@media (min-width: 489px) { .auth__tabs { flex-direction: row; margin-bottom: 4px; } }
.auth__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2em 1em;
  background: #414242;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
}
.auth__tab--active { background: #32beb9; }

/* Form grid: spacing 3 between rows; each field a Stack with spacing 1. */
.auth form, .auth-panel form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The empty login/register error row takes no space until it holds an error. */
.auth-error:not(:has(.field__error)) { display: none; }

.field__label {
  display: block;
  color: #fff;
  font-size: 1em;
  line-height: 1.4375em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field__label--required::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  vertical-align: super;
  background: url('../images/icons/required.svg') no-repeat center / contain;
}
.field__help {
  margin: 0;
  color: #fff;
  font-size: 0.85em;
  line-height: 1.57;
}
.field__error {
  margin: 0;
  color: var(--error);
  font-size: 0.75rem;
  line-height: 1.66;
}
/* Register and set-password help lines are InputLabels (14px, line-height 1.4375em, wrapping). */
#kure-native-register .field__help, #kure-native-set-password .field__help {
  font-size: 0.875rem;
  line-height: 1.4375em;
}
.auth-error .field__error { text-align: center; font-size: 14px; }

/* OutlinedInput (theme overrides: padding 10.5 14 10.5 12, radius 4, border #d9d9d9).
   MUI draws the 1px border with a fieldset that takes no layout space; an inset shadow does the same here
   (.wrapper input already removes the border, as in React). */
.form-text, .form-email {
  width: 100%;
  margin: 0;
  border: 0;
  padding: 10.5px 14px 10.5px 12px;
  box-shadow: inset 0 0 0 1px #d9d9d9;
  border-radius: 4px;
  background: #fff;
  color: #262626; /* palette text.primary; Chrome autofill shows it black */
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4375em;
  outline: 0;
}
.form-text::placeholder, .form-email::placeholder { color: currentColor; opacity: 0.42; }
.form-text:hover, .form-email:hover { box-shadow: inset 0 0 0 1px #69b1ff; }
.form-text:focus, .form-email:focus { box-shadow: inset 0 0 0 1px #69b1ff, 0 0 0 2px rgba(22, 119, 255, 0.2); }
.field--error .form-text, .field--error .form-email { box-shadow: inset 0 0 0 1px var(--error); }
.field--error .form-text:focus, .field--error .form-email:focus { box-shadow: inset 0 0 0 1px var(--error), 0 0 0 2px rgba(255, 77, 79, 0.2); }

/* Contained large Button, full width, AnimateButton scale on press. */
.auth-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 22px;
  border: 0;
  border-radius: 4px;
  background: #32beb9;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  text-transform: capitalize;
  cursor: pointer;
  transition: transform 0.15s;
}
.auth-button:active { transform: scale(0.9); }
.auth-button:disabled { cursor: default; }
.auth-button .spinner { margin-right: 10px; }

/* Register: strength meter (FormControl mt 2), match line, recommendations. */
.strength { margin-top: 8px; }
.strength__track { width: 55%; height: 8px; border-radius: 7px; background: #fff; }
.strength__bar { width: 0; height: 8px; border-radius: 7px; }
/* Typography subtitle1 at 0.75rem. */
.strength__label, .match {
  margin: 0;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.57;
}
.match { display: flex; }
.match__value { font-weight: 400; color: red; }
.match__value[data-ok] { color: green; }

.recommend { border: solid #ccc 1px; }
.recommend[hidden] { display: none; }
.recommend__list {
  margin: 0;
  padding: 0 0 8px;
  list-style: disc;
}
.recommend__head {
  list-style: none;
  padding-left: 8px;
  background: #272727;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 48px;
}
.recommend__list li[data-rule] {
  margin-left: 32px;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.57;
  padding: 4px 0;
}
.recommend__list li[hidden] { display: none; }

/* FormControlLabel + Checkbox (icon 38px, padding 9). */
.field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin-left: -11px;
}
.field__check { position: relative; display: inline-flex; padding: 9px; }
.field__check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.field__box {
  width: 38px;
  height: 38px;
  background: currentColor;
  color: #8c8c8c;
  -webkit-mask: url('../images/icons/checkbox.svg') no-repeat center / contain;
  mask: url('../images/icons/checkbox.svg') no-repeat center / contain;
}
.field__check input:checked + .field__box {
  /* MUI theme primary.main. */
  color: #1677ff;
  -webkit-mask-image: url('../images/icons/checkbox-checked.svg');
  mask-image: url('../images/icons/checkbox-checked.svg');
}
.field--checkbox .field__label { white-space: normal; font-size: 0.875rem; line-height: 1.57; }

/* LoadingBackdrop while a register/reset request runs. */
.auth-busy {
  position: fixed;
  inset: 0;
  z-index: 1201;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.auth-busy .spinner { width: 40px; height: 40px; border-width: 3.6px; margin: 0; }

/* DrawerAuth panel (HeaderLogin typeLayout 'panel'): the sign-in blocks give
   way to HeaderLogin's Grid, where the three tabs and the form's Box (padding-top
   60) are flex items of one wrapping container (column below sm, row from sm,
   gap 10, space-between), so the form box takes its content width. */
.drawer-auth[data-panel-open] > .drawer-auth__block:not(.auth-panel) { display: none; }
.auth-panel {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  gap: 10px;
}
@media (min-width: 489px) { .auth-panel { flex-direction: row; } }
.auth-panel .auth__tabs { display: contents; }
.auth-panel__body { padding-top: 60px; }
/* The forms are MUI Grid containers (row wrap), so the Box's content width is
   the sum of the rows' widths; the inputs (size 60) add none, as in React. */
.auth-panel form { flex-flow: row wrap; }
.auth-panel form > * { flex: 0 0 100%; }
.auth-panel .form-text, .auth-panel .form-email { width: 0; min-width: 100%; }