/* 登录页：与后台一致的「电影感暗调 + 暖金」高级感 */

/* 登录路由：透出 body 下的背景轮播（压制 app.config 全局实色底） */
html.login-route,
html.login-route body,
html.login-route #app,
html.login-route #app .n-config-provider,
html.login-route .first-loading-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

:root {
  --frank-surface: rgba(16, 24, 40, 0.82);
  --frank-gold-dim: rgba(201, 162, 39, 0.35);
  --frank-navy-mid: #2b4a70;
  --frank-cream: #f5f1e4;
  --frank-text: #e2e8f0;
  --frank-text-soft: rgba(216, 222, 232, 0.68);
  --frank-border: rgba(201, 162, 39, 0.14);
  --frank-border-strong: rgba(201, 162, 39, 0.28);
  --frank-radius: 20px;
  --frank-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.view-account,
.view-account[data-v-7de6931f] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: auto !important;
  background: transparent !important;
}

/* 登录卡片：与列表页 n-card 同质感（覆盖组件内 flex:1 撑满视口） */
.view-account-container,
.view-account-container[data-v-7de6931f] {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
  position: relative !important;
  background: var(--frank-surface) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid var(--frank-border-strong) !important;
  border-radius: var(--frank-radius) !important;
  box-shadow: var(--frank-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  padding: 44px 36px 40px !important;
  max-width: 420px !important;
  animation: loginCardIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.view-account-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 213, 163, 0.55),
    transparent
  );
  pointer-events: none;
}

@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 头像与标题 */
.view-account-top {
  padding: 8px 0 20px !important;
}

.view-account-top img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(232, 213, 163, 0.45) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(201, 162, 39, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
}

.view-account-top img:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(201, 162, 39, 0.15) !important;
}

.view-account-top h3,
.view-account-top .n-h {
  font-family: var(--frank-font-display) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--frank-tracking-title) !important;
  color: var(--frank-cream) !important;
  text-shadow: none !important;
  margin-top: 18px !important;
  line-height: 1.25 !important;
}

.view-account-top-desc {
  color: var(--frank-text-soft) !important;
  font-size: var(--frank-text-base) !important;
  letter-spacing: var(--frank-tracking-wide) !important;
}

