:root { color: #1f2937; background: #f7f8fb; font-family: Inter, "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
/* 登录页：参考黑洞液态玻璃设计，但所有规则以 login- 前缀隔离，避免影响后台中的 Element Plus 表单。 */
.login-page { --login-glass-border: rgba(255, 255, 255, .038); --login-glass-bg-top: rgba(255, 255, 255, .012); --login-glass-bg-bottom: rgba(255, 255, 255, .0015); --login-text-primary: rgba(255, 255, 255, .96); --login-text-secondary: rgba(222, 230, 255, .74); --login-field-border: rgba(211, 225, 255, .055); --login-field-focus: rgba(176, 206, 255, .42); position: relative; display: flex; align-items: center; min-height: 100dvh; overflow: hidden; padding: clamp(24px, 6vw, 88px); color: var(--login-text-primary); background: linear-gradient(90deg, rgba(3, 6, 15, .84) 0%, rgba(3, 7, 18, .64) 38%, rgba(5, 8, 20, .20) 65%, rgba(4, 6, 16, .06) 100%), var(--login-background-image) 68% center / cover no-repeat, #04070e; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; isolation: isolate; }
.login-page::before { position: absolute; inset: 0; z-index: -1; content: ""; pointer-events: none; background: radial-gradient(circle at 24% 18%, rgba(84, 120, 255, .13), transparent 26%), radial-gradient(circle at 30% 76%, rgba(137, 178, 255, .07), transparent 26%), radial-gradient(circle at 78% 24%, rgba(255, 195, 138, .08), transparent 22%); mix-blend-mode: screen; }
.login-page__atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(112deg, rgba(5, 9, 23, .22), transparent 42%); }
.login-panel { position: relative; width: min(100%, 560px); padding: 34px 34px 32px; overflow: hidden; border: 1px solid var(--login-glass-border); border-radius: 32px; background: linear-gradient(145deg, var(--login-glass-bg-top), var(--login-glass-bg-bottom)); box-shadow: 0 20px 54px rgba(5, 9, 23, .09), inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(255, 255, 255, .008); backdrop-filter: blur(10px) saturate(112%); -webkit-backdrop-filter: blur(10px) saturate(112%); }
.login-panel::before { position: absolute; inset: -1px; content: ""; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .038), transparent 28%), radial-gradient(circle at 100% 100%, rgba(113, 164, 255, .022), transparent 22%), linear-gradient(135deg, rgba(255, 255, 255, .014), transparent); opacity: .48; }
.login-panel::after { position: absolute; top: 12px; right: 14px; left: 14px; height: 92px; content: ""; pointer-events: none; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent); opacity: .36; }
.login-brand, .login-panel__intro, .login-form { position: relative; z-index: 1; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 14px; }
.login-brand__mark { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; align-content: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: linear-gradient(145deg, rgba(170, 208, 255, .22), rgba(109, 146, 255, .10)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 12px 30px rgba(68, 121, 255, .18); }
.login-brand__mark span { width: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 8px rgba(187, 218, 255, .72); }.login-brand__mark span:nth-child(1) { height: 15px; }.login-brand__mark span:nth-child(2) { height: 25px; }.login-brand__mark span:nth-child(3) { height: 19px; }
.login-brand__eyebrow { margin: 0 0 5px; color: rgba(211, 226, 255, .66); font-size: 10px; font-weight: 600; letter-spacing: .16em; }.login-brand h1 { margin: 0; color: var(--login-text-primary); font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-shadow: 0 4px 18px rgba(5, 12, 28, .25); white-space: nowrap; }
.login-panel__intro { margin: 0 0 26px; color: var(--login-text-secondary); font-size: 14px; text-align: center; }
.login-form__item.el-form-item { margin-bottom: 16px; }.login-form__input .el-input__wrapper { min-height: 60px; padding: 0 18px; border: 1px solid var(--login-field-border); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .012), rgba(255, 255, 255, .003)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), inset 0 -1px 0 rgba(255, 255, 255, .008), 0 6px 18px rgba(5, 10, 22, .025); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }.login-form__input .el-input__wrapper:hover { border-color: rgba(211, 225, 255, .13); }.login-form__input .el-input__wrapper.is-focus { border-color: var(--login-field-focus); background: linear-gradient(160deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .007)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 0 0 4px rgba(136, 182, 255, .055), 0 10px 24px rgba(4, 11, 24, .055); }.login-form__input .el-input__inner { color: var(--login-text-primary); }.login-form__input .el-input__inner::placeholder { color: rgba(224, 231, 255, .58); }.login-form__input .el-input__password { color: rgba(229, 236, 255, .74); }.login-form__input .el-input__password:hover { color: rgba(255, 255, 255, .96); }
.login-submit.el-button { width: 100%; height: 60px; margin-top: 8px; border: 1px solid rgba(205, 224, 255, .18); border-radius: 18px; background: linear-gradient(135deg, rgba(194, 223, 255, .46) 0%, rgba(120, 168, 255, .46) 40%, rgba(84, 127, 255, .50) 100%); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .08em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 30px rgba(60, 103, 207, .18), 0 4px 10px rgba(4, 9, 18, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease; }.login-submit.el-button:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(194, 223, 255, .56), rgba(120, 168, 255, .56) 40%, rgba(84, 127, 255, .60)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 22px 36px rgba(60, 103, 207, .22), 0 6px 14px rgba(4, 9, 18, .22); }.login-submit.el-button:active { transform: translateY(1px) scale(.99); }.login-submit.el-button.is-loading, .login-submit.el-button.is-disabled { opacity: .76; transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .login-panel { background: linear-gradient(145deg, rgba(10, 18, 37, .72), rgba(4, 8, 19, .62)); }.login-form__input .el-input__wrapper { background: rgba(7, 15, 32, .72); } }
@media (max-width: 980px) { .login-page { justify-content: center; padding-right: 24px; padding-left: 24px; background-position: 64% center; }.login-panel { margin: 0 auto; } }
@media (max-width: 640px) { .login-page { align-items: center; min-height: 100dvh; padding: 18px; background-position: 63% center; }.login-panel { padding: 26px 22px 24px; border-radius: 26px; }.login-brand { gap: 12px; justify-content: flex-start; }.login-brand__mark { width: 48px; height: 48px; border-radius: 16px; }.login-brand h1 { font-size: clamp(19px, 5.6vw, 22px); letter-spacing: .02em; }.login-brand__eyebrow { font-size: 9px; }.login-panel__intro { margin-bottom: 22px; text-align: left; }.login-form__input .el-input__wrapper, .login-submit.el-button { min-height: 56px; height: 56px; font-size: 16px; }.login-form__input .el-input__inner { font-size: 16px; } }
.logout-button { width: 100%; margin-top: 24px; padding: 10px 12px; border: 1px solid #496b8c; border-radius: 8px; color: #cbd5e1; background: transparent; cursor: pointer; }.logout-button:hover { color:#fff; background:#1f3b59; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { padding: 28px 20px; background: #132338; color: #f8fafc; }
.sidebar h1 { margin: 0 0 32px; font-size: 20px; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar a { border-radius: 8px; color: #cbd5e1; padding: 10px 12px; text-decoration: none; }
.sidebar a.router-link-active, .sidebar a:hover { background: #1f3b59; color: white; }
.sidebar .settings-link { margin-top: 16px; border-top: 1px solid #385673; border-radius: 0; padding-top: 18px; }
.content { min-width: 0; padding: 40px; }
.user-permission-page { max-width: 1180px; margin: 0 auto; }.user-permission-page small { display:block; margin-top:6px; color:#64748b; }.permission-hint { margin:-4px 0 16px; color:#64748b; font-size:13px; }
.eyebrow { margin: 0 0 8px; color: #5f8fcb; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.reference-page, .placeholder { max-width: 1180px; margin: 0 auto; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-header h2, .placeholder h2 { margin: 0 0 8px; font-size: 28px; }
.page-header p, .placeholder p { margin: 0; color: #64748b; }
.reference-badge { padding: 8px 12px; border-radius: 999px; color: #8a5a00; background: #fff3d6; white-space: nowrap; }
.reference-card { padding: 24px; border: 1px solid #e2e8f0; border-radius: 14px; background: white; box-shadow: 0 8px 28px rgba(15, 23, 42, .05); }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
@media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; } .sidebar nav { grid-template-columns: repeat(2, 1fr); } .page-header { display: grid; } .content { padding: 24px; } }
/* 手机号资产弹窗：所有规则均以该弹窗类名开头，避免影响项目中的其他 Element Plus 弹窗。 */
.phone-asset-modal-mask {
  background: rgba(15, 23, 42, 0.34);
}
.phone-asset-modal-mask .el-overlay-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
}
.phone-asset-modal {
  width: min(560px, 100%) !important;
  max-height: calc(100vh - 48px);
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(228, 228, 231, 0.9);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
}
.phone-asset-modal .el-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 22px 24px 15px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}
.phone-asset-modal .el-dialog__title {
  color: #18181b;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.phone-asset-modal .el-dialog__headerbtn {
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #71717a;
  transition: background 0.16s ease, color 0.16s ease;
}
.phone-asset-modal .el-dialog__headerbtn:hover {
  color: #18181b;
  background: #f4f4f5;
}
.phone-asset-modal .el-dialog__close {
  width: 15px;
  height: 15px;
}
.phone-asset-modal .el-dialog__body {
  max-height: calc(100vh - 206px);
  min-height: 0;
  padding: 4px 24px 8px;
  overflow-y: auto;
}
.phone-asset-modal__form {
  display: grid;
  gap: 14px;
}
.phone-asset-modal__form-row.el-form-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
}
.phone-asset-modal__form-row .el-form-item__label-wrap {
  float: none;
  min-width: 0;
}
.phone-asset-modal__form-row .el-form-item__label {
  display: block;
  width: 96px !important;
  height: 36px;
  padding: 0;
  color: #52525b;
  font-size: 14px;
  line-height: 36px;
  text-align: right;
  white-space: nowrap;
}
.phone-asset-modal__form-row .el-form-item__content {
  min-width: 0;
  min-height: 36px;
  margin-left: 0 !important;
  line-height: 36px;
}
.phone-asset-modal__form-row .el-input,
.phone-asset-modal__form-row .el-select {
  width: 100%;
}
.phone-asset-modal__form-row .el-input__wrapper,
.phone-asset-modal__form-row .el-select__wrapper {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 0 0 1px #e4e4e7 inset;
  transition: box-shadow 0.16s ease, background 0.16s ease;
}
.phone-asset-modal__form-row .el-input__wrapper:hover,
.phone-asset-modal__form-row .el-select__wrapper:hover {
  box-shadow: 0 0 0 1px #c4c4cc inset;
}
.phone-asset-modal__form-row .el-input.is-focus .el-input__wrapper,
.phone-asset-modal__form-row .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #18181b inset, 0 0 0 2px rgba(24, 24, 27, 0.09);
}
.phone-asset-modal__form-row .el-input__inner,
.phone-asset-modal__form-row .el-select__selected-item,
.phone-asset-modal__form-row .el-select__placeholder {
  color: #27272a;
  font-size: 14px;
}
.phone-asset-modal__form-row .el-input__inner::placeholder,
.phone-asset-modal__form-row .el-select__placeholder {
  color: #a1a1aa;
}
.phone-asset-modal__count-input .el-input__inner {
  padding-right: 50px;
}
.phone-asset-modal__character-count {
  color: #a1a1aa;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.phone-asset-modal .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
  margin-top: 22px;
  padding: 16px 24px 20px;
  border-top: 1px solid #eeeeef;
}
.phone-asset-modal .el-dialog__footer .el-button {
  min-width: 74px;
  height: 36px;
  margin: 0;
  padding: 0 17px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 550;
}
.phone-asset-modal .el-dialog__footer .el-button--default {
  border-color: #e4e4e7;
  color: #52525b;
  background: #ffffff;
}
.phone-asset-modal .el-dialog__footer .el-button--default:hover {
  border-color: #d4d4d8;
  background: #fafafa;
}
.phone-asset-modal .el-dialog__footer .el-button--primary {
  border-color: #18181b;
  background: #18181b;
}
.phone-asset-modal .el-dialog__footer .el-button--primary:hover {
  border-color: #27272a;
  background: #27272a;
}
.phone-asset-modal .el-dialog__footer .el-button:active {
  transform: translateY(1px);
}
.phone-asset-modal .el-dialog__footer .el-button.is-disabled,
.phone-asset-modal .el-dialog__footer .el-button.is-disabled:hover {
  border-color: #f4f4f5;
  color: #a1a1aa;
  background: #f4f4f5;
}
@media (max-width: 600px) {
  .phone-asset-modal-mask .el-overlay-dialog {
    align-items: flex-start;
    padding: 14px;
  }
  .phone-asset-modal {
    width: 100% !important;
    max-height: calc(100vh - 52px);
    margin-top: 12px !important;
  }
  .phone-asset-modal .el-dialog__header,
  .phone-asset-modal .el-dialog__body,
  .phone-asset-modal .el-dialog__footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .phone-asset-modal .el-dialog__body {
    max-height: calc(100vh - 210px);
  }
  .phone-asset-modal__form-row.el-form-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .phone-asset-modal__form-row .el-form-item__label {
    width: auto !important;
    text-align: left;
  }
}
/* 窄窗口中的资产表格在卡片内部处理宽度，避免宽列把整个页面撑出屏幕。 */
@media (max-width: 760px) {
  .content {
    min-width: 0;
  }
  .phone-asset-page .reference-card {
    min-width: 0;
    overflow-x: auto;
  }
}
/* 手机号弹窗下拉菜单：由 popper-class 限定，不影响其他页面的下拉选项。 */
.phone-asset-modal__select-popper.el-popper {
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}
.phone-asset-modal__select-popper .el-select-dropdown__item {
  height: 36px;
  padding: 0 11px;
  color: #27272a;
  font-size: 14px;
  line-height: 36px;
}
.phone-asset-modal__select-popper .el-select-dropdown__item.is-hovering,
.phone-asset-modal__select-popper .el-select-dropdown__item:hover {
  background: #fafafa;
}
.phone-asset-modal__select-popper .el-select-dropdown__item.is-selected {
  color: #18181b;
  font-weight: 550;
  background: #f4f4f5;
}
/* 手机号资产列表：参考 mobile-number-asset-management-v4.html，仅作用于当前列表页。 */
.phone-asset-list-page { width:100%; max-width:1680px; margin:0 auto; padding:34px 4px 56px; }
.phone-asset-list-page__header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.phone-asset-list-page__header h2 { margin:0; color:#111113; font-size:29px; font-weight:700; line-height:1.25; letter-spacing:-.035em; }
.phone-asset-list-page__add.el-button { height:38px; padding:0 16px; border-color:#18181b; border-radius:6px; background:#18181b; font-size:14px; font-weight:600; }
.phone-asset-list-page__panel { border:1px solid #e5e5e8; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.05); }
.phone-asset-list-page__search { margin-bottom:16px; padding:20px 22px; }
.phone-asset-list-page__filters { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.phone-asset-list-page__filters .el-input { width:210px; }.phone-asset-list-page__filters .el-input:nth-child(2){width:240px}.phone-asset-list-page__filters .el-input:nth-child(3){width:190px}.phone-asset-list-page__filters .el-select{width:160px}
.phone-asset-list-page__filters .el-input__wrapper,.phone-asset-list-page__filters .el-select__wrapper { min-height:38px; border-radius:6px; box-shadow:0 0 0 1px #e5e5e8 inset; }.phone-asset-list-page__filters .el-button{height:38px;border-radius:6px;color:#52525b;border-color:#e5e5e8}.phone-asset-list-page__filters .el-input__wrapper:hover,.phone-asset-list-page__filters .el-select__wrapper:hover{box-shadow:0 0 0 1px #d4d4d8 inset}
.phone-asset-list-page__table { overflow:hidden; }.phone-asset-list-page__table-header{display:flex;align-items:center;gap:9px;min-height:62px;padding:0 22px;border-bottom:1px solid #e5e5e8}.phone-asset-list-page__table-header h3{margin:0;color:#18181b;font-size:15px;font-weight:650}.phone-asset-list-page__table-header span{color:#8b8b93;font-size:13px}
.phone-asset-list-page__grid .el-table__header th.el-table__cell{height:46px;background:#fafafa;color:#71717a;font-size:13px;font-weight:600}.phone-asset-list-page__grid .el-table__cell{height:56px;color:#3f3f46;font-size:14px}.phone-asset-list-page__grid .el-table__row:hover>td.el-table__cell{background:#fafafa}.phone-asset-list-page__status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.phone-asset-list-page__status-dot{width:7px;height:7px;border-radius:50%;background:#a1a1aa;box-shadow:0 0 0 3px rgba(161,161,170,.12)}.phone-asset-list-page__status-dot.正常使用{background:#2f9e68;box-shadow:0 0 0 3px rgba(47,158,104,.1)}.phone-asset-list-page__status-dot.闲置,.phone-asset-list-page__status-dot.停机{background:#d28b24;box-shadow:0 0 0 3px rgba(210,139,36,.11)}.phone-asset-list-page__actions{display:inline-flex;gap:14px}.phone-asset-list-page__actions .el-button{padding:0;color:#3f3f46;font-size:13px}.phone-asset-list-page__actions .el-button--danger{color:#e5484d}
.phone-asset-list-page__pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;padding:12px 22px;border-top:1px solid #e5e5e8;color:#71717a;font-size:13px}.phone-asset-list-page__pagination .el-pagination{justify-content:flex-end}.phone-asset-list-page__pagination .el-pager li,.phone-asset-list-page__pagination .btn-prev,.phone-asset-list-page__pagination .btn-next{min-width:34px;height:34px;border:1px solid #e5e5e8;border-radius:6px;background:#fff}.phone-asset-list-page__pagination .el-pager li.is-active{background:#18181b;color:#fff}
@media(max-width:900px){.phone-asset-list-page{padding:26px 0 40px}.phone-asset-list-page__pagination{align-items:flex-start;flex-direction:column}.phone-asset-list-page__pagination .el-pagination{width:100%;justify-content:space-between}}
@media(max-width:640px){.phone-asset-list-page{padding:20px 0 32px}.phone-asset-list-page__header{align-items:stretch;flex-direction:column;margin-bottom:18px}.phone-asset-list-page__add.el-button{width:100%}.phone-asset-list-page__header h2{font-size:25px}.phone-asset-list-page__search{padding:18px}.phone-asset-list-page__filters,.phone-asset-list-page__filters .el-input,.phone-asset-list-page__filters .el-select,.phone-asset-list-page__filters .el-button{width:100%!important}.phone-asset-list-page__table-header,.phone-asset-list-page__pagination{padding-left:18px;padding-right:18px}.phone-asset-list-page__pagination .el-pagination__jump{display:none}}
.wecom-account-page{min-width:0;max-width:100%;overflow-x:hidden}.wecom-account-page__eyebrow{margin:7px 0 0;color:#71717a;font-size:12px;font-weight:700;letter-spacing:.12em}.wecom-account-page .phone-asset-list-page__table,.wecom-account-page__grid{min-width:0;max-width:100%}.wecom-account-page__grid .el-scrollbar__wrap{overflow-x:auto!important}.phone-asset-list-page__external-link{color:#409eff;text-decoration:none}.phone-asset-list-page__external-link:hover{color:#337ecc;text-decoration:none}

/* 登录页视觉微调：输入本体保持透明，玻璃质感由外层承载，避免影响其他业务表单。 */
.login-page {
  --login-panel-offset: calc(clamp(100px, 9vw, 180px) + 20px);
  background-position: 66% center;
}

.login-page::before {
  background: linear-gradient(90deg, rgba(2, 8, 20, .74) 0%, rgba(2, 8, 20, .48) 32%, rgba(2, 8, 20, .16) 57%, rgba(2, 8, 20, .025) 100%);
}

.login-panel {
  margin-left: var(--login-panel-offset);
  padding: clamp(26px, 3vw, 34px);
  background: linear-gradient(145deg, rgba(255, 255, 255, .011), rgba(255, 255, 255, .0012));
  border-color: rgba(255, 255, 255, .042);
  box-shadow: 0 18px 48px rgba(0, 6, 24, .10), inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: blur(11px) saturate(113%);
  -webkit-backdrop-filter: blur(11px) saturate(113%);
}

.login-brand {
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
  text-align: center;
}

.login-brand h1 {
  font-size: clamp(22px, 2vw, 28px);
  white-space: nowrap;
}

.login-form__item.el-form-item {
  margin-bottom: 12px;
}

.login-form__item.el-form-item:last-of-type {
  margin-bottom: 0;
}

.login-form__input .el-input__wrapper,
.login-form__input .el-input__wrapper:hover,
.login-form__input .el-input__wrapper.is-focus {
  color-scheme: dark;
  background: #0a1121 !important;
  background-color: #0a1121 !important;
  background-image: none !important;
  border-color: rgba(205, 222, 255, .12);
}

.login-form__input .el-input__wrapper:hover {
  border-color: rgba(176, 205, 255, .23);
}

.login-form__input .el-input__wrapper.is-focus {
  border-color: var(--login-field-focus);
}

.login-form__input .el-input__inner,
.login-form__input .el-input__inner:focus {
  color: var(--login-text-primary);
  caret-color: var(--login-text-primary);
  background: transparent !important;
  box-shadow: none !important;
}

.login-form__input .el-input__inner::placeholder {
  color: rgba(187, 204, 232, .54);
}

.login-form__input .el-input__suffix-inner {
  display: flex;
  align-items: center;
}

.login-form__input .el-input__password {
  display: grid;
  width: 36px;
  height: 36px;
  margin-right: -10px;
  place-items: center;
  color: rgba(202, 220, 250, .70);
  font-size: 16px;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

.login-form__input .el-input__password svg {
  width: 16px;
  height: 16px;
}

.login-form__input .el-input__password:hover {
  color: #e8f2ff;
  background: rgba(139, 180, 255, .08);
  border-radius: 50%;
}

.login-form__remember.el-checkbox {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-top: 14px;
  color: rgba(205, 220, 246, .76);
}

.login-form__remember .el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-color: rgba(205, 222, 255, .30);
  border-radius: 5px;
  background: rgba(193, 212, 255, .025);
}

.login-form__remember:hover .el-checkbox__inner {
  border-color: rgba(177, 207, 255, .64);
  background: rgba(139, 180, 255, .08);
}

.login-form__remember .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #83b4ff;
  background: linear-gradient(135deg, #a9d4ff, #5d8df2);
}

.login-form__remember .el-checkbox__label {
  padding-left: 8px;
  color: inherit;
  font-size: 13px;
}

.login-submit.el-button {
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(57, 72, 109, .94) 0%, rgba(48, 59, 96, .95) 52%, rgba(65, 59, 112, .94) 100%);
  border-color: rgba(163, 183, 241, .34);
  color: #fff;
  box-shadow: 0 10px 22px rgba(14, 20, 44, .26), inset 0 1px 0 rgba(218, 228, 255, .18);
}

.login-submit.el-button:hover:not(.is-disabled) {
  background: linear-gradient(135deg, rgba(70, 88, 132, .96) 0%, rgba(57, 71, 113, .97) 52%, rgba(77, 69, 132, .96) 100%);
  box-shadow: 0 12px 24px rgba(14, 20, 44, .30), inset 0 1px 0 rgba(218, 228, 255, .24);
}

.login-submit.el-button.is-disabled,
.login-submit.el-button.is-loading {
  box-shadow: none;
}

@media (max-width: 980px) {
  .login-page {
    --login-panel-offset: 0px;
    background-position: 61% center;
  }

  .login-panel {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .login-page {
    background-position: 59% center;
  }

  .login-brand {
    gap: 11px;
    margin-bottom: 24px;
  }

  .login-brand h1 {
    font-size: clamp(19px, 6vw, 23px);
  }

  .login-submit.el-button {
    margin-top: 16px;
  }
}

/* 登录面板使用视口宽度计算位置，避免桌面端贴近左边缘，同时保留小屏安全边距。 */
.login-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.login-panel {
  position: absolute;
  top: 50%;
  left: clamp(280px, 19.2vw, 368px);
  width: min(560px, calc(100vw - 48px));
  margin-left: 0;
  transform: translateY(-50%);
}

/* Chrome/Edge 自动填充时不在原生 input 内容区绘制背景，避免内阴影的矩形边缘形成横线。 */
.login-form__input .el-input__inner:-webkit-autofill,
.login-form__input .el-input__inner:-webkit-autofill:hover,
.login-form__input .el-input__inner:-webkit-autofill:focus,
.login-form__input .el-input__inner:-webkit-autofill:active {
  -webkit-text-fill-color: var(--login-text-primary) !important;
  caret-color: var(--login-text-primary);
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* 代码作用（白话）：让密码框外层占满 Element Plus 表单项的可用宽度，保持它与账号框同宽。关联文件：LoginView.js、login-experience.spec.js。关联逻辑（调用链/数据流）：登录表单渲染 -> 密码外层宽度 -> 原生密码 input 宽度 -> 页面视觉一致。 */
.login-password-field {
  width: 100%;
}

.login-password-field .el-input__inner[type="password"]::placeholder {
  -webkit-text-fill-color: rgba(187, 204, 232, .54) !important;
}

@media (max-width: 1200px) {
  .login-panel {
    left: clamp(48px, 8vw, 96px);
  }
}

@media (max-width: 768px) {
  .login-panel {
    top: 50%;
    left: 50%;
    width: calc(100vw - 32px);
    margin: 0;
    transform: translate(-50%, -50%);
  }
}
