/* ==========================================================================
   ZJMF Clientarea V2 — 用户中心全新设计系统（完全替换原 Skote 皮肤）
   壳层：ca-sidebar / ca-topbar / ca-main / ca-footer
   内页组件：card / table / form / btn / pagination / modal 全覆盖
   ========================================================================== */
:root {
  --ca-brand: #0ea5e9;
  --ca-brand-deep: #2563eb;
  --ca-brand-soft: rgba(14, 165, 233, .1);
  --ca-ink: #1c2436;
  --ca-body: #4c5871;
  --ca-muted: #8a94a8;
  --ca-line: #e6ebf3;
  --ca-line-strong: #41547a;
  --ca-bg: #f6f8fc;
  --ca-surface: #ffffff;
  --ca-surface-2: #eef1f6;
  --ca-red: #f5304d;
  --ca-side-w: 236px;
  --ca-side-mini: 72px;
  --ca-top-h: 60px;
  --ca-radius: 14px;
  --ca-shadow: 0 4px 18px rgba(23, 43, 99, .08);
  --ca-shadow-l: 0 18px 48px rgba(23, 43, 99, .12);
  --ca-ease: cubic-bezier(.22, .61, .36, 1);
}

html, body { background: var(--ca-bg); }
body { color: var(--ca-body); font-size: 14px; }
a { color: var(--ca-brand); text-decoration: none; }
a:hover { color: var(--ca-brand-deep); text-decoration: none; }

/* ================= 布局骨架 ================= */
.ca-layout { min-height: 100vh; }
.ca-main {
  margin-left: var(--ca-side-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin .28s var(--ca-ease);
}
body.ca-mini .ca-main { margin-left: var(--ca-side-mini); }
.ca-page { flex: 1; padding: 22px 26px 60px; }
.ca-container { max-width: 100%; }

/* ================= 侧边栏 ================= */
.ca-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--ca-side-w);
  background: var(--ca-surface);
  border-right: 1px solid var(--ca-line);
  display: flex; flex-direction: column;
  z-index: 1002;
  transition: width .28s var(--ca-ease), transform .28s var(--ca-ease);
}
.ca-side-logo {
  flex: 0 0 var(--ca-top-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ca-line);
  overflow: hidden; white-space: nowrap;
}
.ca-side-logo img { height: 30px; max-width: 170px; object-fit: contain; }
.ca-side-logo .ca-logo-mini { display: none; height: 34px; width: 34px; object-fit: contain; margin: 0 auto; }

.ca-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px 30px; }
.ca-nav::-webkit-scrollbar { width: 4px; }
.ca-nav::-webkit-scrollbar-thumb { background: #41547a; border-radius: 4px; }
.ca-nav ul { list-style: none; margin: 0; padding: 0; }
.ca-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: 42px; padding: 0 13px; margin-bottom: 3px;
  border-radius: 10px;
  color: var(--ca-body) !important;
  font-size: 14px;
  white-space: nowrap;
  transition: all .2s var(--ca-ease);
}
.ca-nav-link i { font-size: 17px; color: var(--ca-muted); width: 20px; text-align: center; flex: 0 0 20px; transition: color .2s; }
.ca-nav-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ca-nav-link:hover { background: var(--ca-bg); color: var(--ca-brand) !important; }
.ca-nav-link:hover i { color: var(--ca-brand); }
.ca-nav li.active > .ca-nav-link,
.ca-nav li.open > .ca-nav-link {
  background: var(--ca-brand-soft);
  color: var(--ca-brand-deep) !important;
  font-weight: 600;
}
.ca-nav li.active > .ca-nav-link i,
.ca-nav li.open > .ca-nav-link i { color: var(--ca-brand); }
.ca-nav li.active > .ca-nav-link::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #22d3ee, #3b82f6);
}
.ca-arrow {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 1.6px solid var(--ca-muted);
  border-bottom: 1.6px solid var(--ca-muted);
  transform: rotate(45deg);
  transition: transform .25s var(--ca-ease);
}
.ca-nav li.open > .ca-nav-link .ca-arrow { transform: rotate(225deg); }

.ca-sub {
  display: none;
  padding: 2px 0 6px;
}
.ca-nav li.open > .ca-sub { display: block; animation: caSlide .25s var(--ca-ease); }
@keyframes caSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ca-sub a {
  display: flex; align-items: center;
  padding: 9px 13px 9px 44px;
  border-radius: 8px;
  color: var(--ca-muted) !important;
  font-size: 13.5px;
  white-space: nowrap;
  transition: all .2s;
}
.ca-sub a:hover { color: var(--ca-brand) !important; background: var(--ca-bg); }
.ca-sub li.active > a { color: var(--ca-brand-deep) !important; font-weight: 600; }
.ca-sub .ca-sub a { padding-left: 58px; font-size: 13px; }

/* 迷你模式（桌面收起） */
body.ca-mini .ca-sidebar { width: var(--ca-side-mini); }
body.ca-mini .ca-side-logo { padding: 0; justify-content: center; }
body.ca-mini .ca-side-logo img { display: none; }
body.ca-mini .ca-side-logo .ca-logo-mini { display: block; }
body.ca-mini .ca-nav-link { justify-content: center; padding: 0; }
body.ca-mini .ca-nav-link span, body.ca-mini .ca-arrow { display: none; }
body.ca-mini .ca-nav li.active > .ca-nav-link::before { left: -12px; }
body.ca-mini .ca-sub {
  display: none !important;
  position: absolute; left: var(--ca-side-mini); top: 0;
  min-width: 150px; background: var(--ca-surface);
  border: 1px solid var(--ca-line); border-radius: 10px;
  box-shadow: var(--ca-shadow-l); padding: 8px; z-index: 1003;
}
body.ca-mini .ca-nav li { position: relative; }
body.ca-mini .ca-nav li:hover > .ca-sub { display: block !important; }
body.ca-mini .ca-sub a { padding: 9px 14px; }

/* 移动端抽屉 */
.ca-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20, 30, 55, .45); z-index: 1001;
  opacity: 0; transition: opacity .25s;
}
@media (max-width: 991px) {
  .ca-sidebar { transform: translateX(-100%); width: var(--ca-side-w) !important; }
  body.ca-side-open .ca-sidebar { transform: none; box-shadow: var(--ca-shadow-l); }
  body.ca-side-open .ca-overlay { display: block; opacity: 1; }
  .ca-main, body.ca-mini .ca-main { margin-left: 0; }
  body.ca-mini .ca-side-logo img { display: block; }
  body.ca-mini .ca-side-logo .ca-logo-mini { display: none; }
  body.ca-mini .ca-nav-link span, body.ca-mini .ca-arrow { display: block; }
  body.ca-mini .ca-nav-link { justify-content: flex-start; padding: 0 13px; }
  body.ca-mini .ca-sub { position: static; box-shadow: none; border: none; }
  body.ca-mini .ca-nav li.open > .ca-sub { display: block !important; }
  .ca-page { padding: 16px 14px 60px; }
}

