:root {
  --wmu-paper: #f6f2e9;
  --wmu-paper-deep: #ece5d8;
  --wmu-ink: #282421;
  --wmu-ink-soft: #625b55;
  --wmu-wine: #7b2439;
  --wmu-wine-dark: #591526;
  --wmu-gold: #b2894b;
  --wmu-line: #cfc5b6;
  --wmu-white: #fffdf8;
  --wmu-danger: #a32f32;
}

html {
  color-scheme: light !important;
  background: var(--wmu-paper) !important;
}

body {
  min-width: 320px !important;
  margin: 0 !important;
  color: var(--wmu-ink) !important;
  background-color: var(--wmu-paper) !important;
  background-image: repeating-linear-gradient(
    0deg,
    rgb(40 36 33 / 1.4%) 0,
    rgb(40 36 33 / 1.4%) 1px,
    transparent 1px,
    transparent 5px
  ) !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

#root,
#root > .MuiBox-root {
  min-height: 100vh !important;
  background: transparent !important;
}

header.MuiAppBar-root {
  position: relative !important;
  z-index: 2;
  overflow: hidden;
  background: rgb(31 28 27 / 94%) !important;
  color: var(--wmu-white) !important;
  border-bottom: 1px solid rgb(255 253 248 / 24%) !important;
  box-shadow: 0 1px 0 rgb(178 137 75 / 42%) !important;
}

header.MuiAppBar-root::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--wmu-gold);
  content: "";
}

header.MuiAppBar-root .MuiToolbar-root {
  width: min(1180px, calc(100% - 40px)) !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

header.MuiAppBar-root .MuiToolbar-root::before {
  flex: 1 1 auto;
  color: var(--wmu-white);
  content: "WMU校园墙｜茶山夜筏｜管理员后台";
  font-family: Georgia, "Songti SC", SimSun, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

header.MuiAppBar-root .MuiToolbar-root > p {
  display: none !important;
}

header.MuiAppBar-root #account-menu {
  margin-left: 16px !important;
  color: var(--wmu-white) !important;
}

header.MuiAppBar-root .MuiAvatar-root {
  width: 32px !important;
  height: 32px !important;
  color: var(--wmu-white) !important;
  background: var(--wmu-wine) !important;
  border: 1px solid rgb(255 253 248 / 55%);
}

#first-factor-stage,
div.MuiGrid2-root#authenticated-stage {
  min-height: calc(100vh - 72px) !important;
  padding: 52px 16px 72px !important;
  align-content: center !important;
  background: transparent !important;
}

#first-factor-stage > .MuiContainer-root,
div.MuiGrid2-root#authenticated-stage > .MuiContainer-root {
  max-width: 468px !important;
  padding: 0 !important;
}

#first-factor-stage #UserSvg {
  width: 64px !important;
  height: 64px !important;
  fill: var(--wmu-wine) !important;
  color: var(--wmu-wine) !important;
}

#first-factor-stage #UserSvg * {
  fill: currentColor !important;
}

#form-login {
  width: 100% !important;
  padding: 30px 30px 28px !important;
  color: var(--wmu-ink) !important;
  background: var(--wmu-white) !important;
  border: 1px solid var(--wmu-line) !important;
  border-top: 3px solid var(--wmu-gold) !important;
  border-radius: 4px !important;
  box-shadow: 0 14px 36px rgb(41 32 27 / 10%) !important;
}

#first-factor-stage h5 {
  color: var(--wmu-wine-dark) !important;
  font-family: Georgia, "Songti SC", SimSun, serif !important;
  font-weight: 700 !important;
}

#form-login::before {
  display: block;
  margin-bottom: 5px;
  color: var(--wmu-wine-dark);
  content: "校园墙管理员后台";
  font-family: Georgia, "Songti SC", SimSun, serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
}

#form-login::after {
  display: block;
  margin-top: 20px;
  color: var(--wmu-ink-soft);
  content: "仅限授权管理员使用 · WMU Campus Wall";
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

#form-login .MuiTypography-root,
#form-login .MuiFormLabel-root,
#form-login label,
#form-login .MuiFormControlLabel-label {
  color: var(--wmu-ink) !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

#form-login .MuiFormHelperText-root {
  color: var(--wmu-ink-soft) !important;
}

#form-login .MuiInputBase-root {
  color: var(--wmu-ink) !important;
  background: var(--wmu-white) !important;
}

#form-login .MuiOutlinedInput-notchedOutline,
#form-login fieldset {
  border-color: var(--wmu-line) !important;
}

#form-login .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
#form-login .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--wmu-wine) !important;
}

#form-login .MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgb(123 36 57 / 16%) !important;
}

#form-login input,
#form-login textarea,
#form-login select {
  color: var(--wmu-ink) !important;
  background: var(--wmu-white) !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

#form-login input::placeholder,
#form-login textarea::placeholder {
  color: var(--wmu-ink-soft) !important;
  opacity: .78;
}

#form-login input:-webkit-autofill,
#form-login input:-webkit-autofill:hover,
#form-login input:-webkit-autofill:focus,
#form-login input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--wmu-white) inset !important;
  -webkit-text-fill-color: var(--wmu-ink) !important;
  background-color: var(--wmu-white) !important;
  caret-color: var(--wmu-ink) !important;
  transition: background-color 9999s ease-out 0s;
}

#form-login .MuiCheckbox-root {
  color: var(--wmu-wine) !important;
}

#form-login .MuiCheckbox-root svg {
  color: var(--wmu-wine) !important;
  fill: currentColor !important;
}

#form-login input[type="checkbox"] {
  accent-color: var(--wmu-wine) !important;
}

#form-login button[type="submit"],
#form-login button.MuiButton-contained,
#form-login button.MuiButton-containedPrimary {
  min-height: 44px !important;
  color: var(--wmu-white) !important;
  background: var(--wmu-wine) !important;
  border: 1px solid var(--wmu-wine) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

#form-login button[type="submit"]:hover,
#form-login button.MuiButton-contained:hover,
#form-login button.MuiButton-containedPrimary:hover {
  background: var(--wmu-wine-dark) !important;
  border-color: var(--wmu-wine-dark) !important;
  transform: translateY(-1px);
}

#form-login button[type="submit"]:focus-visible,
#form-login button.MuiButton-contained:focus-visible,
#form-login button.MuiButton-containedPrimary:focus-visible {
  outline: 3px solid var(--wmu-gold) !important;
  outline-offset: 3px !important;
}

#first-factor-stage a,
#form-login .MuiLink-root {
  color: var(--wmu-wine) !important;
}

#form-login [role="alert"],
#form-login .MuiAlert-root {
  color: var(--wmu-danger) !important;
  background: #f5dfe1 !important;
  border-left: 3px solid var(--wmu-danger) !important;
  border-radius: 2px !important;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--wmu-gold) !important;
  outline-offset: 3px !important;
}

@media (max-width: 560px) {
  header.MuiAppBar-root .MuiToolbar-root {
    width: calc(100% - 28px) !important;
  }

  header.MuiAppBar-root .MuiToolbar-root::before {
    font-size: 18px;
  }

  #first-factor-stage,
  div.MuiGrid2-root#authenticated-stage {
    padding: 32px 14px 48px !important;
  }

  #form-login {
    padding: 24px 18px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #form-login button[type="submit"],
  #form-login button.MuiButton-contained,
  #form-login button.MuiButton-containedPrimary {
    transition: none !important;
  }

  #form-login button[type="submit"]:hover,
  #form-login button.MuiButton-contained:hover,
  #form-login button.MuiButton-containedPrimary:hover {
    transform: none;
  }
}