.login-input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: var(--gray-12);
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid var(--gray-8);
  outline: none;
  background: transparent;
  transition: .5s;
  caret-color: var(--accent-9);
}

/* 输入框的标签动画 */
.input-box {
  position: relative;
}

.input-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: var(--gray-11);
  pointer-events: none;
  transition: .5s;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: var(--accent-9);
  font-size: 12px;
}

/* 输入框底部边框动画 */
.input-box input:focus,
.input-box input:valid {
  border-bottom: 2px solid var(--accent-9);
}

/* 暗色模式适配 */
:root[class~="dark"] .login-input {
  color: var(--gray-11);
  border-bottom-color: var(--gray-7);
  caret-color: var(--accent-8);
}

:root[class~="dark"] .input-box label {
  color: var(--gray-8);
}

:root[class~="dark"] .input-box input:focus ~ label,
:root[class~="dark"] .input-box input:valid ~ label {
  color: var(--accent-9);
}

.login-button {
  background-color: var(--accent-9);
  color: white;
  transition: background-color 0.2s ease;
}

.login-button:hover {
  background-color: var(--accent-10);
}

.login-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}