@charset "UTF-8";
:root {
  /* 基础变量引入 */
  --body-bgc: var(--md-sys-color-background); /* body背景色 */
  --main-color: var(--md-sys-color-primary); /* 主题色 */
  --main-color-secondary: var(--md-sys-color-secondary); /* 次要主题色 */
  --icon-color: var(--md-sys-color-secondary); /* 图标颜色 */
  --font-color-main: var(--md-sys-color-on-background); /* 主要字体颜色 */
  --font-color-secondary: var(--md-sys-color-on-surface-variant); /* 次要字体颜色 */
  --font-color-inverse: var(--md-sys-color-inverse-on-surface); /* 字体颜色反色 */
  --select-bgc: var(--md-sys-color-primary-container); /* 选中的tab背景色 */
  --border-color: var(--md-sys-color-outline); /* 边框颜色 */
  --snackbar-bgc: var(--md-sys-color-inverse-surface); /* 提示通知的背景色 */
  --snackbar-button-color: var(--md-sys-color-primary-container); /* 提示通知的按钮颜色 */
  --card-bgc: var(--md-sys-color-surface-container); /* 卡片颜色 */
  --text-area-bgc: var(--md-sys-color-surface-container);
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
}

[data-theme=dark] {
  --box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

:root {
  --sidebar-width: 300px;
  --border-radius-small: 4px;
  --border-radius-medium: 12px;
  --border-radius-large: 16px;
  --border-radius-Exlarge: 28px;
}

body {
  background-color: var(--body-bgc);
}

a {
  color: var(--md-sys-color-primary);
}

main {
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  user-select: none;
}

.main-container {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 0 auto;
  background-color: var(--card-bgc);
  padding: 50px;
  border-radius: var(--border-radius-Exlarge);
}

.footer-copyright {
  color: var(--font-color-main);
  position: absolute;
  right: 10px;
  bottom: -30px;
}

.header img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.formbox {
  display: flex;
}

.info {
  width: 100%;
}

.info .login-title {
  font-size: 40px;
  line-height: 40px;
  color: var(--font-color-main);
}

.info p {
  font-size: 15px;
  color: var(--font-color-secondary);
}

.form-container {
  width: 100%;
}

md-outlined-text-field {
  width: 100%;
  margin-bottom: 10px;
}

.hint {
  margin-bottom: 95px;
  color: var(--font-color-secondary);
}

.message {
  margin-bottom: 30px;
  color: var(--font-color-secondary);
}

.button-box {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: end;
}