/* ================= 顶栏 ================= */
.ca-topbar {
  position: sticky; top: 0; z-index: 1000;
  height: var(--ca-top-h);
  display: flex; align-items: center; gap: 6px;
  padding: 0 22px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ca-line);
}
.ca-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: none; background: transparent; border-radius: 10px;
  color: var(--ca-body) !important; font-size: 18px;
  cursor: pointer; transition: all .2s var(--ca-ease);
}
.ca-icon-btn:hover { background: var(--ca-brand-soft); color: var(--ca-brand) !important; }
.ca-icon-btn img { height: 16px; }
.ca-badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a1a, #ff4d2e);
  color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 3px 8px rgba(255, 90, 40, .35);
}
.ca-top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.ca-user-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 10px 4px 4px;
  border: 1px solid transparent; background: transparent; border-radius: 999px;
  cursor: pointer; transition: all .2s var(--ca-ease);
}
.ca-user-btn:hover { background: var(--ca-brand-soft); border-color: #d6e5ff; }
.ca-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 14px rgba(14, 165, 233, .32);
}
.ca-user-btn .ca-username { color: var(--ca-ink); font-size: 13.5px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-user-btn i { color: var(--ca-muted); font-size: 12px; }

.ca-topbar .dropdown-menu {
  border: 1px solid var(--ca-line); border-radius: 12px;
  box-shadow: var(--ca-shadow-l); padding: 8px; margin-top: 8px;
}
.ca-topbar .dropdown-item {
  border-radius: 8px; padding: 9px 14px;
  color: var(--ca-body); font-size: 13.5px;
}
.ca-topbar .dropdown-item:hover { background: var(--ca-brand-soft); color: var(--ca-brand); }
.ca-topbar .dropdown-item.text-danger:hover { background: #fff1f2; color: var(--ca-red) !important; }
.ca-login-link { color: var(--ca-body) !important; font-size: 14px; font-weight: 500; }
.ca-login-link:hover { color: var(--ca-brand) !important; }

/* ================= 页脚 ================= */
.ca-footer {
  padding: 18px 26px;
  background: var(--ca-surface);
  border-top: 1px solid var(--ca-line);
  color: var(--ca-muted); font-size: 13px;
}

/* ================= 页头（面包屑） ================= */
.page-title-box { padding: 2px 0 18px; }
.page-title-box h4 { color: var(--ca-ink); font-weight: 700; font-size: 19px; }
.page-title-box .breadcrumb { background: transparent; padding: 0; margin: 0; }
.page-title-box .breadcrumb-item { font-size: 13px; color: var(--ca-muted); }
.page-title-box .breadcrumb-item a { color: var(--ca-muted); }
.page-title-box .breadcrumb-item a:hover { color: var(--ca-brand); }
.page-title-box .breadcrumb-item.active { color: var(--ca-brand); }
.backBtn { margin-right: 4px; }

/* ================= 内页组件覆盖 ================= */
.card {
  border: 1px solid var(--ca-line);
  border-radius: var(--ca-radius);
  box-shadow: var(--ca-shadow);
  background: var(--ca-surface);
}
.card-header { background: var(--ca-surface); border-bottom: 1px solid var(--ca-line); border-radius: var(--ca-radius) var(--ca-radius) 0 0 !important; }
.card-title { color: var(--ca-ink); font-weight: 700; }
.card-body { color: var(--ca-body); }

.btn { border-radius: 9px; font-size: 14px; transition: all .22s var(--ca-ease); }
.btn-sm { border-radius: 8px; }
.btn-primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, .26);
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  box-shadow: 0 10px 22px rgba(14, 165, 233, .36) !important;
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-outline-primary { color: var(--ca-brand); border-color: var(--ca-brand); background: var(--ca-surface); }
.btn-outline-primary:hover { background: var(--ca-brand-soft); color: var(--ca-brand-deep); border-color: var(--ca-brand); }
.btn-light { background: #eef1f6; border-color: #eef1f6; color: var(--ca-body); }
.btn-light:hover { background: #e8edf5; color: var(--ca-ink); }
.badge-primary { background: var(--ca-brand-soft) !important; color: var(--ca-brand-deep) !important; }

.form-control {
  border: 1px solid var(--ca-line-strong);
  border-radius: 9px;
  background: var(--ca-surface);
  color: var(--ca-body);
  transition: all .22s var(--ca-ease);
}
.form-control:hover { border-color: #4f6ea3; }
.form-control:focus {
  border-color: var(--ca-brand);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
  background: var(--ca-surface);
}
label { color: var(--ca-ink); font-weight: 500; }
.custom-control-label { color: var(--ca-body); font-weight: 400; }
select.form-control {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b8' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}

.table { color: var(--ca-body); }
.table thead th {
  border-top: none !important;
  border-bottom: 1px solid var(--ca-line) !important;
  color: var(--ca-muted);
  font-weight: 600; font-size: 13px;
  background: #fbfcfe;
}
.table td { border-top: 1px solid var(--ca-line); }
.table-hover tbody tr:hover { background: var(--ca-brand-soft); }

.nav-tabs-custom { border-bottom: 1px solid var(--ca-line); }
.nav-tabs-custom .nav-item .nav-link { color: var(--ca-muted); border: none; }
.nav-tabs-custom .nav-item .nav-link.active {
  color: var(--ca-brand); font-weight: 600;
  border-bottom: 2px solid var(--ca-brand);
}

.pagination .page-link { border-radius: 8px; margin: 0 3px; color: var(--ca-body); border: 1px solid var(--ca-line-strong); }
.pagination .page-item.active .page-link {
  background: var(--ca-brand); border-color: var(--ca-brand);
  box-shadow: 0 4px 10px rgba(14, 165, 233, .28);
}
.pagination .page-item.disabled .page-link { background: #f6f8fc; }

.modal-content { border: none; border-radius: 16px; box-shadow: var(--ca-shadow-l); }
.modal-header { border-bottom: 1px solid var(--ca-line); }
.modal-footer { border-top: 1px solid var(--ca-line); }
.dropdown-menu { border: 1px solid var(--ca-line); border-radius: 12px; box-shadow: var(--ca-shadow-l); }
.dropdown-item { color: var(--ca-body); }
.dropdown-item:hover { background: var(--ca-brand-soft); color: var(--ca-brand); }

.text-primary { color: var(--ca-brand) !important; }
.alert { border-radius: 10px; border: none; }
.alert-danger { background: #fff1f2; color: #d63349; }
.alert-success { background: #ecfdf3; color: #12975a; }
.alert-warning { background: #fff8e6; color: #d98600; }
.alert-info { background: var(--ca-brand-soft); color: var(--ca-brand-deep); }
.progress { border-radius: 999px; background: #eef1f6; }
.progress-bar { background: linear-gradient(90deg, #22d3ee, #3b82f6); border-radius: 999px; }

/* 顶栏旧类兜底（inner pages 使用 Skote 类时保持浅色） */
#page-topbar { background: var(--ca-surface); border-bottom: 1px solid var(--ca-line); }
.navbar-brand-box { background: var(--ca-surface) !important; }
.vertical-menu, body[data-sidebar=dark] .vertical-menu { background: var(--ca-surface) !important; }
#sidebar-menu ul li a, body[data-sidebar=dark] #sidebar-menu ul li a { color: var(--ca-body) !important; }
#sidebar-menu .mm-active > a, body[data-sidebar=dark] #sidebar-menu .mm-active > a { color: var(--ca-brand-deep) !important; background: var(--ca-brand-soft) !important; }
.footer { background: var(--ca-surface); border-top: 1px solid var(--ca-line); color: var(--ca-muted); }
.main-content, .page-content { background: var(--ca-bg); }

/* ==========================================================================
   V3 基础层：reboot + 栅格 + 工具类 + 组件（完全自写，替代 bootstrap/Skote）
   ========================================================================== */

/* ---------- reboot ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--ca-body); background: var(--ca-bg);
}
h1,h2,h3,h4,h5,h6 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.35; color: var(--ca-ink); }
p { margin: 0 0 .75rem; }
ul, ol { margin: 0; padding-left: 1.2rem; }
img, svg { vertical-align: middle; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
input, select, textarea { outline: none; }
hr { border: none; border-top: 1px solid var(--ca-line); margin: 1rem 0; }
code, pre { font-family: SFMono-Regular, Consolas, monospace; }

/* ---------- 栅格（12 列 flex） ---------- */
.container-fluid { width: 100%; padding-right: 12px; padding-left: 12px; margin: 0 auto; }
.container { width: 100%; max-width: 1320px; padding-right: 12px; padding-left: 12px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.row.no-gutters { margin-right: 0; margin-left: 0; }
.row.no-gutters > [class*="col"] { padding-right: 0; padding-left: 0; }
[class*="col"] { position: relative; width: 100%; padding-right: 12px; padding-left: 12px; }
.col { flex: 1 0 0%; max-width: 100%; }
.col-1{flex:0 0 8.3333%;max-width:8.3333%}.col-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-5{flex:0 0 41.6667%;max-width:41.6667%}.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.3333%;max-width:58.3333%}.col-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-11{flex:0 0 91.6667%;max-width:91.6667%}.col-12{flex:0 0 100%;max-width:100%}
.col-auto{flex:0 0 auto;width:auto;max-width:100%}
@media (min-width:576px){
.col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}.col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}.col-sm-6{flex:0 0 50%;max-width:50%}
.col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}.col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}.col-sm-12{flex:0 0 100%;max-width:100%}
.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}
}
@media (min-width:768px){
.col-md-1{flex:0 0 8.3333%;max-width:8.3333%}.col-md-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-md-5{flex:0 0 41.6667%;max-width:41.6667%}.col-md-6{flex:0 0 50%;max-width:50%}
.col-md-7{flex:0 0 58.3333%;max-width:58.3333%}.col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-md-11{flex:0 0 91.6667%;max-width:91.6667%}.col-md-12{flex:0 0 100%;max-width:100%}
.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}
}
@media (min-width:992px){
.col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}.col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}.col-lg-6{flex:0 0 50%;max-width:50%}
.col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}.col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}.col-lg-12{flex:0 0 100%;max-width:100%}
.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}
}
@media (min-width:1200px){
.col-xl-1{flex:0 0 8.3333%;max-width:8.3333%}.col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}.col-xl-6{flex:0 0 50%;max-width:50%}
.col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}.col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}.col-xl-12{flex:0 0 100%;max-width:100%}
.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}
}

