:root { --cp-blue: #0052d9; --cp-blue-dark: #003ba3; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "PingFang SC","Microsoft YaHei",system-ui,sans-serif; background: #f3f5f8; color: #1d2129; }
a { text-decoration: none; color: var(--cp-blue); }

/* 布局 */
.cp-layout { height: 100vh; }
.cp-aside { background: #fff; border-right: 1px solid #e7eaf0; display: flex; flex-direction: column; }
.cp-logo { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #f0f2f7; }
.cp-logo svg { flex: none; }
.cp-logo b { font-size: 17px; color: var(--cp-blue-dark); }
.cp-logo span { font-size: 12px; color: #86909c; display: block; }
.cp-menu { border-right: none; flex: 1; overflow-y: auto; }
.cp-header { background: #fff; border-bottom: 1px solid #e7eaf0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px; }
.cp-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cp-main { padding: 20px; overflow-y: auto; }

/* 卡片 */
.cp-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 14px; margin-bottom: 16px; }
.cp-card { background: #fff; border-radius: 8px; padding: 18px 20px; border: 1px solid #eceff5; }
.cp-card .t { font-size: 13px; color: #86909c; display: flex; align-items: center; gap: 6px; }
.cp-card .v { font-size: 24px; font-weight: 700; margin-top: 8px; color: #1d2129; }
.cp-card .v small { font-size: 13px; font-weight: 400; color: #86909c; }
.cp-card .ic { width: 38px; height: 38px; border-radius: 9px; background: rgba(0,82,217,.08); color: var(--cp-blue); display: flex; align-items: center; justify-content: center; }
.cp-panel { background: #fff; border-radius: 8px; border: 1px solid #eceff5; padding: 18px 20px; margin-bottom: 16px; }
.cp-panel h4 { margin: 0 0 14px; font-size: 15px; }

/* 商品卡 */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; }
.prod-card { background: #fff; border: 1px solid #eceff5; border-radius: 10px; padding: 18px; transition: box-shadow .2s; }
.prod-card:hover { box-shadow: 0 6px 24px rgba(0,30,90,.08); }
.prod-card h5 { margin: 4px 0 2px; font-size: 16px; }
.prod-card .region { font-size: 12px; color: #86909c; }
.prod-card .price { color: #e34d59; font-size: 22px; font-weight: 700; margin: 10px 0; }
.prod-card .price small { font-size: 12px; font-weight: 400; color: #86909c; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.spec-chips span { font-size: 12px; background: #f2f6ff; color: var(--cp-blue); border-radius: 4px; padding: 3px 8px; }

/* 登录页 */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 20% -10%, #1a4fd6 0%, #061c4d 55%, #04123a 100%); position: relative; overflow: hidden; }
.auth-card { width: 400px; background: #fff; border-radius: 12px; padding: 34px 36px; box-shadow: 0 20px 60px rgba(0,10,40,.45); position: relative; z-index: 2; }
.auth-card h2 { margin: 14px 0 4px; font-size: 22px; }
.auth-card .sub { color: #86909c; font-size: 13px; margin-bottom: 20px; }
.auth-foot { text-align: center; color: rgba(255,255,255,.55); font-size: 12px; margin-top: 22px; position: relative; z-index: 2; }
.auth-foot a { color: rgba(255,255,255,.8); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; }

/* 其他 */
.mono { font-family: ui-monospace, Consolas, monospace; }
.menu-group { font-size: 12px; color: #a0a6b3; padding: 14px 20px 4px; }
.el-menu { --el-menu-active-color: #0052d9; }
.muted { color: #86909c; font-size: 12px; }
.total-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.el-table { --el-table-header-bg-color: #f7f9fc; }
.big-price { font-size: 30px; font-weight: 700; color: #e34d59; }
.cp-balance-banner { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(100deg, #0052d9, #2668ff); border-radius: 10px; color: #fff; padding: 20px 24px; margin-bottom: 16px; }
.cp-balance-banner .num { font-size: 28px; font-weight: 700; }

/* ===== V2：AI 客服 / 图表 / 快捷入口 / 工单 ===== */
.ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-right: 2px; }
.ic-blue { background: rgba(0,82,217,.09); color: #0052d9; }
.ic-green { background: rgba(0,181,120,.1); color: #00b578; }
.ic-purple { background: rgba(124,58,237,.1); color: #7c3aed; }
.ic-orange { background: rgba(255,145,0,.12); color: #e6820a; }
.cp-card .t { display: flex; align-items: center; gap: 8px; }

.chart { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding-top: 8px; }
.chart .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.chart .bar i { display: block; width: 55%; max-width: 30px; background: linear-gradient(180deg, #6ea8ff, #0052d9); border-radius: 5px 5px 0 0; transition: height .4s; }
.chart .bar span { font-size: 11px; color: #86909c; white-space: nowrap; }
.chart .bar b { font-size: 10px; color: #475569; font-weight: 500; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-item { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #eceff5; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all .18s; }
.q-item:hover { border-color: #9ec2ff; background: #f6f9ff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,60,180,.08); }

/* AI 客服悬浮窗 */
.sw-root { position: fixed; right: 22px; bottom: 22px; z-index: 3000; }
.sw-fab { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #2668ff, #0052d9); box-shadow: 0 10px 26px rgba(0,60,180,.4);
  display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.sw-fab:hover { transform: scale(1.08); }
.sw-panel { position: absolute; right: 0; bottom: 68px; width: 360px; height: 520px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(6,26,84,.3); display: flex; flex-direction: column; overflow: hidden; }
.sw-pop-enter-active, .sw-pop-leave-active { transition: all .22s ease; }
.sw-pop-enter-from, .sw-pop-leave-to { opacity: 0; transform: translateY(14px) scale(.97); }
.sw-head { background: linear-gradient(120deg, #0052d9, #2668ff); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.sw-head b { font-size: 15px; display: block; }
.sw-head span { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 5px; }
.sw-head .dot { width: 7px; height: 7px; border-radius: 50%; background: #52ff9c; display: inline-block; }
.sw-close { margin-left: auto; background: transparent; border: none; color: #fff; font-size: 15px; cursor: pointer; opacity: .8; }
.sw-close:hover { opacity: 1; }
.sw-body { flex: 1; overflow-y: auto; padding: 14px; background: #f6f8fc; }
.sw-msg { display: flex; margin-bottom: 10px; }
.sw-msg.user { justify-content: flex-end; }
.sw-bubble { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.sw-msg.assistant .sw-bubble { background: #fff; color: #1d2129; border: 1px solid #e9edf5; border-top-left-radius: 4px; box-shadow: 0 2px 8px rgba(10,40,120,.05); }
.sw-msg.user .sw-bubble { background: linear-gradient(120deg, #2668ff, #0052d9); color: #fff; border-top-right-radius: 4px; }
.sw-bubble .cursor { animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sw-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sw-quick span { font-size: 12px; color: #0052d9; background: #eef3ff; border: 1px solid #c9d9ff; padding: 5px 12px; border-radius: 14px; cursor: pointer; transition: all .15s; }
.sw-quick span:hover { background: #dfe9ff; }
.sw-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eef1f6; background: #fff; }
.sw-foot input { flex: 1; border: 1px solid #dfe3ec; border-radius: 10px; padding: 9px 12px; font-size: 13px; outline: none; }
.sw-foot input:focus { border-color: #2668ff; }
.sw-foot button { border: none; background: linear-gradient(120deg, #2668ff, #0052d9); color: #fff; border-radius: 10px; padding: 0 18px; cursor: pointer; font-size: 13px; }
.sw-foot button:disabled { opacity: .5; cursor: not-allowed; }
.sw-tip { text-align: center; font-size: 11px; color: #a0a6b3; padding: 0 0 10px; background: #fff; }
.sw-tip a { color: #0052d9; cursor: pointer; }

/* 工单时间线 */
.tk-timeline { max-height: 55vh; overflow-y: auto; }
.tk-item { margin-bottom: 14px; }
.tk-meta { display: flex; justify-content: space-between; font-size: 12px; color: #86909c; margin-bottom: 4px; }
.tk-meta b { color: #1d2129; font-size: 13px; }
.tk-content { background: #f6f8fc; border: 1px solid #eceff5; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.tk-item.admin .tk-content { background: #eef3ff; border-color: #c9d9ff; }

/* ================= V3 视觉主题 ================= */
:root {
  --el-color-primary: #0052d9;
  --el-color-primary-light-3: #4d8af0;
  --el-color-primary-light-5: #84b1f5;
  --el-color-primary-light-7: #b8d4fa;
  --el-color-primary-light-8: #d3e3fc;
  --el-color-primary-light-9: #eaf1fe;
  --el-color-primary-dark-2: #0042b0;
  --el-border-radius-base: 8px;
}
body {
  background:
    radial-gradient(900px 420px at 100% -10%, #e6eeff 0%, transparent 60%),
    radial-gradient(700px 380px at -10% 110%, #ecf3ff 0%, transparent 55%),
    #f2f4f9;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c6d2e8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a9bcdf; }
::-webkit-scrollbar-track { background: transparent; }

/* 侧边栏：深蓝渐变 + 胶囊高亮 */
.cp-aside { background: linear-gradient(180deg, #0d2557 0%, #0a1c44 55%, #081737 100%); border-right: none; }
.cp-logo { border-bottom: 1px solid rgba(255,255,255,.08); }
.cp-logo b { color: #fff; letter-spacing: .3px; }
.cp-logo span { color: #8fa5d4; }
.cp-menu { background: transparent; --el-menu-bg-color: transparent; --el-menu-text-color: #c2cfe8;
  --el-menu-hover-bg-color: rgba(255,255,255,.07); --el-menu-hover-text-color: #fff; --el-menu-active-color: #fff; }
.menu-group { color: #5d729c; }
.cp-menu .el-menu-item { margin: 3px 10px; border-radius: 9px; height: 44px; line-height: 44px; }
.cp-menu .el-menu-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.cp-menu .el-menu-item.is-active { background: linear-gradient(100deg, #1a5cff 0%, #0e43c6 100%); color: #fff;
  box-shadow: 0 6px 18px rgba(10,60,190,.45); }

/* 顶栏：玻璃拟态 */
.cp-header { background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 #e9edf5, 0 6px 24px rgba(15,40,100,.05); }
.cp-header .el-tag--danger { background: linear-gradient(120deg, #fff5e9, #ffedd8); border-color: #ffd9a8;
  color: #d97706; font-weight: 600; }
.cp-header .el-dropdown { color: #363e4d; }

/* 余额横幅：渐变 + 装饰圆 */
.cp-balance-banner { position: relative; overflow: hidden;
  background: linear-gradient(115deg, #0a3bd0 0%, #1a5cff 55%, #26a4ff 135%);
  box-shadow: 0 14px 34px rgba(10,60,200,.32); }
.cp-balance-banner::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255,255,255,.10); top: -120px; right: 70px; }
.cp-balance-banner::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.08); bottom: -85px; left: 32%; }
.cp-balance-banner > * { position: relative; z-index: 1; }

/* 卡片：悬浮 + 渐变数字 */
.cp-card, .cp-panel { border: none; box-shadow: 0 2px 10px rgba(20,45,110,.04), 0 10px 30px rgba(20,45,110,.05);
  transition: transform .2s ease, box-shadow .25s ease; }
.cp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,45,110,.09), 0 20px 44px rgba(20,45,110,.10); }
.cp-card .v { background: linear-gradient(120deg, #1d2129 30%, #2f5bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ic { border-radius: 11px; }

/* 按钮：渐变主按钮 */
.el-button--primary { background: linear-gradient(135deg, #2f6dff, #0052d9); border: none;
  box-shadow: 0 4px 14px rgba(0,82,217,.24); }
.el-button--primary:hover { background: linear-gradient(135deg, #4d82ff, #1a63ea); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,82,217,.34); }
.el-button--primary:active { transform: translateY(0); }
.el-button--primary.is-plain { background: #eef4ff; border: 1px solid #c9dcff; color: #0a52d9; box-shadow: none; }
.el-button--primary.is-plain:hover { background: #dfeaff; transform: none; }
.el-button--primary.is-disabled, .el-button--primary.is-disabled:hover { background: #a8c1f2; transform: none; box-shadow: none; }

/* 输入框 */
.el-input__wrapper { border-radius: 10px; background: #fbfcff; box-shadow: 0 0 0 1px #e2e8f4 inset; }
.el-input__wrapper.is-focus { box-shadow: 0 0 0 1.5px #2f6dff inset, 0 0 0 3px rgba(47,109,255,.12); }
.el-textarea__inner { border-radius: 10px; box-shadow: 0 0 0 1px #e2e8f4 inset; }
.el-textarea__inner:focus { box-shadow: 0 0 0 1.5px #2f6dff inset, 0 0 0 3px rgba(47,109,255,.12); }
.el-select__wrapper { border-radius: 10px; }

/* 弹窗 / 抽屉 */
.el-dialog { border-radius: 16px; overflow: hidden; }
.el-dialog__header { margin-right: 0; padding: 16px 22px; border-bottom: 1px solid #eef1f7; }
.el-dialog__title { font-weight: 600; }
.el-dialog__body { padding: 20px 22px; }
.el-drawer__header { margin-bottom: 0; padding: 16px 20px; border-bottom: 1px solid #eef1f7; color: #1d2129; font-weight: 600; }
.el-drawer__body { padding: 20px; }

/* 表格 */
.el-table { --el-table-header-bg-color: transparent; --el-table-row-hover-bg-color: #f4f8ff; border-radius: 12px; }
.el-table th.el-table__cell { background: #f6f8fd; color: #5a67a0; font-weight: 600; }
.el-table .el-table__cell { padding: 11px 0; }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #fafbfe; }

/* 分页 / 标签 */
.el-pagination .el-pager li { border-radius: 9px; font-weight: 500; }
.el-pagination .el-pager li.is-active { background: #0052d9; color: #fff; box-shadow: 0 3px 10px rgba(0,82,217,.3); }
.el-tag { border-radius: 999px; font-weight: 500; }
.el-tag--small { padding: 0 10px; }

/* 登录页动效 */
.auth-wrap { background: linear-gradient(130deg, #0a2c7e, #061a54, #0b3aa8); background-size: 220% 220%;
  animation: authShift 14s ease infinite; }
@keyframes authShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.blob { animation: blobFloat 9s ease-in-out infinite; }
@keyframes blobFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
.auth-card { border-radius: 18px; border-top: 4px solid #2f6dff; }

/* 路由切换动画 */
.fade-slide-enter-active, .fade-slide-leave-active { transition: opacity .22s ease, transform .22s ease; }
.fade-slide-enter-from { opacity: 0; transform: translateY(10px); }
.fade-slide-leave-to { opacity: 0; transform: translateY(-6px); }

/* 客服窗增强 */
.sw-panel { border-radius: 18px; }
.sw-fab::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(47,109,255,.35); animation: fabRing 2.4s ease-out infinite; }
@keyframes fabRing { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.sw-fab { position: relative; }