/* =====================================================================
 * 云信短信分发平台 · 用户端（客户 / 代理自助前台）
 * 设计语言参考 Art Design Pro（MIT）：主色 #5D87FF / 页面底 #FAFBFC
 * ===================================================================== */
:root {
  --art-primary:      #5D87FF;
  --art-primary-dark: #4A6CD4;
  --art-primary-bg:   #ECF2FF;
  --art-secondary:    #49BEFF;
  --art-success:      #13DEB9;
  --art-warning:      #FFAE1F;
  --art-danger:       #FF4D4F;
  --art-info:         #6B7D9B;

  --art-text-900: #071437;
  --art-text-800: #252F4A;
  --art-text-700: #4B5675;
  --art-text-600: #78829D;
  --art-text-500: #99A1B7;
  --art-text-400: #C4CADA;

  --art-border:   #EAEBF1;
  --art-border-2: #DBDFE9;
  --art-bg-page:  #FAFBFC;
  --art-bg-hover: #F6F9FC;
  --art-card-shadow: 0 0 4px 0 rgba(0, 0, 0, .04);
  --art-pop-shadow: 0 12px 32px rgba(7, 20, 55, .12);

  --brand: #5D87FF;
  --bg: #FAFBFC;

  --el-color-primary: #5D87FF;
  --el-color-primary-light-3: #8AAEFF;
  --el-color-primary-light-5: #AEC6FF;
  --el-color-primary-light-7: #D2DEFF;
  --el-color-primary-light-8: #E4EBFF;
  --el-color-primary-light-9: #ECF2FF;
  --el-color-primary-dark-2: #4A6CD4;
  --el-color-success: #13DEB9;
  --el-color-success-light-9: #E9FCF9;
  --el-color-success-dark-2: #0FB79A;
  --el-color-warning: #FFAE1F;
  --el-color-warning-light-9: #FFF7E9;
  --el-color-danger: #FF4D4F;
  --el-color-danger-light-9: #FFEDED;
  --el-color-error: #FF4D4F;
  --el-color-info: #6B7D9B;
  --el-color-info-light-9: #F0F2F7;
  --el-text-color-primary: #252F4A;
  --el-text-color-regular: #4B5675;
  --el-text-color-secondary: #78829D;
  --el-text-color-placeholder: #C4CADA;
  --el-border-color: #DBDFE9;
  --el-border-color-light: #EAEBF1;
  --el-border-color-lighter: #EAEBF1;
  --el-fill-color-light: #F6F9FC;
  --el-fill-color-lighter: #FAFBFC;
  --el-bg-color-page: #FAFBFC;
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { font-family: var(--el-font-family); background: var(--art-bg-page); color: var(--art-text-800); font-size: 14px; -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #DCE1EA; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #C4CADA; }
::-webkit-scrollbar-track { background: transparent; }



/* ===================== 登录 / 注册（尺寸逐项对齐参考站实测值） ===================== */
.au-page {
  display: flex; height: 100vh; background: #FAFBFC;
  overflow-x: hidden; overflow-y: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.5715; color: #565960;
}

/* ---- 左：LOGO / 表单卡 / 版权 ---- */
.au-left { position: relative; display: flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; padding-bottom: 40px; background: #fff; }

.au-brand { position: absolute; top: 17.5px; left: 35px; z-index: 1; display: inline-flex; align-items: center; }
.au-logo { display: block; height: 38px; }
.au-mark { width: 38px; height: 38px; border-radius: 8px; background: #165DFF; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.au-name { margin-left: 10px; font-size: 16px; font-weight: 700; color: #1D2129; }

.au-card { display: flex; padding: 40px; overflow: hidden; background: #fff; border: 1px solid #DEE0E3; border-radius: 12px;
  box-shadow: 0 4px 8px rgba(31, 35, 41, .03), 0 3px 6px -6px rgba(31, 35, 41, .05), 0 6px 18px 6px rgba(31, 35, 41, .03); }
.au-card-body { width: 320px; }

.au-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.au-title { color: #1F2329; font-weight: 700; font-size: 22px; line-height: 30px; }
.au-tag { flex: none; height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 2px; background: #F2F3F5; color: #1D2129; font-size: 12px; font-weight: 500; line-height: 22px; }

/* 选项卡：整行 40px，底部 1px 线 + 选中 2px 蓝线（线在行内，不额外占高） */
.au-tabs { position: relative; display: flex; align-items: stretch; height: 40px; gap: 24px; margin-top: 26px; }
.au-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #E5E6EB; }
.au-tabs a { position: relative; display: flex; align-items: center; font-size: 14px; line-height: 22px; color: #4E5969; cursor: pointer; transition: color .15s ease; }
.au-tabs a.on { color: #165DFF; font-weight: 500; }
.au-tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #165DFF; }
.au-tabs a:not(.on):hover { color: #165DFF; }

/* 表单：36 高浅灰输入框 + 32 高主色按钮 */
.au-body { padding-top: 18px; }
.au-body .el-form-item { margin-bottom: 20px; }
.au-body .el-input__wrapper { height: 36px; padding: 0 12px; background: #F2F3F5; border-radius: 2px; box-shadow: none; }
.au-body .el-input__wrapper:hover { background: #E5E6EB; }
.au-body .el-input__wrapper.is-focus { background: #fff; box-shadow: 0 0 0 1px #165DFF inset; }
.au-body .el-input__inner { height: 34px; font-size: 14px; color: #1D2129; }
.au-body .el-input__prefix { color: #4E5969; }
.au-body .au-code { font-size: 14px; color: #165DFF; cursor: pointer; user-select: none; }
.au-body .au-code.off { color: #4E5969; cursor: default; }
.au-body .au-code:hover { color: #4080FF; }
.au-body .au-code.off:hover { color: #4E5969; }
.au-body .agree-row { display: flex; align-items: center; gap: 4px; margin: 0 0 16px; }
.au-body .agree-row .el-checkbox { height: auto; margin-right: 0; }
.au-body .agree-row .el-checkbox__label { display: none; }
.au-body .agree-text { font-size: 13px; line-height: 22px; color: #565960; }
.au-body .login-link { color: #165DFF; cursor: pointer; }
.au-body .login-link:hover { text-decoration: underline; }
.au-body .au-go { margin-left: 10px; font-size: 13px; color: #165DFF; cursor: pointer; }
.au-body .au-go:hover { text-decoration: underline; }
.au-page.reg .au-body .el-form-item { margin-bottom: 16px; }
.au-page .au-submit { width: 100%; height: 32px; margin: 0; padding: 0 15px; border-radius: 2px; font-size: 14px; font-weight: 400; letter-spacing: 0; box-shadow: none; background: #165DFF; border-color: #165DFF; }
.au-page .au-submit:hover, .au-page .au-submit:focus { background: #4080FF; border-color: #4080FF; }
.au-page .au-submit:active { background: #0E42D2; border-color: #0E42D2; }

.au-links { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 32px; margin-top: 20px; }
.au-links .au-kf { flex: none; margin-right: auto; width: 26px; height: 26px; line-height: 0; }
.au-links a { padding: 0 8px; font-size: 12px; line-height: 24px; color: #165DFF; cursor: pointer; }
.au-links a:hover { text-decoration: underline; }
.au-copy { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 0 40px; flex-wrap: wrap; padding: 0 16px; color: #4E5969; font-size: 14px; text-align: center; }
.au-copy .au-icp { color: inherit; text-decoration: none; }
.au-copy .au-icp:hover { text-decoration: underline; }

.af-note { font-size: 13px; line-height: 1.9; color: #86909C; }
.af-note a { color: #165DFF; font-weight: 600; cursor: pointer; }

/* ---- 右：550px 品牌面板（背景图右对齐 280 高 + 轮播） ---- */
.au-right { position: relative; flex: none; width: 550px; display: flex; align-items: center; justify-content: center;
  background: #235BDA url("/user/assets/img/au-banner-bg.jpg") 100% 0% / auto 280px no-repeat; }

.au-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.au-slide-title { color: #F7F8FA; font-weight: 700; font-size: 24px; line-height: 30px; }
.au-slide-sub { margin-top: 12px; color: #F2F3F5; font-size: 15px; line-height: 22px; }
.au-slide-img { width: 320px; margin-top: 30px; }

.au-nav { position: absolute; top: 50%; margin-top: -12px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); color: #fff; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.au-nav:hover { background: rgba(255, 255, 255, .5); }
.au-nav.prev { left: 12px; }
.au-nav.next { right: 12px; }
.au-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.au-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: background .15s ease; }
.au-dots span.on { background: #fff; }

@media (max-width: 1200px) {
  .au-right { width: 420px; background-size: auto 240px; }
  .au-slide-title { font-size: 21px; }
  .au-slide-img { width: 260px; }
}

/* 手机端：与参考站一致——蓝板不显示，白卡整宽居中，表单仍为 320 宽，其余尺寸不变 */
@media (max-width: 900px) {
  .au-page { display: block; height: auto; min-height: 100vh; overflow-y: visible; }
  .au-right { display: none; }
  /* 手机端不要卡片外框：整页纯白，表单直接铺在页面上（参考站手机端就是这样） */
  .au-page { background: #fff; }
  .au-left { display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 0 0 40px; background: #fff; }
  .au-brand { top: 17.5px; left: 35px; transform: none; }
  .au-card { width: 100%; padding: 40px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .au-card-body { width: 320px; margin: 0 auto; }
  .au-copy { height: auto; min-height: 40px; padding-bottom: 10px; }
  html.dark .au-page .au-card { background: transparent; border: 0; box-shadow: none; }
}
@media (max-width: 360px) {
  .au-card-body { width: 100%; padding: 0 16px; box-sizing: border-box; }
}

/* ---------- 暗色（参考站没有暗色，这里额外适配） ---------- */
html.dark .au-page, html.dark .au-left { background: #0F1524; }
html.dark .au-card { background: #161E30; border-color: #232C42; box-shadow: none; }
html.dark .au-title { color: #F2F3F5; }
html.dark .au-name { color: #F2F3F5; }
html.dark .au-tag { background: #1E2637; color: #C3CCDF; }
html.dark .au-tabs::after { background: #232C42; }
html.dark .au-tabs a { color: #86909C; }
html.dark .au-body .el-input__wrapper { background: #1A2237; }
html.dark .au-body .el-input__wrapper:hover { background: #1E2637; }
html.dark .au-body .el-input__wrapper.is-focus { background: #1E2637; box-shadow: 0 0 0 1px #165DFF inset; }
html.dark .au-body .el-input__inner { color: #F2F3F5; }
html.dark .au-body .agree-text { color: #A8B0C2; }
html.dark .au-copy { color: #86909C; }
html.dark .au-right { background-image: none; background-color: #17305F; }

/* 兼容旧类名 */
.login-page { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #EAF1FF 0%, #F3F8FF 45%, #E6F0FF 100%); }
.login-card { width: 400px; background: #fff; border-radius: 14px; padding: 34px 32px 26px; box-shadow: var(--art-pop-shadow); border: 1px solid var(--art-border); }
.login-card.wide { width: 440px; max-height: 92vh; overflow: auto; }
.login-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 6px; color: var(--art-text-900); }
.login-sub { text-align: center; color: var(--art-text-500); font-size: 13px; margin-bottom: 24px; }
.login-tip { margin-top: 14px; color: var(--art-text-500); font-size: 12px; text-align: center; line-height: 1.9; }
.code-row { display: flex; gap: 10px; width: 100%; }
.code-row .el-input { flex: 1; }
.agree-row { display: flex; align-items: flex-start; gap: 2px; margin: 2px 0 16px; }
.agree-row .el-checkbox { height: auto; margin-right: 0; }
.agree-row .el-checkbox__label { display: none; }
.agree-text { font-size: 13px; color: var(--art-text-600); line-height: 22px; }
.agree-box { font-size: 13px; line-height: 2; color: var(--art-text-700); white-space: pre-wrap; word-break: break-word; max-height: 54vh; overflow-y: auto; padding-right: 4px; }

/* ---------- 登录页：找回账号 / 重置密码 ---------- */
.lr-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 13px; }
.lr-sep { color: var(--art-text-400); }
.find-tip { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--art-text-600); }
.find-switch { margin-top: 10px; text-align: right; }
.find-switch a { font-size: 13px; color: #165DFF; cursor: pointer; }
.find-switch a:hover { text-decoration: underline; }
.find-tip b { color: var(--art-text-900); }
.find-ok { padding: 14px 16px; border: 1px solid var(--art-border); border-radius: 10px; background: #F6F9FC; }
.find-ok .k { font-size: 12px; color: var(--art-text-500); }
.find-ok .v { margin: 4px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: .5px; color: var(--art-primary); word-break: break-all; }
.find-ok .muted { font-size: 12px; color: var(--art-text-500); }
.find-divider { margin: 16px 0 10px; font-size: 12px; line-height: 1.7; color: var(--art-text-500); }
/* ===================== 主框架：左侧菜单 + 顶栏（对齐 Art Design Pro） ===================== */
.uc-shell { display: flex; height: 100%; background: var(--art-bg-page); }

.uc-side { flex: 0 0 220px; width: 220px; background: #fff; border-right: 1px solid var(--art-border); display: flex; flex-direction: column; transition: flex-basis .2s ease, width .2s ease; }
.uc-side.is-collapsed { flex: 0 0 64px; width: 64px; }
.uc-brand { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--art-border); overflow: hidden; flex: none; }
.uc-side.is-collapsed .uc-brand { padding: 0; justify-content: center; }
.uc-brand .logo-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--art-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; box-shadow: 0 6px 14px rgba(93, 135, 255, .28); }
.uc-brand-name { font-size: 15px; font-weight: 700; color: var(--art-text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
.uc-menu { border-right: none !important; background: transparent; }
.uc-menu:not(.el-menu--collapse) { width: 100%; }
.uc-menu .el-menu-item { height: 42px; line-height: 42px; margin: 2px 10px; padding-left: 12px !important; border-radius: 8px; color: var(--art-text-700); font-size: 14px; font-weight: 500; }
.uc-menu .el-menu-item .el-icon { font-size: 17px; width: 20px; margin-right: 10px; }
.uc-menu .el-menu-item:hover { background: var(--art-bg-hover); color: var(--art-text-900); }
.uc-menu .el-menu-item.is-active { background: var(--art-primary-bg); color: var(--art-primary); font-weight: 600; }
.uc-menu.el-menu--collapse .el-menu-item { margin: 2px 6px; padding: 0 !important; text-align: center; }
.uc-menu.el-menu--collapse .el-menu-item .el-icon { margin: 0; }

.uc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uc-topbar { flex: none; height: 60px; background: #fff; border-bottom: 1px solid var(--art-border); display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.uc-crumb { font-size: 15px; font-weight: 600; color: var(--art-text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-topright { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.uc-iconbtn { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 9px; background: transparent; color: var(--art-text-700); cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.uc-iconbtn:hover { background: var(--art-bg-hover); }
.uc-iconbtn svg { display: block; }
.uc-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 10px; transition: background .2s; white-space: nowrap; max-width: 200px; overflow: hidden; }
.uc-user:hover { background: var(--art-bg-hover); }
.uc-user > span:last-of-type { overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--art-text-700); }
.uc-user .el-avatar { background: var(--art-primary); }
.uc-collapse { display: inline-flex; }
.uc-main { flex: 1; overflow: auto; padding: 16px 18px 28px; background: var(--art-bg-page); }

/* ===================== 通用块 ===================== */
.page-card { background: #fff; border: 1px solid var(--art-border); border-radius: 10px; padding: 18px 20px; box-shadow: var(--art-card-shadow); margin-bottom: 16px; }
.page-card:last-child { margin-bottom: 0; }
.page-title { font-size: 16px; font-weight: 600; color: var(--art-text-900); margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.pager { display: flex; justify-content: flex-end; margin-top: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.stat-card { display: flex; align-items: center; gap: 14px; min-height: 96px; background: #fff; border: 1px solid var(--art-border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--art-card-shadow); }
.stat-card .icon-box { flex: none; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.stat-card .icon-box.c1 { background: #ECF2FF; color: #5D87FF; }
.stat-card .icon-box.c2 { background: #E8F7FF; color: #49BEFF; }
.stat-card .icon-box.c3 { background: #E9FCF9; color: #13DEB9; }
.stat-card .icon-box.c4 { background: #FFF7E9; color: #FFAE1F; }
.stat-card .body { flex: 1; min-width: 0; }
.stat-card .label { color: var(--art-text-600); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .value { font-size: 23px; font-weight: 700; line-height: 1.3; margin-top: 2px; color: var(--art-text-900); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .sub { color: var(--art-text-500); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mono { font-family: Consolas, Monaco, "Courier New", monospace; font-size: 12px; word-break: break-all; }
.text-muted { color: var(--art-text-500); }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mb12 { margin-bottom: 12px; }
.code-box { background: #0B1B3A; color: #D8E3F8; border-radius: 10px; padding: 14px 16px; font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.75; overflow-x: auto; white-space: pre; border: 1px solid #16294F; }

.el-button--primary { box-shadow: 0 4px 12px rgba(93, 135, 255, .22); }
.el-button--primary.is-link, .el-button--primary.is-text { box-shadow: none; }
.el-table { --el-table-border-color: var(--art-border); --el-table-header-bg-color: #FAFBFC; --el-table-header-text-color: var(--art-text-700); --el-table-row-hover-bg-color: #F6F9FC; }
.el-table th.el-table__cell { font-weight: 600; }
.el-tabs__item.is-active { font-weight: 600; }
.el-tabs__nav-wrap::after { background-color: var(--art-border); }
.el-dialog { border-radius: 12px; }
.el-tag { border-radius: 6px; font-weight: 500; }
.el-input__wrapper, .el-textarea__inner { border-radius: 8px; }
.el-form-item__label { color: var(--art-text-700); font-weight: 500; }

@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr; }
  .uc-main { padding: 14px; }
}

/* ===================== 个人资料页 ===================== */
.profile-hero { display: flex; align-items: center; gap: 18px; }
.profile-avatar { flex: none; background: var(--art-primary); color: #fff; font-size: 26px; font-weight: 600; box-shadow: 0 8px 20px rgba(93, 135, 255, .25); }
.profile-info { flex: 1; min-width: 0; }
.profile-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-name .txt { font-size: 18px; font-weight: 700; color: var(--art-text-900); }
.profile-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 12px; }
.profile-meta .item { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.profile-meta .k { font-size: 12px; color: var(--art-text-500); }
.profile-meta .v { font-size: 13px; font-weight: 500; color: var(--art-text-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-form .el-form-item { margin-bottom: 16px; }
.grid-form .el-row { margin-bottom: 0; }
.form-actions { padding-left: 76px; }
/* ---------- 在线充值 / 实名认证 ---------- */
.uc-tip { display:flex; align-items:center; gap:8px; padding:10px 18px; background:#fff7e6; color:#ad6800;
  border-bottom:1px solid #ffe7ba; font-size:13px; }
.uc-tip .el-button { padding:0; }
.quick { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pay-box { margin-top:4px; }
.pay-order { max-width:640px; margin:6px 0 0; padding:14px 16px; border:1px solid #e5e9f2; border-radius:12px; background:#fafbfe; }
.pay-order .no { font-family:ui-monospace,Consolas,monospace; font-size:13px; color:#334155; }
.rn-box { max-width:660px; }

/* ===================== 注册滑块验证码 ===================== */
.cap-box { width: 100%; max-width: 300px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.cap-stage { position: relative; width: 100%; padding-top: 50%; border-radius: 8px; overflow: hidden; background: #EEF2F8; }
.cap-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.cap-piece { position: absolute; display: block; filter: drop-shadow(0 2px 5px rgba(7, 20, 55, .3)); }
.cap-refresh { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; padding: 0; border: none; border-radius: 7px;
  background: rgba(255, 255, 255, .85); color: #4B5675; font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.cap-refresh:hover { background: #fff; color: var(--art-primary); }
.cap-track { position: relative; height: 40px; margin-top: 10px; border-radius: 8px; overflow: hidden;
  background: #F2F5FA; border: 1px solid var(--art-border-2); }
.cap-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #E4EBFF; transition: background .2s; }
.cap-box.is-ok .cap-fill { background: #E9FCF9; }
.cap-box.is-fail .cap-fill { background: #FFEDED; }
.cap-text { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 46px; font-size: 13px; color: var(--art-text-500); pointer-events: none; }
.cap-box.is-ok .cap-text { color: #0FB79A; }
.cap-box.is-fail .cap-text { color: #FF4D4F; }
.cap-handle { position: absolute; left: 0; top: 0; width: 40px; height: 100%; border-radius: 8px;
  background: #fff; border: 1px solid var(--art-border-2); box-shadow: 0 2px 6px rgba(7, 20, 55, .09);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--art-primary);
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cap-handle:active { cursor: grabbing; }
.cap-box.is-ok .cap-handle { color: #13DEB9; border-color: #A9EFDF; cursor: default; }
.cap-box.is-fail .cap-handle { color: #FF4D4F; border-color: #FFC9C9; }

/* ===================== 手机端适配 ===================== */
@media (max-width: 900px) {
  /* 顶部：三条杠 + 当前页标题 + 余额 + 头像，菜单收进左侧抽屉 */
  .uc-side { display: none; }
  .uc-collapse { display: none; }
  .uc-burger { display: inline-flex; }
  .uc-topbar { height: 54px; padding: 0 10px; gap: 8px; }
  .uc-crumb { font-size: 15px; }
  /* 手机上要隐藏的块（如充值财务的「可用余额」卡，与首页重复） */
  .hide-mobile { display: none !important; }
  .uc-user { padding: 3px; max-width: 60px; }
  .uc-user > span:last-of-type { display: none; }

  .uc-main { padding: 12px 12px 24px; }
  /* 统计卡片改 2×2 小方块：图标在上、数字在下（内联样式也一并盖掉） */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .stat-card { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 14px; }
  .stat-card .icon-box { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
  .stat-card .body { width: 100%; }
  .stat-card .label { font-size: 12px; margin-top: 8px; }
  .stat-card .value { font-size: 21px; margin-top: 1px; }
  .stat-card .sub { font-size: 11px; margin-top: 1px; }
  .page-card { padding: 14px; border-radius: 12px; }
  .page-title { font-size: 15px; margin-bottom: 12px; }
  .toolbar { gap: 8px; }

  /* 两栏内容在手机上自动变一栏，保证左右对称 */
  .el-row > .el-col { max-width: 100%; flex: 0 0 100%; }

  /* 页签等宽居中，像手机 App 的 tab */
  .el-tabs__header { margin-bottom: 12px; }
  .el-tabs__nav-wrap::after { display: none; }
  .el-tabs__nav { width: 100%; display: flex; float: none; }
  .el-tabs__item { flex: 1; justify-content: center; text-align: center; padding: 0 6px !important; font-size: 13px; }
  .el-tabs__active-bar { display: none; }

  /* 表单标签收窄，输入框占满整行 */
  .el-form-item { margin-bottom: 14px; }
  .el-form-item__label { width: 78px !important; padding-right: 6px !important; font-size: 13px; }

  /* 表格小一号 */
  .el-table { font-size: 12px; }
  .el-table .cell { padding: 0 6px; }

  /* 弹层适配 */
  .el-dialog { width: 92% !important; margin-top: 6vh !important; }
  .el-message-box { width: 88% !important; }

  /* 个人资料：头像卡整块排版，字段两列变一列 */
  .profile-hero { align-items: flex-start; gap: 14px; }
  .profile-avatar { width: 56px !important; height: 56px !important; font-size: 20px; }
  .profile-name .txt { font-size: 16px; }
  .profile-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px; }
  .profile-meta .item:last-child { grid-column: 1 / -1; }
  .grid-form .el-form-item { margin-bottom: 12px; }
  .form-actions { padding-left: 78px; }
  .uc-tip { font-size: 12px; padding: 8px 12px; line-height: 1.6; }
  .pay-order { padding: 12px; }
}

@media (max-width: 460px) {
  /* 登录 / 注册卡片不能超出屏幕 */
  .login-card { width: 92% !important; padding: 24px 18px 20px; }
  .login-card.wide { width: 94% !important; max-height: none; overflow: visible; }
  .login-page { align-items: flex-start; padding: 24px 0; }
  .login-title { font-size: 19px; }
  .el-form-item__label { width: 70px !important; }
}

/* ===================== 手机端左侧抽屉导航 ===================== */
/* 抽屉不占满屏幕：留出右侧页面可见，宽度也有上限，平板/大屏手机不会拉太宽 */
.uc-drawer.el-drawer, .uc-drawer .el-drawer { max-width: 268px; }
.uc-drawer .el-drawer__body { padding: 14px 12px; }
.uc-drawer-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--art-text-900); padding: 2px 4px 14px; border-bottom: 1px solid var(--art-border); margin-bottom: 10px; overflow: hidden; }
.uc-drawer-head > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-drawer-head .logo-mark { min-width: 32px; height: 32px; padding: 0 5px; border-radius: 9px; background: var(--art-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.uc-drawer .el-menu { border-right: none !important; background: transparent; }
.uc-drawer .el-menu-item { height: 46px; line-height: 46px; margin: 2px 0; border-radius: 8px; font-weight: 500; color: var(--art-text-700); }
.uc-drawer .el-menu-item.is-active { background: var(--art-primary-bg); color: var(--art-primary); font-weight: 600; }

/* ---------- 首页「短信类型分布」底部小结 ---------- */
.type-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--art-border); }
.type-sum-item .k { font-size: 12px; color: var(--art-text-500); }
.type-sum-item .v { font-size: 18px; font-weight: 700; color: var(--art-text-900); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-sum-item .v span { font-size: 12px; font-weight: 400; color: var(--art-text-500); margin-left: 3px; }

/* ===================== 手机端仪表盘 ===================== */
.gauge-card .page-title { margin-bottom: 4px; }
.gauge-box { height: 190px; }
.gauge-sub { text-align: center; font-size: 12px; color: var(--art-text-500); margin-top: -10px; padding-bottom: 2px; }
/* 概览第二行不再跟着上浮，否则会和上一行叠在一起 */
.gauge-sub + .gauge-sub { margin-top: 4px; }

/* ===================== 站点 LOGO 图 ===================== */
.uc-brand .logo-img { height: 30px; width: auto; max-width: 120px; object-fit: contain; display: block; flex: none; }
.lb-brand .logo-img { height: 34px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.uc-drawer-head .logo-img { height: 30px; width: auto; max-width: 120px; object-fit: contain; display: block; flex: none; }
.uc-drawer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--art-text-900); }

/* 实名认证表单：标签更长，单独放宽，避免「真实姓名」折行 */
.rn-form .el-form-item__label { width: 96px !important; }
.rn-form .form-actions { padding-left: 96px; }

/* 管理员代登录提示条 */
.uc-tip-imp { background: #EEF4FF; color: #2F54EB; border-bottom-color: #D6E4FF; }
.uc-tip-imp .el-icon { color: #2F54EB; }

/* ===================== 首页概览：昨日对比 / 今日额度 / 快捷入口 ===================== */
.stat-delta.up { color: #13DEB9; font-weight: 600; }
.stat-delta.down { color: #FF4D4F; font-weight: 600; }
.stat-delta.flat { color: var(--art-text-400); }

.limit-card { padding: 16px 20px; }
.limit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.limit-k { font-size: 13px; color: var(--art-text-600); }
.limit-v { font-size: 12px; font-weight: 600; color: var(--art-text-900); }
.limit-bar { margin-top: 10px; height: 8px; border-radius: 6px; background: #EEF1F6; overflow: hidden; }
.limit-bar i { display: block; height: 100%; border-radius: 6px; background: #5D87FF; transition: width .3s ease; }
.limit-bar i.warn { background: #FFAE1F; }
.limit-bar i.full { background: #FF4D4F; }

/* 首页整页撑满屏幕高度：内容再少，卡片也会把下方空白吃掉，不会留一大片空 */
.home-body { display: flex; flex-direction: column; min-height: 100%; }
.home-row { flex: 1 1 auto; }

/* 并排的两张卡等高，右边缘看起来才齐 */
.home-row .el-col { display: flex; }
.home-row .page-card { flex: 1 1 auto; }

/* 趋势图和快捷入口跟着卡片一起长高 */
.trend-card { display: flex; flex-direction: column; }
.trend-card .trend-box { flex: 1 1 auto; min-height: 260px; }
.trend-card .el-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.quick-card { display: flex; flex-direction: column; }
.quick-card .quick-grid { flex: 1 1 auto; align-content: center; }

/* 快捷入口：2 列磁贴 */
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-rows: 1fr; }
.quick-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 13px 14px; border-radius: 12px; background: #F7F9FE; border: 1px solid var(--art-border); color: var(--art-text-600); font-size: 14px; cursor: pointer; transition: all .16s ease; }
.quick-item .el-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #ECF2FF; color: var(--art-primary); font-size: 22px; }
.quick-item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-item:hover { background: #F2F6FF; border-color: #C9D8FF; color: var(--art-primary); }
.quick-item:hover .el-icon { background: #DFE9FF; }

/* 窄屏：并排的两张卡自动上下排（趋势图在上、快捷入口在下），并去掉栅格留白 */
@media (max-width: 900px) {
  /* 手机端内容本来就比屏幕高，不需要再撑高度，只要去掉栅格留白 */
  .home-body { min-height: 0; }
  .home-row { flex: none; margin-left: 0 !important; margin-right: 0 !important; }
  .home-row .el-col { padding-left: 0 !important; padding-right: 0 !important; }
  .home-row .page-card { margin-bottom: 16px; }
  .quick-card .quick-grid { justify-content: flex-start; gap: 8px; }
  .quick-item { justify-content: center; gap: 6px; padding: 10px 8px; font-size: 12px; }
  .quick-item .el-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
}

/* ===================== 充值购买：套餐卡片 ===================== */
.pay-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pay-head-k { font-size: 13px; color: var(--art-text-600); }
.pkg-wrap { margin-bottom: 22px; }
.pkg-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--art-text-900); margin-bottom: 12px; }
.pkg-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--art-primary); }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }
.pkg-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 1px solid var(--art-border); background: #fff; box-shadow: 0 2px 10px rgba(20, 40, 90, .05); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pkg-card:hover { transform: translateY(-3px); border-color: #C7D6FF; box-shadow: 0 16px 34px rgba(60, 100, 220, .16); }
.pkg-card.has-badge { border-color: #FFCDAE; }
.pkg-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, #F1F5FF, #F9FBFF); border-bottom: 1px solid var(--art-border); }
.pkg-card.has-badge .pkg-head { background: linear-gradient(135deg, #FFF2E9, #FFFAF6); }
.pkg-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--art-text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg-badge { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6; color: #fff; background: linear-gradient(135deg, #FF8A3D, #FF5B37); box-shadow: 0 2px 6px rgba(255, 91, 55, .3); }
.pkg-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 18px 14px 14px; }
.pkg-price { display: flex; align-items: baseline; font-size: 34px; font-weight: 800; line-height: 1; color: var(--art-primary); letter-spacing: -1px; }
.pkg-cur { margin-right: 2px; font-size: 16px; font-weight: 700; }
.pkg-sub { margin-top: 9px; font-size: 12px; color: var(--art-text-500); }
.pkg-sub b { font-size: 15px; font-weight: 700; color: var(--art-text-900); }
.pkg-unit { margin-top: 9px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--art-primary); background: #EDF3FF; }
.pkg-list { width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--art-border); display: flex; flex-direction: column; gap: 7px; }
.pkg-li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--art-text-500); }
.pkg-li .el-icon { flex: none; margin-top: 2px; font-size: 13px; color: var(--art-primary); }
.pkg-buy { margin: 0 14px 14px; height: 40px; border-radius: 10px; font-weight: 600; border: 0; background: linear-gradient(135deg, #6D8CFF, #3D63F5); box-shadow: 0 6px 16px rgba(61, 99, 245, .26); }
.pkg-buy:hover, .pkg-buy:focus { background: linear-gradient(135deg, #5F80FF, #2F55EE); box-shadow: 0 8px 18px rgba(61, 99, 245, .32); }

@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pkg-head { padding: 9px 10px; gap: 6px; }
  .pkg-name { font-size: 12px; }
  .pkg-badge { padding: 1px 7px; font-size: 10px; }
  .pkg-body { padding: 12px 10px 10px; }
  .pkg-price { font-size: 25px; }
  .pkg-cur { font-size: 13px; }
  .pkg-sub { margin-top: 6px; font-size: 11px; }
  .pkg-sub b { font-size: 13px; }
  .pkg-unit { margin-top: 6px; padding: 2px 8px; font-size: 10px; }
  .pkg-list { margin-top: 10px; padding-top: 9px; gap: 5px; }
  .pkg-li { font-size: 11px; }
  .pkg-buy { margin: 0 10px 10px; height: 34px; font-size: 13px; }
}

/* ===================== 购买确认弹窗 ===================== */
.buy-box { border: 1px solid var(--art-border); border-radius: 10px; padding: 10px 14px; background: #FAFBFF; }
.buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--art-text-600); padding: 5px 0; }
.buy-row b { color: var(--art-text-900); font-weight: 600; }
.buy-row .buy-price { color: #FF5B37; font-size: 18px; }
.buy-pay { margin-top: 16px; }
.buy-pay-k { font-size: 13px; color: var(--art-text-600); margin-bottom: 8px; }
.pkg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pkg-tag { font-size: 11px; color: var(--art-text-600); background: #F2F5FA; border-radius: 6px; padding: 3px 7px; }

/* ===================== 接口对接：文档区 ===================== */
.doc-steps { display: flex; flex-direction: column; gap: 11px; }
.doc-step { display: flex; gap: 10px; align-items: flex-start; }
.doc-step i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--art-primary); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.doc-step b { display: block; font-size: 13px; font-weight: 600; color: var(--art-text-900); }
.doc-step span { display: block; font-size: 12px; color: var(--art-text-500); line-height: 1.8; margin-top: 2px; }
.doc-note { font-size: 13px; color: var(--art-text-600); line-height: 1.9; margin: 10px 0; }
.doc-sub { font-size: 13px; font-weight: 600; color: var(--art-primary); margin-bottom: 10px; }
.doc-list { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: var(--art-text-600); line-height: 2; }
.doc-list li { list-style: disc; }
.doc-list li::marker { color: var(--art-primary); }

/* ===================== 我的钱包 ===================== */
.wallet-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.wallet-bal { border: 1px solid var(--art-border); border-radius: 12px; padding: 14px 16px; background: linear-gradient(180deg, #F7FAFF, #fff); }
.wallet-bal-k { font-size: 13px; color: var(--art-text-600); }
.wallet-bal-v { font-size: 24px; font-weight: 700; color: var(--art-text-900); margin-top: 6px; letter-spacing: -.5px; }
.wallet-bal-s { font-size: 12px; color: var(--art-text-500); margin-top: 4px; }
.grant-wrap { margin-bottom: 18px; }
.grant-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.grant-item { border: 1px solid var(--art-border); border-radius: 10px; padding: 11px 13px; background: #fff; }
.grant-name { font-size: 13px; font-weight: 600; color: var(--art-text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grant-amount { font-size: 15px; font-weight: 700; color: var(--art-primary); margin-top: 6px; }
.grant-amount i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--art-text-500); }
.grant-sub { font-size: 12px; color: var(--art-text-500); margin-top: 4px; }
.pay-box-wrap { border: 1px solid var(--art-border); border-radius: 12px; padding: 16px 16px 6px; margin-bottom: 18px; }

@media (max-width: 900px) {
  .wallet-top { gap: 10px; }
  .wallet-bal { padding: 12px; }
  .wallet-bal-v { font-size: 18px; }
  .grant-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pay-box-wrap { padding: 14px 12px 4px; }
}
.pkg-empty { padding: 30px 0; text-align: center; font-size: 13px; color: var(--art-text-500); }
.buy-hint { margin-top: 10px; font-size: 12px; color: #E6A23C; }

/* =====================================================================
 * 暗色模式：顶栏头像旁的月亮按钮切换（选择存 localStorage.sms_user_theme）
 * 变量在这里整体翻一遍，浅色那套底色再逐个盖掉
 * ===================================================================== */
html.dark {
  --art-primary:      #6E93FF;
  --art-primary-dark: #5D87FF;
  --art-primary-bg:   #1E2A47;
  --art-secondary:    #49BEFF;
  --art-info:         #8E9AB5;

  --art-text-900: #E8EDF7;
  --art-text-800: #D5DCEC;
  --art-text-700: #B4BED4;
  --art-text-600: #8E9AB5;
  --art-text-500: #78839C;
  --art-text-400: #5C6784;

  --art-border:   #232C42;
  --art-border-2: #2C3752;
  --art-bg-page:  #0F1524;
  --art-bg-hover: #1A2237;
  --art-card-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
  --art-pop-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  --brand: #6E93FF;
  --bg: #0F1524;

  --el-color-primary: #6E93FF;
  --el-color-primary-light-3: #4E6FCB;
  --el-color-primary-light-5: #3F5698;
  --el-color-primary-light-7: #2C3E6B;
  --el-color-primary-light-8: #253356;
  --el-color-primary-light-9: #1E2A47;
  --el-color-primary-dark-2: #8FACFF;
  --el-color-success: #13DEB9;
  --el-color-success-light-3: #17A98F;
  --el-color-success-light-5: #14836F;
  --el-color-success-light-7: #115C4F;
  --el-color-success-light-8: #124A41;
  --el-color-success-light-9: #12312C;
  --el-color-success-dark-2: #41E5C7;
  --el-color-warning: #FFAE1F;
  --el-color-warning-light-3: #C98A19;
  --el-color-warning-light-5: #976915;
  --el-color-warning-light-7: #664810;
  --el-color-warning-light-8: #523A0F;
  --el-color-warning-light-9: #33280F;
  --el-color-warning-dark-2: #FFC151;
  --el-color-danger: #FF4D4F;
  --el-color-danger-light-3: #C23B3D;
  --el-color-danger-light-5: #932E30;
  --el-color-danger-light-7: #642225;
  --el-color-danger-light-8: #511C1F;
  --el-color-danger-light-9: #35191B;
  --el-color-danger-dark-2: #FF7274;
  --el-color-error: #FF4D4F;
  --el-color-error-light-3: #C23B3D;
  --el-color-error-light-5: #932E30;
  --el-color-error-light-7: #642225;
  --el-color-error-light-8: #511C1F;
  --el-color-error-light-9: #35191B;
  --el-color-error-dark-2: #FF7274;
  --el-color-info: #8E9AB5;
  --el-color-info-light-5: #4E5B73;
  --el-color-info-light-7: #3A4356;
  --el-color-info-light-8: #2C3547;
  --el-color-info-light-9: #232C42;

  --el-bg-color: #161E30;
  --el-bg-color-page: #0F1524;
  --el-bg-color-overlay: #1A2237;
  --el-text-color-primary: #E8EDF7;
  --el-text-color-regular: #C3CCDF;
  --el-text-color-secondary: #8E9AB5;
  --el-text-color-placeholder: #5C6784;
  --el-text-color-disabled: #4A5470;
  --el-border-color-darker: #2C3752;
  --el-border-color-dark: #2C3752;
  --el-border-color: #2C3752;
  --el-border-color-light: #232C42;
  --el-border-color-lighter: #232C42;
  --el-border-color-extra-light: #1E2637;
  --el-fill-color-darker: #24304A;
  --el-fill-color-dark: #1E2637;
  --el-fill-color: #1E2637;
  --el-fill-color-light: #1A2237;
  --el-fill-color-lighter: #161E30;
  --el-fill-color-extra-light: #141B2B;
  --el-fill-color-blank: #161E30;
  --el-mask-color: rgba(9, 13, 22, .8);
  --el-mask-color-extra-light: rgba(9, 13, 22, .35);
  --el-overlay-color-lighter: rgba(9, 13, 22, .8);
}

html.dark ::-webkit-scrollbar-thumb { background: #2C3752; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3A4767; }

/* ---------- 登录 / 注册 ---------- */
html.dark .find-ok { background: #1A2237; }
html.dark .login-page { background: linear-gradient(150deg, #131C30 0%, #0F1524 45%, #131F38 100%); }
html.dark .login-card { background: #161E30; }

/* ---------- 主框架 ---------- */
html.dark .uc-side { background: #131A2B; }
html.dark .uc-topbar { background: #131A2B; }
html.dark .page-card { background: #161E30; }
html.dark .stat-card { background: #161E30; }
html.dark .stat-card .icon-box.c1 { background: #1E2A47; color: #7E9DFF; }
html.dark .stat-card .icon-box.c2 { background: #16304A; color: #49BEFF; }
html.dark .stat-card .icon-box.c3 { background: #12312C; color: #2FD6B4; }
html.dark .stat-card .icon-box.c4 { background: #33280F; color: #FFAE1F; }
html.dark .limit-bar { background: #232C42; }
html.dark .quick-item { background: #1A2237; }
html.dark .quick-item .el-icon { background: #1E2A47; }
html.dark .quick-item:hover { background: #1E2A47; border-color: #3A4A73; }
html.dark .quick-item:hover .el-icon { background: #26314D; }
html.dark .code-box { background: #0B1120; border-color: #1C2740; color: #C9D6EC; }

/* ---------- 提示条 ---------- */
html.dark .uc-tip { background: #33280F; color: #E5B463; border-bottom-color: #4A3812; }
html.dark .uc-tip .el-button { color: #9DB4FF; }
html.dark .uc-tip-imp { background: #1E2A47; color: #8FACFF; border-bottom-color: #2C3E6B; }
html.dark .uc-tip-imp .el-icon { color: #8FACFF; }

/* ---------- 注册滑块验证码 ---------- */
html.dark .cap-stage { background: #1A2237; }
html.dark .cap-track { background: #1A2237; }
html.dark .cap-fill { background: #26314D; }
html.dark .cap-box.is-ok .cap-fill { background: #12312C; }
html.dark .cap-box.is-fail .cap-fill { background: #35191B; }
html.dark .cap-handle { background: #26314D; }

/* ---------- 充值购买 / 我的钱包 ---------- */
html.dark .pkg-card { background: #161E30; }
html.dark .pkg-head { background: linear-gradient(135deg, #1B2338, #182031); border-color: #26314D; }
html.dark .pkg-card.has-badge .pkg-head { background: linear-gradient(135deg, #2B2130, #221B27); }
html.dark .pkg-unit { background: #1E2A47; }
html.dark .pkg-buy { box-shadow: none; }
html.dark .pkg-card:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }
html.dark .buy-box { background: #1A2237; }
html.dark .pkg-tag { background: #1E2637; }
html.dark .wallet-bal { background: linear-gradient(180deg, #1A2237, #161E30); }
html.dark .grant-item { background: #161E30; }
html.dark .pay-order { background: #1A2237; border-color: #232C42; }
html.dark .pay-order .no { color: #C3CCDF; }

/* ---------- 表格等 Element Plus 细节 ---------- */
html.dark .el-table { --el-table-border-color: var(--art-border); --el-table-header-bg-color: #1A2237; --el-table-header-text-color: var(--art-text-700); --el-table-row-hover-bg-color: #1E2637; }

/* ---------- 顶栏「亮色 / 暗色」按钮 ---------- */
.uc-theme { display: inline-flex; }
.uc-theme .el-icon { font-size: 18px; }
.uc-theme:hover { color: var(--art-primary); }

/* ===================== 域名服务（黑白极简） ===================== */
.dmn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dmn-title { font-size: 20px; font-weight: 700; letter-spacing: .5px; color: var(--art-text-900); }
.dmn-sub { font-size: 12px; color: var(--art-text-500); margin-top: 5px; }
.dmn-wallet { border: 1px solid var(--art-border); border-radius: 10px; padding: 10px 18px; min-width: 150px; text-align: right; background: #fff; }
.dmn-wallet-label { font-size: 12px; color: var(--art-text-500); }
.dmn-wallet-value { font-size: 20px; font-weight: 700; color: var(--art-text-900); margin-top: 2px; letter-spacing: .5px; }

.dmn-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--art-border); margin-bottom: 16px; }
.dmn-tabs a { padding: 9px 16px; font-size: 14px; color: var(--art-text-600); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dmn-tabs a.on { color: var(--art-text-900); font-weight: 600; border-bottom-color: #111; }

.dmn-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.dmn-item { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--art-border); border-radius: 12px; padding: 18px; }
.dmn-item:hover { border-color: #9AA1AC; }
.dmn-domain { font-family: Consolas, Monaco, "Courier New", monospace; font-size: 15px; font-weight: 700; color: var(--art-text-900); word-break: break-all; letter-spacing: .3px; }
.dmn-domain-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmn-label { flex: none; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 20px; color: #fff; white-space: nowrap; letter-spacing: .2px; }
.dmn-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--art-text-500); }
.dmn-remark { font-size: 12px; color: var(--art-text-500); line-height: 1.6; }
.dmn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.dmn-price { font-size: 20px; font-weight: 700; color: var(--art-text-900); letter-spacing: .3px; }
.dmn-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px; border: 1px solid #111; border-radius: 8px; background: #111; color: #fff; font-size: 13px; cursor: pointer; transition: .15s; }
.dmn-btn:hover { background: #333; border-color: #333; }
.dmn-btn.is-plain { background: #fff; color: var(--art-text-500); border-color: var(--art-border); cursor: not-allowed; }
.dmn-btn:disabled { opacity: .9; }

.dmn-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dmn-grant { background: #fff; border: 1px solid var(--art-border); border-radius: 12px; padding: 15px 16px; cursor: pointer; transition: .15s; }
.dmn-grant:hover { border-color: #9AA1AC; }
.dmn-grant.on { border-color: #111; box-shadow: 0 0 0 1px #111 inset; }
.dmn-grant-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dmn-state { font-size: 12px; color: var(--art-text-600); border: 1px solid var(--art-border); border-radius: 20px; padding: 1px 9px; white-space: nowrap; }
.dmn-state.off { color: #B0B4BC; }
.dmn-quota { height: 4px; border-radius: 2px; background: #EDEFF3; overflow: hidden; margin: 11px 0 9px; }
.dmn-quota i { display: block; height: 100%; background: #111; }
.dmn-type { font-family: Consolas, Monaco, monospace; font-size: 12px; border: 1px solid var(--art-border); border-radius: 4px; padding: 1px 6px; color: var(--art-text-700); }

@media (max-width: 640px) {
  .dmn-shop, .dmn-mine { grid-template-columns: 1fr; }
  .dmn-head { align-items: stretch; }
  .dmn-wallet { text-align: left; }
}

html.dark .dmn-wallet, html.dark .dmn-item, html.dark .dmn-grant { background: #161E30; }
html.dark .dmn-item:hover, html.dark .dmn-grant:hover { border-color: #4A5468; }
html.dark .dmn-tabs a.on { color: #fff; border-bottom-color: #fff; }
html.dark .dmn-btn { background: #F2F4F8; border-color: #F2F4F8; color: #10151F; }
html.dark .dmn-btn:hover { background: #D8DCE4; border-color: #D8DCE4; }
html.dark .dmn-btn.is-plain { background: transparent; color: var(--art-text-500); border-color: var(--art-border); }
html.dark .dmn-grant.on { border-color: #F2F4F8; box-shadow: 0 0 0 1px #F2F4F8 inset; }
html.dark .dmn-quota { background: #232C42; }
html.dark .dmn-quota i { background: #F2F4F8; }

/* ---------- 我的钱包（用户端 · 黑白极简） ---------- */
.wal-hero { display: flex; gap: 14px; margin-bottom: 14px; }
.wal-hero-main { flex: 1 1 auto; min-width: 0; border-radius: 14px; padding: 20px 22px; background: #111; color: #fff; }
.wal-hero-k { font-size: 13px; color: rgba(255,255,255,.68); }
.wal-hero-v { font-size: 36px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.15; margin-top: 8px; font-variant-numeric: tabular-nums; }
.wal-hero-s { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; }
.wal-hero-side { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wal-side { border: 1px solid var(--art-border); border-radius: 14px; padding: 16px 18px; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.wal-side-k { font-size: 13px; color: var(--art-text-600); }
.wal-side-v { font-size: 26px; font-weight: 700; color: var(--art-text-900); letter-spacing: -.8px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.wal-side-v i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--art-text-500); }

.wal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.wal-grid.is-single { grid-template-columns: 1fr; }
.wal-card { border: 1px solid var(--art-border); border-radius: 14px; padding: 16px 18px; background: #fff; }
.wal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wal-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--art-text-900); }
.wal-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: #111; }
.wal-head-act { display: flex; align-items: center; gap: 8px; }

.wal-label { font-size: 13px; color: var(--art-text-600); margin-bottom: 8px; }
.wal-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.wal-chip { height: 32px; padding: 0 14px; border: 1px solid var(--art-border); border-radius: 8px; background: #fff; color: var(--art-text-700); font-size: 13px; cursor: pointer; transition: .15s; }
.wal-chip:hover { border-color: #9AA1AC; }
.wal-chip.on { background: #111; border-color: #111; color: #fff; }
.wal-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--art-border); }
.wal-total-k { font-size: 13px; color: var(--art-text-600); }
.wal-total-v { font-size: 26px; font-weight: 700; letter-spacing: -.8px; color: var(--art-text-900); font-variant-numeric: tabular-nums; }
.wal-total-s { font-size: 12px; color: var(--art-text-500); }
.wal-submit { width: 100%; height: 42px; margin-top: 16px; }
.wal-tip { font-size: 12px; color: var(--art-text-500); margin-top: 8px; text-align: center; }
.wal-pay .el-button--primary { background: #111; border-color: #111; }
.wal-pay .el-button--primary:hover, .wal-pay .el-button--primary:focus { background: #333; border-color: #333; }
.wal-pay .el-radio-button__original-radio:checked + .el-radio-button__inner { background: #111; border-color: #111; box-shadow: -1px 0 0 0 #111; }
.wal-cur { margin-top: 16px; }
.wal-cur-no { font-size: 13px; color: var(--art-text-700); }
.wal-cur-s { font-size: 12px; color: var(--art-text-500); margin-top: 6px; }
.wal-cur-act { margin-top: 10px; }

@media (max-width: 900px) {
  .wal-hero { flex-direction: column; gap: 10px; }
  .wal-grid { grid-template-columns: 1fr; }
  .wal-hero-main { padding: 16px 18px; }
  .wal-hero-v { font-size: 30px; }
  .wal-card { padding: 14px; }
}
html.dark .wal-hero-main { background: linear-gradient(135deg, #232C42, #1A2237); border: 1px solid #2A3550; }
html.dark .wal-side, html.dark .wal-card { background: #161E30; }
html.dark .wal-chip { background: #1E2637; border-color: #2A3550; color: #C3CCDF; }
html.dark .wal-chip.on { background: #F2F4F8; border-color: #F2F4F8; color: #10151F; }
html.dark .wal-title::before { background: #F2F4F8; }
html.dark .wal-pay .el-button--primary { background: #F2F4F8; border-color: #F2F4F8; color: #10151F; }
html.dark .wal-pay .el-button--primary:hover { background: #D8DCE4; border-color: #D8DCE4; }
html.dark .wal-pay .el-radio-button__original-radio:checked + .el-radio-button__inner { background: #F2F4F8; border-color: #F2F4F8; color: #10151F; box-shadow: -1px 0 0 0 #F2F4F8; }
/* 单卡（无套餐）时充值表单收窄居中 */
.wal-grid.is-single .wal-pay > .wal-label,
.wal-grid.is-single .wal-pay > .el-input,
.wal-grid.is-single .wal-pay > .wal-quick,
.wal-grid.is-single .wal-pay > .el-radio-group,
.wal-grid.is-single .wal-pay > .wal-total,
.wal-grid.is-single .wal-pay > .wal-submit,
.wal-grid.is-single .wal-pay > .wal-tip,
.wal-grid.is-single .wal-pay > .pay-order { max-width: 560px; }
.wal-grid .grant-list { align-content: start; }
/* ---------- 支付方式图标卡 ---------- */
.pay-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 10px; }
.pay-tiles.stack { grid-template-columns: 1fr; }
.pay-tile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 1px solid var(--art-border); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.pay-tile:hover { border-color: #9AA1AC; }
.pay-tile.on { border-color: var(--art-primary); box-shadow: 0 0 0 1px var(--art-primary) inset; }
.pay-tile.on .pay-tile-t { color: var(--art-primary); }
.pay-tile:disabled { opacity: .5; cursor: not-allowed; }
.pay-tile-t { font-size: 13px; font-weight: 600; color: var(--art-text-900); white-space: nowrap; }
.pay-tile-v { margin-left: auto; font-size: 12px; color: var(--art-text-500); white-space: nowrap; }
.pay-tile-v b { font-weight: 600; color: var(--art-text-900); }
.pay-ic { flex: none; display: inline-flex; width: 26px; height: 26px; }
.pay-ic svg { display: block; width: 100%; height: 100%; }
/* 顶部统计只剩一张「可用余额」卡（手机上本就隐藏），整块在手机端收掉，避免留白 */
@media (max-width: 900px) { .stat-grid.one { display: none; } }
html.dark .pay-tile { background: #161E30; }
html.dark .pay-tile:hover { border-color: #4A5468; }

/* ===================== 今日概览标题行 + 操作按钮 ===================== */
.ov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ov-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--art-text-900); }
.ov-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--art-primary); }
.ov-acts { display: flex; gap: 10px; margin-left: auto; }
.gauge-acts { display: flex; gap: 10px; margin: 14px 0 2px; }
.gauge-acts .el-button { flex: 1; margin-left: 0 !important; }

/* ===================== 签名 / 模板页 ===================== */
.mat-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mat-tip { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--art-text-500); }
.mat-tip .el-icon { flex: none; color: var(--art-text-400); }
.mat-acts { display: flex; gap: 8px; margin-left: auto; }
.mat-scroll { width: 100%; overflow-x: auto; }

@media (max-width: 900px) {
  /* 页签收窄左对齐，不再拉满整行 */
  .page-card .el-tabs__nav { width: auto; display: flex; float: none; }
  .page-card .el-tabs__item { flex: none; padding: 0 18px !important; }
  .page-card .el-tabs__active-bar { display: block; }
  .page-card .el-tabs__nav-wrap::after { display: block; background-color: var(--art-border); }

  /* 签名 / 模板页：提示与按钮分两行，表格可横向滑动 */
  .mat-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .mat-tip { align-items: flex-start; line-height: 1.6; }
  .mat-acts { margin-left: 0; }
  .mat-acts .el-button { flex: 1; margin-left: 0 !important; }
  .mat-scroll .el-table { min-width: 600px; }

}

/* ===================== 门户首页（访客可看） ===================== */
.lp { min-height: 100vh; background: var(--art-bg-page); }
.lp-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.lp-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--art-border); }
.lp-head-in { display: flex; align-items: center; gap: 18px; height: 62px; }
.lp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.lp-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--art-border); }
.lp-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7BA2FF, #3D63F5); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -.5px; }
.lp-name { font-size: 16px; font-weight: 700; color: var(--art-text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-nav { display: flex; align-items: center; gap: 22px; margin-left: 10px; }
.lp-nav a { font-size: 14px; color: var(--art-text-600); cursor: pointer; white-space: nowrap; }
.lp-nav a:hover { color: var(--art-primary); }
.lp-head-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lp-icon-btn { color: var(--art-text-600); }
.lp-burger { display: none; }

.lp-hero { position: relative; overflow: hidden; padding: 62px 0 56px; background: radial-gradient(880px 420px at 10% -14%, #E9F0FF 0%, rgba(233, 240, 255, 0) 62%), radial-gradient(760px 380px at 94% -6%, #E7F6FF 0%, rgba(231, 246, 255, 0) 58%); }
.lp-hero-in { display: flex; align-items: center; gap: 44px; }
.lp-hero-txt { flex: 1 1 0; min-width: 0; }
.lp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #EAF0FF; color: #2F55EE; font-size: 12px; font-weight: 600; }
.lp-h1 { margin: 16px 0 0; font-size: 40px; line-height: 1.26; font-weight: 800; letter-spacing: -1px; color: var(--art-text-900); }
.lp-h1 em { font-style: normal; color: var(--art-primary); }
.lp-sub { margin: 16px 0 0; max-width: 620px; font-size: 15px; line-height: 1.9; color: var(--art-text-600); }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; font-size: 13px; color: var(--art-text-600); }
.lp-chips span { display: inline-flex; align-items: center; gap: 6px; }
.lp-chips .el-icon { color: #22C55E; font-size: 15px; }
.lp-hero-card { flex: 0 0 396px; border-radius: 14px; border: 1px solid var(--art-border); background: #fff; box-shadow: 0 18px 40px rgba(40, 70, 150, .1); overflow: hidden; }
.lp-code-head { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #F7F9FE; border-bottom: 1px solid var(--art-border); }
.lp-code-head i { width: 9px; height: 9px; border-radius: 50%; background: #E3E8F3; }
.lp-code-head i:first-child { background: #FFC0B0; }
.lp-code-head i:nth-child(2) { background: #FFE0A3; }
.lp-code-head i:nth-child(3) { background: #B7E6C4; }
.lp-code-head span { margin-left: 6px; font-size: 12px; color: var(--art-text-500); }
.lp-code { margin: 0; padding: 16px; font-size: 12px; line-height: 1.85; color: #35507F; font-family: Consolas, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.lp-code-res { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px dashed var(--art-border); font-size: 12px; }
.lp-code-res span { flex: none; color: var(--art-text-500); }
.lp-code-res code { color: #12A150; font-family: Consolas, Menlo, monospace; word-break: break-all; }

.lp-sec { padding: 56px 0; }
.lp-sec-alt { background: #fff; }
.lp-sec-h { text-align: center; margin-bottom: 30px; }
.lp-sec-h h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--art-text-900); }
.lp-sec-h p { margin: 10px 0 0; font-size: 14px; color: var(--art-text-500); }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-card { padding: 22px; border-radius: 14px; border: 1px solid var(--art-border); background: #fff; box-shadow: 0 2px 10px rgba(20, 40, 90, .04); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.lp-card:hover { transform: translateY(-2px); border-color: #C7D6FF; box-shadow: 0 14px 30px rgba(60, 100, 220, .12); }
.lp-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--art-primary); background: #EDF3FF; }
.lp-card h3 { margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: var(--art-text-900); }
.lp-card p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--art-text-500); }

.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-step { padding: 20px 18px; border-radius: 14px; border: 1px solid var(--art-border); background: #fff; box-shadow: 0 2px 10px rgba(20, 40, 90, .04); }
.lp-step-no { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--art-primary); color: #fff; font-size: 13px; font-weight: 700; }
.lp-step h3 { margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: var(--art-text-900); }
.lp-step p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--art-text-500); }

.lp-pkgs { justify-content: center; }
.lp-empty { padding: 34px 0; text-align: center; font-size: 13px; color: var(--art-text-500); }
.lp-price-tip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 13px; color: var(--art-text-500); }
.lp-price-tip a { color: var(--art-primary); font-weight: 600; cursor: pointer; }

.lp-faq-wrap { max-width: 860px; }
.lp-faq { border-top: 0; border-bottom: 0; background: transparent; }
.lp-faq .el-collapse-item__header { height: auto; min-height: 52px; padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--art-text-900); background: transparent; border-bottom: 1px solid var(--art-border); }
.lp-faq .el-collapse-item__wrap { background: transparent; border-bottom: 1px solid var(--art-border); }
.lp-faq-a { padding: 4px 4px 14px; font-size: 13px; line-height: 1.9; color: var(--art-text-500); }

.lp-foot { padding: 34px 0 26px; background: #fff; border-top: 1px solid var(--art-border); }
.lp-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.lp-foot-brand { max-width: 420px; }
.lp-foot-brand .lp-brand { cursor: default; }
.lp-foot-brand p { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--art-text-500); }
.lp-foot-col { display: flex; flex-direction: column; gap: 9px; min-width: 110px; }
.lp-foot-col h4 { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--art-text-900); }
.lp-foot-col a { font-size: 13px; color: var(--art-text-500); cursor: pointer; }
.lp-foot-col a:hover { color: var(--art-primary); }
.lp-copy { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--art-border); font-size: 12px; color: var(--art-text-500); }
.lp-icp { color: var(--art-text-500); }
.lp-icp:hover { color: var(--art-primary); }

.lp-service { position: fixed; right: 18px; bottom: 22px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; background: var(--art-primary); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 22px rgba(61, 99, 245, .3); }
.lp-service:hover { color: #fff; opacity: .92; }

.lp-dw .el-drawer__body { padding: 0; }
.lp-dw-in { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 22px; }
.lp-dw-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.lp-dw-nav a { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: 10px; font-size: 14px; color: var(--art-text-600); cursor: pointer; }
.lp-dw-nav a:hover { background: #F2F6FF; color: var(--art-primary); }
.lp-dw-acts { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 18px; }
.lp-dw-btn { width: 100%; margin-left: 0 !important; }
.lp-dw-copy { margin-top: 14px; text-align: center; font-size: 12px; color: var(--art-text-500); }

html.dark .lp-header { background: rgba(16, 22, 36, .88); }
html.dark .lp-hero { background: radial-gradient(880px 420px at 10% -14%, #16233E 0%, rgba(22, 35, 62, 0) 62%), radial-gradient(760px 380px at 94% -6%, #14283A 0%, rgba(20, 40, 58, 0) 58%); }
html.dark .lp-tag { background: #1C2A4A; color: #9DB8FF; }
html.dark .lp-sec-alt, html.dark .lp-foot { background: #131A2B; }
html.dark .lp-card, html.dark .lp-step, html.dark .lp-hero-card { background: #161E30; border-color: #232C42; box-shadow: none; }
html.dark .lp-ico { background: #1E2A47; }
html.dark .lp-code-head { background: #1A2237; border-color: #232C42; }
html.dark .lp-code { color: #9FB6DE; }
html.dark .lp-name, html.dark .lp-h1, html.dark .lp-sec-h h2, html.dark .lp-card h3, html.dark .lp-step h3, html.dark .lp-foot-col h4, html.dark .lp-faq .el-collapse-item__header { color: #F2F3F5; }
html.dark .lp-dw-nav a:hover { background: #1E2637; }

@media (max-width: 980px) {
  .lp-nav { display: none; }
  .lp-burger { display: inline-flex; }
  .lp-head-acts .el-button:not(.lp-icon-btn) { display: none; }
  .lp-head-in { height: 56px; gap: 10px; }
  .lp-hero { padding: 34px 0 34px; }
  .lp-hero-in { flex-direction: column; align-items: stretch; gap: 26px; }
  .lp-hero-card { flex: none; }
  .lp-h1 { font-size: 27px; letter-spacing: -.6px; }
  .lp-sub { font-size: 14px; line-height: 1.85; }
  .lp-cta .el-button { flex: 1 1 0; margin-left: 0 !important; }
  .lp-chips { gap: 8px 14px; font-size: 12px; margin-top: 20px; }
  .lp-sec { padding: 38px 0; }
  .lp-sec-h { margin-bottom: 20px; }
  .lp-sec-h h2 { font-size: 21px; }
  .lp-sec-h p { font-size: 13px; }
  .lp-grid3 { grid-template-columns: 1fr; gap: 12px; }
  .lp-steps { grid-template-columns: 1fr; gap: 12px; }
  .lp-card, .lp-step { padding: 16px; }
  .lp-pkgs { grid-template-columns: repeat(2, 1fr); }
  .lp-foot-in { flex-direction: column; gap: 22px; }
  .lp-foot-col { min-width: 0; }
  .lp-service { right: 12px; bottom: 14px; padding: 9px 13px; }
}