/* ---------- 间距工具 ---------- */
.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}
.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mr-1{margin-right:.25rem!important}
.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mr-2{margin-right:.5rem!important}
.m-3{margin:1rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.ml-3{margin-left:1rem!important}.mr-3{margin-right:1rem!important}
.m-4{margin:1.5rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.ml-4{margin-left:1.5rem!important}.mr-4{margin-right:1.5rem!important}
.m-5{margin:3rem!important}.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}.ml-5{margin-left:3rem!important}.mr-5{margin-right:3rem!important}
.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}
.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.pr-1{padding-right:.25rem!important}
.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.pr-2{padding-right:.5rem!important}
.p-3{padding:1rem!important}.pt-3{padding-top:1rem!important}.pb-3{padding-bottom:1rem!important}.pl-3{padding-left:1rem!important}.pr-3{padding-right:1rem!important}
.p-4{padding:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.pl-4{padding-left:1.5rem!important}.pr-4{padding-right:1.5rem!important}
.p-5{padding:3rem!important}.pt-5{padding-top:3rem!important}.pb-5{padding-bottom:3rem!important}.pl-5{padding-left:3rem!important}.pr-5{padding-right:3rem!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}.ml-auto{margin-left:auto!important}.mr-auto{margin-right:auto!important}
.my-auto{margin-top:auto!important;margin-bottom:auto!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}
.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}

