.account-security-page {
  min-height: 100vh;
  background: #f4f8ff;
}

.account-security-page__body {
  min-height: 100vh;
  padding: 24rpx 28rpx 56rpx;
  box-sizing: border-box;
}

.account-security-header {
  padding: 28rpx 28rpx 32rpx;
  border-radius: 8rpx;
  background: linear-gradient(135deg, #123e7c 0%, #1d5c9f 72%, #6f997e 100%);
  box-shadow: 0 16rpx 34rpx rgba(18, 62, 124, 0.16);
}

.account-security-header__title {
  display: block;
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 900;
  line-height: 1.25;
}

.account-security-header__desc {
  display: block;
  margin-top: 12rpx;
  color: rgba(255, 255, 255, 0.82);
  font-size: 24rpx;
  line-height: 1.55;
}

.account-security-state {
  display: block;
  margin-top: 22rpx;
  padding: 26rpx;
  border-radius: 8rpx;
  color: #667085;
  background: #ffffff;
  font-size: 26rpx;
  font-weight: 700;
  text-align: center;
}

.account-security-state.error {
  color: #b42318;
  background: #fff1f0;
}

.account-security-metrics {
  margin-top: 22rpx;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14rpx;
}

.account-security-metric {
  min-width: 0;
  min-height: 112rpx;
  padding: 20rpx;
  border: 1rpx solid #d7e2f1;
  border-radius: 8rpx;
  background: #ffffff;
  box-sizing: border-box;
}

.account-security-metric.warning {
  border-color: #f5c451;
  background: #fff9e6;
}

.account-security-metric__label {
  display: block;
  color: #667085;
  font-size: 22rpx;
  font-weight: 800;
  line-height: 1.25;
}

.account-security-metric__value {
  display: block;
  margin-top: 10rpx;
  overflow: hidden;
  color: #111827;
  font-size: 28rpx;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-security-alert {
  margin-top: 18rpx;
  padding: 22rpx 24rpx;
  border-radius: 8rpx;
  color: #123e7c;
  background: #edf5ff;
  font-size: 24rpx;
  font-weight: 800;
  line-height: 1.5;
}

.account-security-alert.error {
  color: #b42318;
  background: #fff1f0;
}

.account-security-panel {
  margin-top: 22rpx;
  padding: 26rpx;
  border: 1rpx solid #d7e2f1;
  border-radius: 8rpx;
  background: #ffffff;
  box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}

.account-security-panel__title {
  display: block;
  color: #111827;
  font-size: 30rpx;
  font-weight: 900;
  line-height: 1.3;
}

.account-security-panel__desc {
  display: block;
  margin-top: 10rpx;
  color: #667085;
  font-size: 24rpx;
  line-height: 1.55;
}

.account-security-form {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.account-security-input {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 26rpx;
  border: 1rpx solid #d7e2f1;
  border-radius: 8rpx;
  background: #f8fbff;
  box-sizing: border-box;
  color: #111827;
  font-size: 28rpx;
}

.account-security-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184rpx;
  gap: 14rpx;
  align-items: center;
}

.account-security-code-btn,
.account-security-submit {
  min-height: 88rpx;
  margin: 0;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-weight: 900;
  line-height: 88rpx;
}

.account-security-code-btn {
  color: #123e7c;
  border: 1rpx solid #b7c9df;
  background: #ffffff;
}

.account-security-submit {
  color: #ffffff;
  background: #123e7c;
}

.account-security-code-btn[disabled],
.account-security-submit[disabled] {
  opacity: 0.58;
}