.view-account .n-form-item-label,
.view-account .n-form-item-label__text {
  color: var(--frank-text-soft) !important;
  font-size: var(--frank-text-base) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* 输入框 */
.view-account .n-input {
  --n-color: rgba(8, 12, 20, 0.55) !important;
  --n-color-focus: rgba(10, 16, 28, 0.75) !important;
  --n-border: 1px solid var(--frank-border) !important;
  --n-border-hover: 1px solid var(--frank-border-strong) !important;
  --n-border-focus: 1px solid rgba(232, 213, 163, 0.55) !important;
  --n-box-shadow-focus: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
  --n-caret-color: var(--frank-gold-light) !important;
  --n-text-color: var(--frank-text) !important;
  --n-placeholder-color: var(--frank-text-soft) !important;
  background-color: rgba(8, 12, 20, 0.55) !important;
  border-radius: 12px !important;
}

.view-account .n-input .n-input__input-el,
.view-account .n-input .n-input__textarea-el,
.view-account input[type="text"],
.view-account input[type="password"] {
  background-color: transparent !important;
  color: var(--frank-cream) !important;
  -webkit-text-fill-color: var(--frank-cream) !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
  font-size: var(--frank-text-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.view-account .n-input .n-input__input-el:-webkit-autofill,
.view-account .n-input .n-input__input-el:-webkit-autofill:hover,
.view-account .n-input .n-input__input-el:-webkit-autofill:focus,
.view-account .n-input .n-input__input-el:-webkit-autofill:active {
  -webkit-text-fill-color: #f5f1e4 !important;
  caret-color: #f5f1e4 !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 12, 20, 0.55) inset !important;
  box-shadow: 0 0 0 1000px rgba(8, 12, 20, 0.55) inset !important;
  transition: background-color 99999s ease-out 0s;
}

.view-account .n-input .n-input__state-border,
.view-account .n-input .n-input__border {
  border: none !important;
  box-shadow: none !important;
}

.view-account .n-input.n-input--focus {
  background-color: rgba(10, 16, 28, 0.75) !important;
}

.view-account .n-input .n-input__suffix .n-base-icon,
.view-account .n-input .n-input__eye {
  color: var(--frank-text-soft) !important;
}

/* 主按钮：克制深蓝 + 金边（与后台一致） */
.view-account .n-button.n-button--primary-type {
  --n-color: var(--frank-navy-mid) !important;
  --n-color-hover: #3a5f85 !important;
  --n-color-pressed: #1e334f !important;
  --n-color-focus: #3a5f85 !important;
  --n-ripple-color: rgba(201, 162, 39, 0.35) !important;
  --n-border: 1px solid var(--frank-gold-dim) !important;
  --n-border-hover: 1px solid rgba(232, 213, 163, 0.55) !important;
  --n-text-color: var(--frank-cream) !important;
  height: 52px !important;
  font-size: var(--frank-text-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #355a82 0%, #243d5c 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.view-account .n-button.n-button--primary-type:not(.n-button--disabled):hover,
.view-account .n-button.n-button--primary-type:not(.n-button--disabled):focus {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #3f6a94 0%, #2b4a70 100%) !important;
  box-shadow: 0 8px 28px rgba(201, 162, 39, 0.2) !important;
}

.view-account .n-button.n-button--primary-type:not(.n-button--disabled):active {
  transform: translateY(0) !important;
  background: linear-gradient(180deg, #243d5c 0%, #1a2b44 100%) !important;
}

.view-account .n-button.n-button--primary-type .n-base-wave {
  --n-ripple-color: rgba(201, 162, 39, 0.4) !important;
}

/* 自动登录 */
.view-account .n-checkbox {
  --n-color-checked: var(--frank-gold) !important;
  --n-border-checked: #a88520 !important;
  --n-border-focus: 1px solid rgba(201, 162, 39, 0.55) !important;
  --n-box-shadow-focus: 0 0 0 2px rgba(201, 162, 39, 0.15) !important;
}

.view-account .n-checkbox .n-checkbox-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--frank-border) !important;
}

.view-account .n-checkbox .n-checkbox-box--checked {
  background: var(--frank-gold) !important;
  border-color: #a88520 !important;
}

.view-account .n-checkbox .n-checkbox__label,
.view-account .default-color,
.view-account .default-color .ant-checkbox-wrapper {
  color: var(--frank-text-soft) !important;
}

.view-account a {
  color: var(--frank-gold-light) !important;
}

.view-account a:hover {
  color: var(--frank-cream) !important;
}

.view-account .n-form-item-feedback__line,
.view-account .n-form-item-feedback-wrapper {
  color: #e8a87c !important;
}

.view-account .n-divider .n-divider__line {
  background: var(--frank-border) !important;
}

.view-account .n-divider .n-divider__title {
  color: var(--frank-text-soft) !important;
}

/* 背景遮罩：与后台环境光一致 */
.login-bg-slideshow__veil {
  background:
    radial-gradient(ellipse 70% 55% at 8% 12%, rgba(43, 74, 112, 0.38), transparent 58%),
    radial-gradient(ellipse 55% 45% at 92% 88%, rgba(201, 162, 39, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(7, 11, 18, 0.82) 0%, rgba(14, 21, 34, 0.78) 50%, rgba(10, 14, 22, 0.85) 100%) !important;
}

.login-bg-slideshow__slide {
  background-position: center 28% !important;
  transform: scale(1.01);
  filter: saturate(1.05) contrast(1.02);
}

@media (max-width: 480px) {
  .view-account-container {
    margin: 0 12px !important;
    padding: 36px 24px 32px !important;
    border-radius: 18px !important;
  }

  .view-account-top img {
    width: 72px !important;
    height: 72px !important;
  }

  .view-account-top h3,
  .view-account-top .n-h {
    font-size: 1.875rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-account-container {
    animation: none !important;
  }

  .view-account-top img:hover {
    transform: none !important;
  }
}