/* ---------- 弹性/显示/文本 ---------- */
.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.flex-1{flex:1!important}
.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}
.justify-content-around{justify-content:space-around!important}
.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}
.align-items-center{align-items:center!important}.align-items-stretch{align-items:stretch!important}
.align-items-baseline{align-items:baseline!important}
.align-self-center{align-self:center!important}
.d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-inline{display:inline!important}
.d-grid{display:grid!important}
@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-block{display:block!important}.d-sm-inline-block{display:inline-block!important}.d-sm-flex{display:flex!important}}
@media (min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-inline-block{display:inline-block!important}.d-md-flex{display:flex!important}}
@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-inline-block{display:inline-block!important}.d-lg-flex{display:flex!important}}
@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-block{display:block!important}.d-xl-inline-block{display:inline-block!important}.d-xl-flex{display:flex!important}}
.w-100{width:100%!important}.w-50{width:50%!important}.h-100{height:100%!important}
.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}
.text-primary{color:var(--ca-brand)!important}.text-danger{color:var(--ca-red)!important}.text-muted{color:var(--ca-muted)!important}
.text-success{color:#12b76a!important}.text-warning{color:#f79009!important}.text-info{color:#0ea5e9!important}.text-dark{color:var(--ca-ink)!important}.text-white{color:#fff!important}
.font-weight-bold{font-weight:700!important}.font-weight-medium{font-weight:600!important}.font-weight-normal{font-weight:400!important}
.font-size-11{font-size:11px}.font-size-12{font-size:12px}.font-size-13{font-size:13px}.font-size-14{font-size:14px}
.font-size-15{font-size:15px}.font-size-16{font-size:16px}.font-size-18{font-size:18px}.font-size-20{font-size:20px}.font-size-22{font-size:22px}.font-size-24{font-size:24px}
.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-22{font-size:22px}.fs-24{font-size:24px}.fs-50{font-size:50px}
.pointer{cursor:pointer}.cursor{cursor:pointer}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rounded{border-radius:10px}.rounded-circle{border-radius:50%!important}
.position-relative{position:relative}.position-absolute{position:absolute}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.bg-white{background:#fff!important}.bg-light{background:var(--ca-bg)!important}.bg-transparent{background:transparent!important}
.border{border:1px solid var(--ca-line)!important}.border-bottom{border-bottom:1px solid var(--ca-line)!important}.border-top{border-top:1px solid var(--ca-line)!important}
.shadow-sm{box-shadow:var(--ca-shadow)}.shadow{box-shadow:var(--ca-shadow-l)}
.float-left{float:left}.float-right{float:right}
.mw-250{max-width:250px}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: 9px;
  border: 1px solid transparent;
  font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--ca-body); background: #eef1f6;
  cursor: pointer; transition: all .22s var(--ca-ease);
  text-decoration: none !important; white-space: nowrap;
}
.btn:hover { background: #e8edf5; color: var(--ca-ink); }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 12px 28px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn-primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, .26);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(14, 165, 233, .36) !important;
  transform: translateY(-1px);
}
.btn-primary:disabled, .btn-primary.disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-outline-primary { background: var(--ca-surface); color: var(--ca-brand); border-color: var(--ca-brand); }
.btn-outline-primary:hover { background: var(--ca-brand-soft); color: var(--ca-brand-deep); border-color: var(--ca-brand); }
.btn-secondary { background: #eef1f6; color: var(--ca-body); }
.btn-secondary:hover { background: #e2e8f0; color: var(--ca-ink); }
.btn-light { background: #eef1f6; color: var(--ca-body); }
.btn-light:hover { background: #e8edf5; }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff !important; border: none; }
.btn-success:hover { filter: brightness(1.06); color: #fff !important; }
.btn-danger { background: linear-gradient(135deg, #f8506b, #f5304d); color: #fff !important; border: none; }
.btn-danger:hover { filter: brightness(1.06); color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #d98600, #f59e0b); color: #fff !important; border: none; }
.btn-warning:hover { filter: brightness(1.06); color: #fff !important; }
.btn-info { background: linear-gradient(135deg, #0ea5e9, #0ea5e9); color: #fff !important; border: none; }
.btn-outline-danger { background: var(--ca-surface); color: var(--ca-red); border-color: rgba(251, 113, 133, .4); }
.btn-outline-danger:hover { background: #fff1f2; color: var(--ca-red); }
.btn-outline-secondary { background: var(--ca-surface); color: var(--ca-body); border-color: var(--ca-line-strong); }
.btn-outline-secondary:hover { background: var(--ca-bg); color: var(--ca-ink); }
.btn-outline-light { background: transparent; color: var(--ca-body); border-color: var(--ca-line-strong); }
.btn-link { background: none; color: var(--ca-brand); border: none; }
.btn-link:hover { color: var(--ca-brand-deep); text-decoration: underline !important; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: 9px 0 0 9px; }
.btn-group .btn:last-child { border-radius: 0 9px 9px 0; }
.btn-group-toggle .btn input[type="radio"], .btn-group-toggle .btn input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.btn-group-toggle .btn.active { background: var(--ca-brand) !important; color: #fff !important; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 16px; }
.form-control {
  display: block; width: 100%;
  min-height: 42px; padding: 8px 14px;
  border: 1px solid var(--ca-line-strong); border-radius: 9px;
  background: var(--ca-surface); color: var(--ca-body);
  transition: all .22s var(--ca-ease);
}
.form-control:hover { border-color: #4f6ea3; }
.form-control:focus { border-color: var(--ca-brand); box-shadow: 0 0 0 3px rgba(14, 165, 233, .12); }
.form-control:disabled, .form-control[readonly] { background: #f6f8fc; color: var(--ca-muted); }
textarea.form-control { min-height: 92px; height: auto; }
.form-control-sm { min-height: 34px; padding: 5px 10px; font-size: 13px; }
.form-control-lg { min-height: 50px; padding: 12px 18px; font-size: 15px; }
select.form-control {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b8' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
label { display: inline-block; margin-bottom: 6px; color: var(--ca-ink); font-weight: 500; font-size: 13.5px; }
.col-form-label { padding-top: 9px; }
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .custom-file { flex: 1 1 auto; width: auto; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append, .input-group-prepend { display: flex; align-items: stretch; }
.input-group-append > .btn, .input-group-prepend > .btn { border-radius: 0; }
.input-group-append:last-child > .btn { border-radius: 0 9px 9px 0; }
.input-group-prepend:first-child > .btn { border-radius: 9px 0 0 9px; }
.input-group-text { display: flex; align-items: center; padding: 8px 14px; background: #f6f8fc; border: 1px solid var(--ca-line-strong); color: var(--ca-muted); font-size: 13.5px; border-radius: 9px; }
.custom-control { position: relative; display: block; min-height: 1.4rem; padding-left: 26px; margin-bottom: 8px; }
.custom-control-input { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; accent-color: var(--ca-brand); cursor: pointer; }
.custom-control-label { color: var(--ca-body); font-weight: 400; cursor: pointer; margin-bottom: 0; }
.custom-checkbox, .custom-radio { display: flex; align-items: flex-start; }
.form-check { position: relative; display: flex; align-items: flex-start; padding-left: 24px; margin-bottom: 8px; }
.form-check-input { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; accent-color: var(--ca-brand); }
.form-check-label { color: var(--ca-body); font-weight: 400; }
.custom-file { position: relative; display: block; }
.is-invalid { border-color: var(--ca-red) !important; }
.invalid-feedback { display: none; color: var(--ca-red); font-size: 12.5px; margin-top: 5px; }
.is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip { display: block; }
.card { position: relative; display: flex; flex-direction: column; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: var(--ca-radius); box-shadow: var(--ca-shadow); margin-bottom: 20px; }
.card-body { flex: 1; padding: 24px; color: var(--ca-body); }
.card-header { padding: 16px 24px; background: var(--ca-surface); border-bottom: 1px solid var(--ca-line); border-radius: var(--ca-radius) var(--ca-radius) 0 0; }
.card-footer { padding: 14px 24px; border-top: 1px solid var(--ca-line); border-radius: 0 0 var(--ca-radius) var(--ca-radius); }
.card-title { color: var(--ca-ink); font-weight: 700; margin: 0; }
.card-text { color: var(--ca-body); }
.table { color: var(--ca-body); background: var(--ca-surface); }
.table th, .table td { padding: 12px 14px; vertical-align: middle; }
.table thead th { border-bottom: 1px solid var(--ca-line); color: var(--ca-muted); font-weight: 600; font-size: 13px; background: #fbfcfe; white-space: nowrap; }
.table tbody td, .table td { border-top: 1px solid var(--ca-line); }
.table tbody tr:first-child td { border-top: none; }
.table-hover tbody tr:hover { background: var(--ca-brand-soft); }
.table-striped tbody tr:nth-of-type(odd) { background: #f3f7ff; }
.table-responsive { display: block; width: 100%; overflow-x: auto; }
.nav { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.nav-tabs { border-bottom: 1px solid var(--ca-line); }
.nav-item { margin: 0; }
.nav-link { display: block; padding: 10px 18px; color: var(--ca-muted); font-size: 14px; border-bottom: 2px solid transparent; cursor: pointer; transition: all .2s; text-decoration: none !important; }
.nav-link:hover { color: var(--ca-brand); }
.nav-link.active { color: var(--ca-brand); font-weight: 600; border-bottom-color: var(--ca-brand); }
.nav-justified .nav-item { flex: 1; text-align: center; }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.fade { transition: opacity .2s; }
.fade:not(.show) { opacity: 0; }
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1050; display: none; min-width: 170px; padding: 8px; margin-top: 6px; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 12px; box-shadow: var(--ca-shadow-l); }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu.show { display: block; animation: caDrop .18s var(--ca-ease); }
@keyframes caDrop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.dropdown-item { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 8px; color: var(--ca-body); font-size: 13.5px; white-space: nowrap; text-decoration: none !important; cursor: pointer; }
.dropdown-item:hover { background: var(--ca-brand-soft); color: var(--ca-brand); }
.dropdown-divider { border-top: 1px solid var(--ca-line); margin: 6px 0; }
.modal { position: fixed; inset: 0; z-index: 1060; display: none; overflow: auto; outline: 0; }
.modal.show { display: block; }
.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1055; background: rgba(20, 30, 55, .5); opacity: 0; transition: opacity .2s; }
.modal-backdrop.show { opacity: 1; }
.modal-dialog { position: relative; width: auto; max-width: 520px; margin: 60px auto; padding: 0 16px; transition: transform .25s var(--ca-ease); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 120px); margin: 40px auto; }
.modal-lg { max-width: 800px; } .modal-sm { max-width: 360px; }
.modal-content { background: var(--ca-surface); border-radius: 16px; box-shadow: var(--ca-shadow-l); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--ca-line); }
.modal-title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ca-ink); }
.modal-body { padding: 22px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--ca-line); }
.modal .close { font-size: 22px; color: var(--ca-muted); line-height: 1; }
.modal .close:hover { color: var(--ca-ink); }
.badge { display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1; }
.badge-pill { border-radius: 999px; }
.badge-primary { background: var(--ca-brand-soft); color: var(--ca-brand-deep); }
.badge-success { background: #ecfdf3; color: #12975a; }
.badge-danger { background: #fff1f2; color: #d63349; }
.badge-warning { background: #fff8e6; color: #d98600; }
.badge-info { background: #e8f6ff; color: #0ea5e9; }
.badge-secondary { background: #eef1f6; color: var(--ca-body); }
.badge-dark { background: var(--ca-ink); color: #fff; }
.badge-light { background: #f6f8fc; color: var(--ca-muted); }
.alert { position: relative; padding: 13px 18px; margin-bottom: 16px; border-radius: 10px; font-size: 13.5px; }
.alert .close { position: absolute; right: 14px; top: 12px; font-size: 18px; opacity: .6; }
.alert-danger { background: #fff1f2; color: #d63349; }
.alert-success { background: #ecfdf3; color: #12975a; }
.alert-warning { background: #fff8e6; color: #d98600; }
.alert-info, .alert-primary { background: var(--ca-brand-soft); color: var(--ca-brand-deep); }
.pagination { display: flex; list-style: none; padding: 0; margin: 0; }
.page-link { display: block; padding: 7px 13px; margin: 0 3px; border: 1px solid var(--ca-line-strong); border-radius: 8px; color: var(--ca-body); font-size: 13.5px; background: var(--ca-surface); text-decoration: none !important; transition: all .2s; }
.page-link:hover { border-color: var(--ca-brand); color: var(--ca-brand); }
.page-item.active .page-link { background: var(--ca-brand); border-color: var(--ca-brand); color: #fff; box-shadow: 0 4px 10px rgba(14, 165, 233, .28); }
.page-item.disabled .page-link { background: #f6f8fc; color: var(--ca-muted); border-color: var(--ca-line); pointer-events: none; }
.tooltip { position: absolute; z-index: 1070; font-size: 12.5px; }
.tooltip-inner { max-width: 220px; padding: 7px 12px; background: var(--ca-ink); color: #fff; border-radius: 8px; box-shadow: var(--ca-shadow-l); }
.popover { position: absolute; z-index: 1070; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 10px; box-shadow: var(--ca-shadow-l); padding: 12px; font-size: 13px; }
.progress { display: flex; height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, #22d3ee, #3b82f6); border-radius: 999px; transition: width .4s var(--ca-ease); }
.list-unstyled { list-style: none; padding-left: 0; }
.list-inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; }
.list-inline-item { display: inline-block; margin-right: 10px; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }
.avatar-sm { width: 36px; height: 36px; } .avatar-md { width: 48px; height: 48px; }

/* ---------- V3 页面组件：仪表盘 ---------- */
.ca-h300 { height: 300px; }
.ca-profile-head { display: flex; align-items: center; gap: 16px; padding: 6px 4px 0; }
.ca-profile-avatar {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 62px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff; font-size: 22px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(14, 165, 233, .32);
}
.ca-profile-name { font-size: 17px; font-weight: 700; color: var(--ca-ink); }
.ca-profile-sub { color: var(--ca-muted); font-size: 12.5px; margin-top: 3px; }
.ca-sec-row { display: flex; gap: 14px; margin-top: 18px; justify-content: center; }
.ca-sec-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ca-brand-soft); color: var(--ca-brand); font-size: 19px;
  transition: all .22s var(--ca-ease);
}
.ca-sec-icon:hover { background: var(--ca-brand); color: #fff; transform: translateY(-2px); }
.ca-sec-icon.off { background: #eef1f6; color: #b6bfce; }
.ca-stat-row { display: flex; justify-content: space-around; align-items: center; text-align: center; }
.ca-stat b { display: block; font-size: 19px; font-weight: 800; }
.ca-stat span { color: var(--ca-muted); font-size: 12.5px; }
.ca-stat a:hover b { color: var(--ca-brand); }
.ca-fina-num { font-size: 14px; color: var(--ca-ink); font-weight: 600; }
.ca-fina-label { font-size: 12px; color: var(--ca-muted); margin-bottom: 2px; }
.ca-prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; }
.ca-prod-tile {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px;
  background: var(--ca-bg); color: var(--ca-body) !important; font-size: 13.5px;
  transition: all .22s var(--ca-ease);
}
.ca-prod-tile i { color: var(--ca-brand); margin-right: 7px; }
.ca-prod-tile:hover { background: var(--ca-brand-soft); color: var(--ca-brand-deep) !important; transform: translateY(-2px); }
.ca-notice-item { display: flex; align-items: center; gap: 14px; padding: 9px 2px; border-bottom: 1px dashed var(--ca-line); }
.ca-notice-item:last-child { border-bottom: none; }
.ca-notice-time { flex: 0 0 auto; color: var(--ca-muted); font-size: 12.5px; }
.ca-notice-title { flex: 1; color: var(--ca-body); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-notice-title:hover { color: var(--ca-brand); }
.ca-no-data { padding: 40px 0; text-align: center; color: var(--ca-muted); font-size: 13.5px; }

/* ---------- 面包屑 & 头像自适应 ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; background: transparent; }
.breadcrumb-item { display: flex; align-items: center; font-size: 13px; color: var(--ca-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; margin: 0 8px; color: #4c5f87; }
.breadcrumb-item a { color: var(--ca-muted); }
.breadcrumb-item a:hover { color: var(--ca-brand); }
.breadcrumb-item.active { color: var(--ca-brand); }
.ca-avatar { min-width: 32px; width: auto; padding: 0 8px; border-radius: 999px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.ca-profile-avatar { min-width: 62px; width: auto; padding: 0 12px; border-radius: 999px; white-space: nowrap; overflow: hidden; }

/* ---------- V3 页面组件：表格页（service/billing 等） ---------- */
.table-container { width: 100%; }
.table-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.table-filter { display: flex; align-items: center; gap: 10px; }
.table-search { min-width: 260px; }
.search-box { position: relative; }
.search-box .form-control { padding-right: 38px; }
.search-box .search-icon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--ca-muted); cursor: pointer; font-size: 16px; }
.search-box .search-icon:hover { color: var(--ca-brand); }
.table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.table-tools { display: flex; align-items: center; gap: 10px; }
.table-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.table-pageinfo { color: var(--ca-muted); font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; }
.table-pageinfo select { margin: 0 6px; min-height: 32px; padding: 3px 26px 3px 10px; border: 1px solid var(--ca-line-strong); border-radius: 8px; background-color: var(--ca-surface); color: var(--ca-body); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2398a2b8' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.no-data { padding: 46px 0; text-align: center; color: var(--ca-muted); font-size: 13.5px; }
.not-allowed { cursor: not-allowed !important; }
.tablelist th { user-select: none; }
.tablelist th.pointer:hover { color: var(--ca-brand); }
.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.w-xs { min-width: 76px; }

/* 状态徽章（domainstatus） */
.status-pending { background: #fff8e6; color: #d98600; }
.status-active { background: #ecfdf3; color: #12975a; }
.status-suspended { background: #fff1f2; color: #d63349; }
.status-terminated { background: #eef1f6; color: #98a2b8; }
.status-cancelled { background: #f2f4f7; color: #98a2b8; }
.status-transferring { background: #e8f6ff; color: #0ea5e9; }
.status-completed { background: #ecfdf3; color: #12975a; }
.status-processing { background: #e8f6ff; color: #0ea5e9; }
.status-waiting { background: #fff8e6; color: #d98600; }
.status-unpaid { background: #fff1f2; color: #d63349; }
.status-paid { background: #ecfdf3; color: #12975a; }
.status-refunded { background: #eef1f6; color: #98a2b8; }
.status-draft { background: #f2f4f7; color: #98a2b8; }

/* bootstrap-select（v3 皮肤） */
.bootstrap-select { width: auto !important; }
.bootstrap-select .dropdown-toggle {
  min-height: 42px; padding: 8px 34px 8px 14px !important;
  border: 1px solid var(--ca-line-strong) !important; border-radius: 9px !important;
  background: var(--ca-surface) !important; color: var(--ca-body) !important; font-size: 14px;
  box-shadow: none !important; transition: all .22s var(--ca-ease) !important;
}
.bootstrap-select .dropdown-toggle:hover { border-color: #4f6ea3 !important; }
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select.show .dropdown-toggle {
  border-color: var(--ca-brand) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .12) !important; outline: none !important;
}
.bootstrap-select .dropdown-menu {
  border: 1px solid var(--ca-line) !important; border-radius: 10px !important;
  box-shadow: var(--ca-shadow-l) !important; padding: 6px;
}
.bootstrap-select .dropdown-menu li a { border-radius: 7px; padding: 8px 12px; color: var(--ca-body); }
.bootstrap-select .dropdown-menu li a:hover { background: var(--ca-brand-soft); color: var(--ca-brand); }
.bootstrap-select .dropdown-menu li.selected a { background: var(--ca-brand-soft); color: var(--ca-brand-deep); font-weight: 600; }
.bootstrap-select .bs-caret::after { color: var(--ca-muted); }
.text-black-50 { color: rgba(28, 36, 54, .5) !important; }
.text-black-80 { color: rgba(28, 36, 54, .8) !important; }
.fz-12 { font-size: 12px; } .fz-14 { font-size: 14px; }
.align-middle { vertical-align: middle !important; }
.align-text-top { vertical-align: text-top !important; }
.pagination-sm .page-link { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }

/* ---------- V3 补充工具 ---------- */
.w-75 { width: 75% !important; }
.w-xl { min-width: 110px; }
.w-md { min-width: 96px; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.hidden { display: none !important; }
.fs-28 { font-size: 28px; }
.btn-rounded { border-radius: 999px !important; }
.bg-primary { background: linear-gradient(135deg, #22d3ee, #3b82f6) !important; }
.bg-info { background: linear-gradient(135deg, #0ea5e9, #0ea5e9) !important; }
.bg-danger { background: linear-gradient(135deg, #f8506b, #f5304d) !important; }
.bg-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.bg-warning { background: linear-gradient(135deg, #d98600, #f59e0b) !important; }

/* ---------- V3 页面组件：充值 ---------- */
.addfunds-payment {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 10px 14px;
  border: 1.5px solid var(--ca-line-strong); border-radius: 10px;
  background: var(--ca-surface); cursor: pointer; font-size: 13.5px; color: var(--ca-body);
  text-align: center; transition: all .22s var(--ca-ease);
}
.addfunds-payment img { max-height: 24px; max-width: 100%; }
.addfunds-payment:hover { border-color: var(--ca-brand); }
.addfunds-payment.active {
  border-color: var(--ca-brand); background: var(--ca-brand-soft);
  box-shadow: 0 4px 12px rgba(14, 165, 233, .16);
  font-weight: 600; color: var(--ca-brand-deep);
}
.addfunds-payment .hidden { display: none; }

/* ---------- V3 页面组件：安全中心 ---------- */
.security-header {
  border: none !important;
  background: linear-gradient(120deg, #f0f5ff 0%, #e6efff 60%, #eef1ff 100%) !important;
}
.security-header .text-white { color: var(--ca-ink) !important; }
.security-header label { color: var(--ca-muted); font-weight: 400; margin-right: 4px; }
.security-logo {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color: #fff; font-size: 22px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(14, 165, 233, .28);
  border-radius: 50%;
}
.security-username { font-size: 18px; font-weight: 700; color: var(--ca-ink); margin-bottom: 10px; }
.security-strength { display: flex; align-items: center; gap: 12px; }
.security-strength .security-label { color: var(--ca-muted); font-size: 12.5px; }
.security-strength .security-text { color: var(--ca-brand); font-weight: 700; }
.security-strength .progress { width: 150px; }
.security-meta .list-inline-item { font-size: 13px; color: var(--ca-body); margin-right: 26px; }
.novalid {
  min-width: 80px; height: 26px; line-height: 18px;
  background: var(--ca-surface); border: 1px solid var(--ca-line-strong);
  color: var(--ca-muted) !important; border-radius: 999px; font-weight: 500;
}
.security-item {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 4px; border-bottom: 1px dashed var(--ca-line);
}
.security-item:last-child { border-bottom: none; }
.security-item-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.security-item-icon.bg-primary { background: linear-gradient(135deg, #22d3ee, #3b82f6) !important; }
.security-item-icon.bg-info { background: linear-gradient(135deg, #0ea5e9, #0ea5e9) !important; }
.security-item-icon.bg-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.security-item-icon.bg-warning { background: linear-gradient(135deg, #d98600, #f59e0b) !important; }
.security-item-icon.bg-danger { background: linear-gradient(135deg, #f8506b, #f5304d) !important; }
.security-item-info { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.security-item-title { font-size: 15px; font-weight: 700; color: var(--ca-ink); margin: 0 0 4px; }
.security-item-title small { color: #12975a; font-size: 12.5px; font-weight: 500; margin-left: 8px; }
.security-item-desc { color: var(--ca-muted); font-size: 12.5px; }

/* ---------- V3 页面组件：工单会话 ---------- */
.ticket-reply { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px dashed var(--ca-line); }
.ticket-reply:last-child { border-bottom: none; }
.ticket-reply .post-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ca-brand-soft); color: var(--ca-brand); font-weight: 700;
}
.ticket-reply.admin .post-avatar { background: linear-gradient(135deg, #22d3ee, #3b82f6); color: #fff; }
.ticket-reply .message { flex: 1; }
.post-by { font-weight: 600; color: var(--ca-ink); font-size: 14px; }
.post-date { color: var(--ca-muted); font-size: 12px; margin-left: 8px; }
.ticket-reply .content { margin-top: 6px; color: var(--ca-body); font-size: 13.5px; line-height: 1.8; word-break: break-word; }
.ticket-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-control-file { display: block; font-size: 13px; color: var(--ca-muted); }

/* ---------- V3 补充：通用兼容类（内页扫描补齐） ---------- */
.thead-light th { background: #fbfcfe; color: var(--ca-muted); }
.table-centered th, .table-centered td { text-align: center; }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table-bordered th, .table-bordered td { border: 1px solid var(--ca-line); }
th.checkbox, td.checkbox { width: 40px; }
.text-white-50 { color: rgba(255, 255, 255, .65) !important; }
.text-black { color: var(--ca-ink) !important; }
.text-nowrap { white-space: nowrap !important; }
.rounded-sm { border-radius: 6px !important; }
.flex-shrink-1 { flex-shrink: 1 !important; } .flex-grow-1 { flex-grow: 1 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.fr { float: right; }
.bg-gray { background: #eef1f6 !important; } .text-gray { color: var(--ca-muted) !important; }
.control-label { padding-top: 9px; color: var(--ca-ink); font-weight: 500; font-size: 13.5px; }
.btn-default { background: #eef1f6; color: var(--ca-body); border: 1px solid var(--ca-line-strong); }
.btn-default:hover { background: #e8edf5; color: var(--ca-ink); }
.btn-copy { padding: 2px 10px; font-size: 12px; border-radius: 6px; background: var(--ca-brand-soft); color: var(--ca-brand); border: none; cursor: pointer; }
.btn-copy:hover { background: var(--ca-brand); color: #fff; }
.badge-soft-success { background: #ecfdf3; color: #12975a; }
.badge-soft-danger { background: #fff1f2; color: #d63349; }
.badge-soft-warning { background: #fff8e6; color: #d98600; }
.badge-soft-primary { background: var(--ca-brand-soft); color: var(--ca-brand-deep); }
.badge-soft-info { background: #e8f6ff; color: #0ea5e9; }
.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }
.alert-dismissible { padding-right: 44px; }
.offset-3 { margin-left: 0; }
@media (min-width: 768px) { .offset-md-2 { margin-left: 16.6667%; } }
.error-tip { color: var(--ca-red); font-size: 12.5px; }
.error-tip:empty { display: none; }

/* iOS 开关（custom-switch，产品详情等页使用） */
.custom-switch { position: relative; display: inline-block; min-height: 24px; padding-left: 46px; }
.custom-switch .custom-control-input { position: absolute; left: 0; top: 0; width: 38px; height: 22px; opacity: 0; cursor: pointer; z-index: 2; margin: 0; }
.custom-switch .custom-control-label { position: relative; margin-bottom: 0; cursor: pointer; font-weight: 400; color: var(--ca-body); }
.custom-switch .custom-control-label::before {
  content: ""; position: absolute; left: -46px; top: 1px;
  width: 38px; height: 22px; border-radius: 999px;
  background: #41547a; transition: background .22s var(--ca-ease);
}
.custom-switch .custom-control-label::after {
  content: ""; position: absolute; left: -43px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ca-surface); box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .22s var(--ca-ease);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--ca-brand); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(16px); }
.custom-switch-md .custom-control-label::before { width: 44px; height: 25px; }
.custom-switch-md .custom-control-label::after { width: 19px; height: 19px; }
.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(19px); }

/* select2 基础皮肤（内页插件） */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 42px; border: 1px solid var(--ca-line-strong) !important; border-radius: 9px !important;
  background: var(--ca-surface); padding: 5px 10px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ca-brand) !important; box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; color: var(--ca-body); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-dropdown { border: 1px solid var(--ca-line) !important; border-radius: 10px !important; box-shadow: var(--ca-shadow-l); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--ca-brand-soft); color: var(--ca-brand); }
.select2-container--default .select2-results__option--selected { background: var(--ca-brand-soft); color: var(--ca-brand-deep); }

/* 产品详情模块按钮 */
.service_module_button, .restall-btn, .custom-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px; border: 1px solid var(--ca-line-strong);
  background: var(--ca-surface); color: var(--ca-body); font-size: 13px; cursor: pointer;
  transition: all .22s var(--ca-ease); text-decoration: none !important;
}
.service_module_button:hover, .restall-btn:hover, .custom-button:hover { border-color: var(--ca-brand); color: var(--ca-brand); }
.service_module_button.active, .custom-button.active {
  background: var(--ca-brand); border-color: var(--ca-brand); color: #fff;
  box-shadow: 0 6px 16px rgba(14,165,233,.28);
}
.powerimg { width: 16px; height: 16px; vertical-align: -2px; }

/* ==========================================================================
   仪表盘还原（汇来云风格）：顶栏搜索/快捷链 + 余额卡 + 数据概览 + 常用功能
   ========================================================================== */

/* ---------- 顶栏搜索 & 快捷链接 ---------- */
.ca-top-search {
  position: relative; margin-left: 10px; width: 300px; max-width: 32vw;
}
.ca-top-search input {
  width: 100%; height: 38px; padding: 0 40px 0 16px;
  border: 1px solid var(--ca-line-strong); border-radius: 999px;
  background: var(--ca-surface); font-size: 13px; color: var(--ca-body);
  outline: none; transition: all .22s var(--ca-ease);
}
.ca-top-search input:focus { border-color: var(--ca-brand); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.ca-top-search i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--ca-muted); font-size: 13px; }
.ca-top-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.ca-top-links a {
  padding: 7px 13px; border-radius: 8px;
  color: var(--ca-body) !important; font-size: 13.5px;
  text-decoration: none !important; transition: all .2s;
}
.ca-top-links a:hover { background: var(--ca-brand-soft); color: var(--ca-brand-deep) !important; }
@media (max-width: 1100px) { .ca-top-search { display: none; } .ca-top-links { display: none; } }

/* ---------- 仪表盘：资料 + 余额 ---------- */
.ca-dash-user { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ca-dash-user .ca-profile-avatar { min-width: 72px; height: 72px; font-size: 26px; }
.ca-dash-user-info { flex: 1; min-width: 180px; }
.ca-dash-user-info .nm { font-size: 18px; font-weight: 700; color: var(--ca-ink); }
.ca-dash-user-info .nm .badge { margin-left: 8px; vertical-align: 2px; }
.ca-dash-user-info .sub { color: var(--ca-muted); font-size: 12.5px; margin-top: 5px; }
.ca-dash-sec { display: flex; align-items: center; gap: 9px; }
.ca-dash-sec .sec-ico {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(18,183,106,.14); color: #12975a;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ca-dash-sec .lv { font-size: 12.5px; color: var(--ca-muted); }
.ca-dash-sec .lv b { display: block; color: #12975a; font-size: 15px; }
.ca-dash-sec a { color: var(--ca-brand); font-size: 12.5px; }

.ca-balance { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ca-balance .lab { color: var(--ca-muted); font-size: 13px; }
.ca-balance .num { font-size: 34px; font-weight: 800; color: var(--ca-ink); line-height: 1.2; margin: 4px 0 14px; }
.ca-balance-btns { display: flex; gap: 10px; }
.ca-balance-art { flex: 0 0 110px; opacity: .9; }

/* ---------- 数据概览 ---------- */
.ca-stats5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .ca-stats5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ca-stats5 { grid-template-columns: repeat(2, 1fr); } }
.ca-stat5 {
  background: var(--ca-bg); border: 1px solid var(--ca-line);
  border-radius: 12px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: all .22s var(--ca-ease);
}
.ca-stat5:hover { transform: translateY(-3px); box-shadow: var(--ca-shadow); border-color: #b9d4ff; }
.ca-stat5 .lab { color: var(--ca-muted); font-size: 12.5px; }
.ca-stat5 .val { font-size: 25px; font-weight: 800; color: var(--ca-ink); line-height: 1.25; }
.ca-stat5 .sub { color: var(--ca-muted); font-size: 11.5px; margin-top: 2px; }
.ca-stat5 .ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.ca-stat5 .c1 { background: rgba(14,165,233,.14); color: #0ea5e9; }
.ca-stat5 .c2 { background: rgba(99,102,241,.14); color: #6366f1; }
.ca-stat5 .c3 { background: rgba(18,183,106,.14); color: #12b76a; }
.ca-stat5 .c4 { background: rgba(247,144,9,.14); color: #f79009; }
.ca-stat5 .c5 { background: rgba(246,70,93,.14); color: #f6465d; }

/* ---------- 常用功能 ---------- */
.ca-func-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .ca-func-grid { grid-template-columns: repeat(2, 1fr); } }
.ca-func {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--ca-line); background: var(--ca-surface);
  transition: all .22s var(--ca-ease); text-decoration: none !important;
}
.ca-func:hover { border-color: #b9d4ff; box-shadow: var(--ca-shadow); transform: translateY(-2px); }
.ca-func .fi {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ca-func b { display: block; font-size: 13.5px; color: var(--ca-ink); font-weight: 600; }
.ca-func span { display: block; font-size: 11.5px; color: var(--ca-muted); margin-top: 1px; }

/* ---------- 系统公告卡 ---------- */
.ca-notice-card .ca-notice-item { padding: 11px 2px; }
.ca-notice-more { color: var(--ca-muted) !important; font-size: 12.5px; }
.ca-notice-more:hover { color: var(--ca-brand) !important; }
.ca-dash-sect { font-size: 15px; font-weight: 700; color: var(--ca-ink); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.ca-dash-sect::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg,#22d3ee,#3b82f6); }

/* ---------- 侧边栏优化：悬停动效 / 底部服务卡 / 迷你模式适配 ---------- */
.ca-nav-link { height: 40px; }
.ca-nav-link:hover { transform: translateX(2px); }
.ca-nav li.open > .ca-nav-link { box-shadow: inset 0 0 0 1px rgba(14,165,233,.12); }

.ca-side-foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--ca-line); }
.ca-side-serv {
  background: linear-gradient(150deg, #f0f5ff 0%, #e8f2ff 100%);
  border: 1px solid #d8e6ff;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.ca-side-serv-ico {
  width: 38px; height: 38px; margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .3);
}
.ca-side-serv b { display: block; font-size: 13.5px; color: var(--ca-ink); }
.ca-side-serv p { color: var(--ca-muted); font-size: 11.5px; line-height: 1.6; margin: 6px 0 10px; }
.ca-side-serv-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; border-radius: 8px;
  background: #2563eb; color: #fff !important; font-size: 12.5px; font-weight: 600;
  text-decoration: none !important;
  transition: filter .2s;
}
.ca-side-serv-btn:hover { filter: brightness(1.08); }

/* 迷你模式隐藏底部卡 */
body.ca-mini .ca-side-foot { display: none; }
/* 移动端抽屉内显示完整底部卡 */
@media (max-width: 991px) {
  body.ca-mini .ca-side-foot { display: block; }
}

/* ---------- 深色模式（后台 主题设置 一键切换） ---------- */
body.theme-dark {
  --ca-brand: #38bdf8;
  --ca-brand-deep: #0ea5e9;
  --ca-brand-soft: rgba(56, 189, 248, .14);
  --ca-ink: #e8eefb;
  --ca-body: #9fb0ca;
  --ca-muted: #8b9cb9;
  --ca-line: #3a4763;
  --ca-line-strong: #46557a;
  --ca-bg: #1a2338;
  --ca-surface: #232f49;
  --ca-surface-2: #2c3a58;
  --ca-shadow: 0 4px 18px rgba(2, 8, 23, .4);
  --ca-shadow-l: 0 18px 48px rgba(2, 8, 23, .55);
  background: var(--ca-bg);
  color: var(--ca-body);
}
body.theme-dark .ca-topbar { background: rgba(26, 35, 56, .88); }
body.theme-dark .badge-success { background: rgba(18,183,106,.16); color: #34d399; }
body.theme-dark .badge-danger, body.theme-dark .alert-danger { background: rgba(246,70,93,.15); color: #fb7185; }
body.theme-dark .badge-warning, body.theme-dark .alert-warning { background: rgba(247,144,9,.15); color: #fbbf24; }
body.theme-dark .badge-info, body.theme-dark .alert-info, body.theme-dark .alert-primary { background: rgba(14,165,233,.16); color: #38bdf8; }
body.theme-dark .alert-success { background: rgba(18,183,106,.16); color: #34d399; }
body.theme-dark .badge-secondary, body.theme-dark .badge-light { background: #2c3a58; color: #9fb0ca; }
body.theme-dark .table thead th { background: #263354; }
body.theme-dark .table-hover tbody tr:hover { background: rgba(56,189,248,.08); }
body.theme-dark .table-striped tbody tr:nth-of-type(odd) { background: #1f2a44; }
body.theme-dark .btn-light { background: #2c3a58; color: #9fb0ca; }
body.theme-dark .btn-light:hover { background: #35415f; }
body.theme-dark .btn-secondary { background: #2c3a58; color: #9fb0ca; }
body.theme-dark .btn-outline-secondary, body.theme-dark .btn-outline-danger, body.theme-dark .btn-outline-primary { background: transparent; }
body.theme-dark .form-control:disabled, body.theme-dark .form-control[readonly] { background: #1a2338; }
body.theme-dark .input-group-text { background: #1a2338; }
body.theme-dark .security-header { background: linear-gradient(120deg, #24345a 0%, #1e2d4e 60%, #212f52 100%) !important; }
body.theme-dark .ca-side-serv { background: linear-gradient(150deg, #24345a 0%, #1e2d4e 100%); border-color: #314266; }
body.theme-dark .ca-stat5, body.theme-dark .addfunds-payment { background: var(--ca-surface); }
body.theme-dark .custom-switch .custom-control-label::before { background: #46557a; }
body.theme-dark .progress { background: #2c3a58; }

/* ---------- 移动端用户首页优化 ---------- */
.ca-profile-avatar, .ca-avatar { white-space: nowrap; letter-spacing: 0; }
@media (max-width: 767px) {
  .ca-page { padding: 14px 12px 56px; }
  .ca-dash-user { gap: 14px; }
  .ca-dash-user .ca-profile-avatar { min-width: 56px; height: 56px; font-size: 19px; flex-basis: 56px; }
  .ca-dash-user-info .nm { font-size: 16px; }
  .ca-dash-sec {
    width: 100%; margin-top: 4px; padding-top: 12px;
    border-top: 1px dashed var(--ca-line);
  }
  .ca-balance .num { font-size: 27px; }
  .ca-balance-btns .btn { height: 36px; }
  .ca-stats5 { gap: 10px; }
  .ca-stat5 { padding: 12px 14px; }
  .ca-stat5 .val { font-size: 20px; }
  .ca-stat5 .ico { flex: 0 0 38px; width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .ca-func { padding: 11px 12px; }
  .ca-func .fi { flex: 0 0 34px; width: 34px; height: 34px; font-size: 15px; }
  .ca-func b { font-size: 12.5px; }
  .ca-func span { font-size: 11px; }
  .ca-notice-time { flex: 0 0 auto; font-size: 11.5px; }
}

/* ---------- 产品详情页（servicedetail）移动端/显示修复 ---------- */
.server_header_box { overflow: hidden; position: relative; }
.powerimg { border-radius: 50% !important; overflow: hidden; flex: 0 0 auto; }
/* 重装系统按钮不再换行 */
.left_wrap_btn, .restall-btn {
  width: auto !important; min-width: 78px;
  padding: 0 14px !important;
  height: auto !important; line-height: 28px !important;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .server_header_box { padding: 16px !important; }
  .power_box { margin-right: 12px !important; margin-bottom: 10px; }
  .powerimg { width: 42px !important; height: 42px !important; }
  .osbox, .box_left_wrap { max-width: none !important; border-left: none !important; padding-left: 0 !important; }
  .server_header_box .box_left_wrap { margin-bottom: 10px; }
}
@media (max-width: 767px) {
  .server_header_box .d-flex.justify-content-end { flex-wrap: wrap; justify-content: flex-start !important; }
  .server_header_box .d-flex.justify-content-end .btn-group { margin: 4px 6px 4px 0 !important; }
  .server_header_box .d-flex.justify-content-end .btn { margin: 4px 6px 4px 0; }
}

/* ==========================================================================
   Clientarea V4：全分类模板统一层
   作用于控制台、服务、账单、工单、交易、发票、合同、API、认证和详情页面
   ========================================================================== */
:root {
  --ca-brand: #2563eb;
  --ca-brand-deep: #1d4ed8;
  --ca-brand-soft: #eef4ff;
  --ca-line: #e2e8f0;
  --ca-line-strong: #cbd5e1;
  --ca-bg: #f5f7fb;
  --ca-radius: 8px;
  --ca-shadow: 0 1px 3px rgba(15,23,42,.04);
  --ca-shadow-l: 0 12px 28px rgba(15,23,42,.11);
}
.ca-page { padding: 20px 22px 48px; }
.ca-container { max-width: 1480px; margin: 0 auto; padding: 0; }
.ca-topbar { height: 58px; padding: 0 18px; gap: 8px; background: rgba(255,255,255,.96); }
.ca-icon-btn { width: 36px; height: 36px; border-radius: 6px; }
.ca-top-search {
  width: min(300px, 26vw); height: 36px; display: flex; align-items: center;
  padding: 0 12px; border: 1px solid var(--ca-line); border-radius: 6px; background: #f8fafc;
}
.ca-top-search:focus-within { background: #fff; border-color: #93b4f5; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.ca-top-search input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--ca-ink); font-size: 12.5px; }
.ca-top-search i { color: var(--ca-muted); font-size: 13px; }
.ca-top-links { display: flex; align-items: center; gap: 18px; margin-left: 8px; }
.ca-top-links a { color: var(--ca-body); font-size: 13px; white-space: nowrap; }
.ca-top-links a:hover { color: var(--ca-brand); }
.ca-user-btn { border-radius: 6px; }
.ca-avatar { border-radius: 6px; background: #2563eb; box-shadow: none; }
.ca-sidebar { box-shadow: none; }
.ca-side-logo { height: 58px; min-height: 58px; }
.ca-nav { padding: 12px 10px 24px; }
.ca-nav-link { height: 40px; margin-bottom: 2px; border-radius: 6px; }
.ca-nav li.active > .ca-nav-link::before { left: -10px; width: 3px; background: #2563eb; }
.ca-sub a { border-radius: 5px; }
.ca-side-serv { border-radius: 8px; box-shadow: none; }
.ca-side-serv-ico, .ca-side-serv-btn { border-radius: 6px; }
.page-title-box { min-height: 46px; padding: 0 0 14px; }
.page-title-box h4 { font-size: 20px !important; font-weight: 650; letter-spacing: 0; }
.page-title-box .breadcrumb { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.card { margin-bottom: 16px; border-radius: 8px; box-shadow: var(--ca-shadow); }
.card-header { min-height: 48px; padding: 13px 18px; border-radius: 8px 8px 0 0 !important; }
.card-header:first-child { border-radius: 8px 8px 0 0 !important; }
.card-title { margin-bottom: 0; font-size: 15px; font-weight: 650; }
.card-body { padding: 18px; }
.card-body + .card-body { border-top: 1px solid var(--ca-line); }
.card-footer { padding: 13px 18px; background: #fff; border-top: 1px solid var(--ca-line); border-radius: 0 0 8px 8px; }
.btn { min-height: 36px; padding: 7px 15px; border-radius: 6px; font-size: 13px; box-shadow: none; }
.btn-sm { min-height: 30px; padding: 4px 10px; border-radius: 5px; font-size: 12px; }
.btn-lg { min-height: 42px; padding: 9px 20px; border-radius: 6px; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #2563eb !important; border: 1px solid #2563eb !important; box-shadow: none !important; transform: none;
}
.btn-primary:hover, .btn-primary:focus { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.btn-success { background: #16a34a; border: 1px solid #16a34a; }
.btn-danger { background: #e11d48; border: 1px solid #e11d48; }
.btn-warning { background: #d97706; border: 1px solid #d97706; }
.btn-group .btn:first-child { border-radius: 6px 0 0 6px; }
.btn-group .btn:last-child { border-radius: 0 6px 6px 0; }
.form-group { margin-bottom: 15px; }
.form-control { min-height: 40px; padding: 7px 12px; border-color: var(--ca-line-strong); border-radius: 6px; font-size: 13px; }
.form-control:hover { border-color: #94a3b8; }
.form-control:focus { border-color: #7aa2ef; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.input-group-text { min-height: 40px; border-color: var(--ca-line-strong); background: #f8fafc; }
.custom-select, .selectpicker + .dropdown-toggle, .bootstrap-select > .dropdown-toggle { min-height: 40px; border-radius: 6px !important; }
label { margin-bottom: 5px; font-size: 13px; }
.table-container { width: 100%; }
.table-header {
  min-height: 54px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 0 0 14px; border-bottom: 0;
}
.table-filter, .table-search { min-width: 0; }
.table-search .row, .table-filter .row { margin: 0; }
.table-search [class*="col"], .table-filter [class*="col"] { padding: 0; }
.table-search .form-control, .table-filter .form-control { min-width: 160px; }
.search-box .search-icon { top: 50%; transform: translateY(-50%); color: var(--ca-muted); }
.table-responsive { width: 100%; overflow-x: auto; border: 1px solid var(--ca-line); border-radius: 7px; scrollbar-width: thin; }
.table { min-width: 760px; margin-bottom: 0; }
.table thead th {
  height: 46px; padding: 11px 13px; border-bottom: 1px solid var(--ca-line) !important;
  background: #f8fafc !important; color: #64748b; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.table tbody td { padding: 12px 13px; border-top: 1px solid var(--ca-line); vertical-align: middle; font-size: 13px; }
.table tbody tr:first-child td { border-top: 0; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: #f8fbff; }
.table td .btn + .btn, .table td a + a { margin-left: 6px; }
.table .checkbox { width: 42px; }
.table .custom-control { min-height: 20px; margin: 0 !important; }
.table-footer {
  min-height: 54px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 14px; color: var(--ca-muted); font-size: 12.5px;
}
.table-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pagination { margin: 0; }
.pagination .page-link { min-width: 30px; height: 30px; padding: 4px 8px; margin: 0 2px; border-radius: 5px; text-align: center; }
.pagination .page-item.active .page-link { box-shadow: none; }
.badge { padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.badge-pill { border-radius: 999px; }
.status { white-space: nowrap; }
.alert { padding: 11px 14px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; }
.alert-info { border-color: #bfdbfe; }
.alert-success { border-color: #bbf7d0; }
.alert-warning { border-color: #fde68a; }
.alert-danger { border-color: #fecdd3; }
.nav-tabs-custom { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
.nav-tabs-custom::-webkit-scrollbar { display: none; }
.nav-tabs-custom .nav-item .nav-link { padding: 10px 14px; white-space: nowrap; }
.modal-content { border: 1px solid var(--ca-line); border-radius: 8px; }
.dropdown-menu { border-radius: 7px; }
.no-data, .nodata, .empty-data {
  min-height: 180px; display: flex; align-items: center; justify-content: center;
  color: var(--ca-muted); font-size: 13px; text-align: center;
}
/* 账户资料等长表单 */
form > .card > .card-body.w-75 { width: 100% !important; max-width: 980px; margin-left: auto !important; margin-right: auto !important; padding: 20px 24px !important; }
form > .card > .card-body.w-75 .card-title { padding-bottom: 11px; border-bottom: 1px solid var(--ca-line); }
/* 服务详情通用块 */
.server_header_box, .box_shadow, .product-detail-card, .service-detail-card { border-radius: 8px !important; box-shadow: var(--ca-shadow) !important; }
.server_header_box { border: 1px solid var(--ca-line); background: #fff; }
/* 富文本、知识库、公告、工单回复 */
.markdown-body, .ticket-reply, .news-content, .kb-content { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; border-radius: 6px; }
.ca-footer { padding: 14px 22px; }
@media (max-width: 1199px) {
  .ca-top-links { display: none; }
  .ca-top-search { width: min(280px, 34vw); }
}
@media (max-width: 991px) {
  .ca-page { padding: 14px 12px 44px; }
  .ca-container { width: 100%; }
  .ca-topbar { padding: 0 10px; }
  .ca-top-search { display: none; }
  .page-title-box { min-height: 42px; padding-bottom: 11px; }
  .page-title-box h4 { font-size: 18px !important; }
  .page-title-right { display: none; }
  .card { margin-bottom: 12px; }
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; }
  .table-header { align-items: stretch; padding-bottom: 10px; }
  .table-filter, .table-search { width: 100%; }
  .table-filter .row > .col, .table-search .row > [class*="col"] { width: 100%; max-width: none; flex-basis: 100%; }
  .table-header .btn, .table-header .form-control, .table-header .bootstrap-select { max-width: 100%; }
  .table-footer { align-items: flex-start; flex-direction: column; }
  .table-pagination { width: 100%; justify-content: space-between; }
  form > .card > .card-body.w-75 { padding: 16px !important; }
  .server_header_box { padding: 14px !important; }
}
@media (max-width: 575px) {
  .ca-page { padding-left: 10px; padding-right: 10px; }
  .ca-topbar { height: 54px; }
  .ca-top-right { gap: 2px; }
  .ca-user-btn { padding-right: 4px; }
  .card-body { padding: 12px; }
  .table-header { gap: 8px; }
  .table-header .btn { width: auto; }
  .table-responsive { margin: 0; border-radius: 6px; }
  .table { min-width: 680px; }
  .table thead th { height: 42px; padding: 9px 10px; }
  .table tbody td { padding: 10px; }
  .table-pageinfo { line-height: 1.8; }
  .pagination .page-link { min-width: 28px; height: 28px; }
  .modal-dialog { margin: 10px; }
  .btn:not(.btn-block) { max-width: 100%; }
  .row > [class*="col"] { min-width: 0; }
}