/* QTrust admin theme - 用户指定配色体系 */
:root {
  --primary: #1054ff;
  --primary-light: #4a7dff;
  --primary-dark: #0a3fcc;
  --primary-bg: #eef3ff;
  --bg: #f7faff;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f2f6ff;
  --sidebar-active: #e7eeff;
  --text: #34495e;
  --text-muted: #9aabb8;
  --text-secondary: #34495e;
  --border: #dde6eb;
  --card-shadow: 0 1px 3px rgba(52,73,94,.06);
  --radius: 4px;
  --danger: #ed5565;
  --warning: #f8ac59;
  --success: #1ab394;
  --danger-bg: #fdeaec;
  --warning-bg: #fdf3e3;
  --success-bg: #e6f7f4;
  --control-border: #cfd9e1;
  /* Element Plus theme override */
  --el-color-primary: #1054ff;
  --el-color-primary-light-3: #5685ff;
  --el-color-primary-light-5: #88a9ff;
  --el-color-primary-light-7: #b9cdff;
  --el-color-primary-light-8: #d2e0ff;
  --el-color-primary-light-9: #eef3ff;
  --el-color-primary-dark-2: #0a3fcc;
  --el-color-danger: #ed5565;
  --el-color-danger-light-3: #f27d89;
  --el-color-danger-light-5: #f5a3ab;
  --el-color-danger-light-7: #f9c9cf;
  --el-color-danger-light-8: #fbdce0;
  --el-color-danger-light-9: #fdeaec;
  --el-color-success: #1ab394;
  --el-color-success-light-3: #57c7b0;
  --el-color-success-light-5: #8dd9c9;
  --el-color-success-light-7: #c2ebe2;
  --el-color-success-light-8: #d8f2ed;
  --el-color-success-light-9: #e6f7f4;
  --el-color-warning: #f8ac59;
  --el-color-warning-light-3: #fac284;
  --el-color-warning-light-5: #fcd4a7;
  --el-color-warning-light-7: #fde6ca;
  --el-color-warning-light-8: #feefdd;
  --el-color-warning-light-9: #fdf3e3;
  --el-text-color-primary: #34495e;
  --el-text-color-regular: #34495e;
  --el-text-color-secondary: #9aabb8;
  --el-text-color-placeholder: #b5c2cc;
  --el-border-color: #dde6eb;
  --el-border-color-light: #dde6eb;
  --el-border-color-lighter: #e7eef3;
  --el-border-color-extra-light: #f0f5f8;
  --el-fill-color-blank: #ffffff;
  --el-border-radius-base: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text); }
body { background: var(--bg); }

/* IconPark local icon */
.ip-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: middle; flex-shrink: 0; }
.ip-icon svg { display: block; }

/* ===== Login ===== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a3fcc 0%, #1054ff 55%, #4a7dff 100%);
}
.login-card {
  width: 400px; background: #fff; border-radius: 16px; padding: 48px 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.login-logo { margin-bottom: 32px; display: flex; align-items: center; }
.login-logo img { height: 36px; display: block; }
.login-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.login-sub { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; }

/* ===== Main Layout ===== */
.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 220px; background: var(--sidebar-bg);z-index: 99; -webkit-box-shadow: 6px 0 14px rgba(237, 241, 248, .69); box-shadow: 6px 0 14px rgba(237, 241, 248, .69);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-logo {
  padding: 14px 20px;
  display: flex; align-items: center;
}
.sidebar-logo img { height: 28px; display: block; }
.sidebar-menu { padding: 12px 0; flex: 1; overflow-y: auto; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: var(--text); cursor: pointer;
  font-size: 14px; transition: all .15s; border-left: 3px solid transparent;
}
.menu-item:hover { background: var(--sidebar-hover); }
.menu-item.active { background: var(--sidebar-active); border-left-color: var(--primary); color: var(--primary); font-weight: 500; }
.menu-item .icon { width: 18px; text-align: center; color: var(--text-muted); }
.menu-item.active .icon { color: var(--primary); }
.menu-group-title { padding: 12px 20px 4px; font-size: 12px; color: var(--text-muted); }
.menu-sub { padding-left: 20px; }

/* Main area */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Topbar */
.topbar {
  height: 68px; background: #fff;
  display: flex; align-items: center; padding: 0 24px; justify-content: space-between;
}
.topbar-left { display: flex; align-items: center; gap: 24px; }
.topbar-balance { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--primary-bg); border-radius: 20px; font-size: 13px; }
.topbar-balance b { color: var(--primary); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-right .action { cursor: pointer; padding: 6px; border-radius: 50%; }
.topbar-right .action:hover { background: var(--bg); }
.topbar-user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.topbar-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }

/* Content */
.content { padding: 24px; flex: 1; overflow-y: auto; }

/* Cards */
.card { background: #fff; border-radius: var(--radius);padding: 24px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }

/* Dashboard grid */
.dash-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.dash-full { grid-column: 1 / -1; }
.stat-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.stat-icon.blue { background: var(--primary-bg); color: var(--primary); }
.stat-icon.green { background: var(--success-bg); color: var(--success); }
.stat-icon.orange { background: var(--warning-bg); color: var(--warning); }
.stat-icon.purple { background: var(--primary-bg); color: var(--primary); }
.stat-icon.red { background: var(--danger-bg); color: var(--danger); }
.stat-icon.gray { background: #f0f3f6; color: var(--text-muted); }
.stat-num { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 13px; color: var(--text-muted); }

/* Quick links grid */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quick-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .15s; }
.quick-item:hover { border-color: var(--primary); box-shadow: var(--card-shadow); }
.quick-item .label { font-size: 14px; font-weight: 500; }
.quick-item .count { font-size: 20px; font-weight: 700; color: var(--primary); }
.quick-item .arrow { color: var(--text-muted); font-size: 12px; }
.quick-item .zero { color: var(--text-muted); }

/* Balance card */
.balance-card { display: flex; flex-direction: column; gap: 16px; }
.balance-amount { font-size: 24px; font-weight: 700; }
.balance-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.balance-actions button { padding: 6px 14px; font-size: 13px; }

/* Topbar area (design mockup) */
.section-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }

/* Purchase form */
.form-section { margin-bottom: 24px; }
.form-section-title { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* Table enhancements */
.search-bar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
.search-bar .el-input { width: 260px; }
.search-bar .el-date-editor--daterange.el-input,
.search-bar .el-date-editor--daterange.el-input__wrapper,
.search-bar .el-date-editor.el-input__wrapper,
.search-bar .el-date-editor.el-input,
.search-bar .el-range-editor.el-input__wrapper,
.search-bar .el-date-editor.el-input__wrapper { width: 320px !important; max-width: 320px !important; }

/* ===== 滑动验证码 ===== */
.slide-cap { display: inline-block; }
.slide-cap-img { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.slide-cap-bg { display: block; width: 100%; height: 100%; }
.slide-cap-piece { position: absolute; top: 0; left: 0; pointer-events: none; }
.slide-cap-mask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; }
.slide-cap-mask.ok { background: rgba(26,179,148,0.5); }
.slide-cap-mask.fail { background: rgba(237,85,101,0.5); }
.slide-cap-track { position: relative; height: 40px; background: #f0f2f5; border-radius: 4px; margin-top: 4px; border: 1px solid var(--border); }
.slide-cap-progress { position: absolute; left: 0; top: 0; height: 100%; background: rgba(16,84,255,0.15); border-radius: 4px; }
.slide-cap-handle { position: absolute; top: 0; width: 40px; height: 40px; background: var(--primary); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; user-select: none; }
.slide-cap-tip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); pointer-events: none; }

/* ===== PEM 查看弹窗 ===== */
.pem-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.pem-tab { padding: 8px 16px; font-size: 13px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pem-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.pem-raw-wrap { position: relative; background: #f8f9fb; border: 1px solid var(--border); border-radius: 6px; padding: 16px; max-height: 400px; overflow-y: auto; }
.pem-raw { margin: 0; font-family: monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--text); }
.pem-copy { position: absolute; top: 12px; right: 12px; }
.pem-sec-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.pem-row { display: flex; margin-bottom: 8px; font-size: 13px; }
.pem-label { width: 130px; flex-shrink: 0; color: var(--text-muted); }
.pem-hex { font-family: monospace; font-size: 12px; word-break: break-all; background: #f8f9fb; padding: 8px; border-radius: 4px; flex: 1; }
.pem-openssl { margin: 0; font-family: monospace; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; background: #f8f9fb; padding: 8px; border-radius: 4px; flex: 1; max-height: 300px; overflow-y: auto; }
.mono { font-family: monospace; font-size: 12px; }

/* 表单提示气泡 */
.f-tip-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); color: #fff; font-size: 11px; cursor: help; position: relative; flex-shrink: 0; }
.f-tip-icon:hover .f-tip-box { opacity: 1; visibility: visible; transform: translateY(0); }
.f-tip-box { position: absolute; top: 22px; left: 50%; transform: translateX(-50%) translateY(-4px); background: #2c3e50; color: #fff; padding: 10px 14px; border-radius: 6px; font-size: 12px; line-height: 1.6; white-space: normal; width: 280px; z-index: 999; opacity: 0; visibility: hidden; transition: all .2s; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.f-tip-box::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #2c3e50; border-top: 0; }

/* 6位支付密码分段输入 */
.pay-pin-input { display: flex; gap: 8px; }
.pay-pin-input .pin-cell { width: 40px; height: 44px; text-align: center; font-size: 20px; border: 1px solid var(--border); border-radius: 6px; outline: none; background: #fff; color: var(--text); transition: border-color .2s; }
.pay-pin-input .pin-cell:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(16,84,255,.12); }
.pay-pin-input .pin-cell.filled { border-color: var(--primary); }

/* 个人中心安全设置卡片 */
.profile-layout { display: flex; gap: 16px; flex-wrap: wrap; }
.profile-left { flex: 0 0 380px; }
.profile-right { flex: 1; min-width: 400px; }

/* Status tag colors */
.el-tag[data-status="issued"] { --el-tag-bg-color: var(--success-bg); --el-tag-text-color: var(--success); --el-tag-border-color: #bfe8e1; }
.el-tag[data-status="auditing"], .el-tag[data-status="domain_verifing"], .el-tag[data-status="issuing"], .el-tag[data-status="wait_verify"] { --el-tag-bg-color: var(--warning-bg); --el-tag-text-color: #d18a3a; --el-tag-border-color: #f8d9ae; }
.el-tag[data-status="canceled"], .el-tag[data-status="revoked"], .el-tag[data-status="expired"], .el-tag[data-status="rejected"], .el-tag[data-status="failed"] { --el-tag-bg-color: var(--danger-bg); --el-tag-text-color: var(--danger); --el-tag-border-color: #f7c5cc; }
.el-tag[data-status="need_renew"] { --el-tag-bg-color: var(--primary-bg); --el-tag-text-color: var(--primary); --el-tag-border-color: #c5d6ff; }
.el-tag[data-status="archived"] { --el-tag-bg-color: #f0f3f6; --el-tag-text-color: var(--text-muted); --el-tag-border-color: var(--border); }

/* Utility */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-green { color: var(--success); }
.text-sm { font-size: 12px; }
.text-lg { font-size: 16px; font-weight: 600; }
.text-xl { font-size: 20px; font-weight: 700; }

/* Purchase page right side (overview panel) */
.overview-panel { width: 320px; flex-shrink: 0; }
.overview-panel .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.overview-panel .row:last-child { border-bottom: none; }
.overview-panel .row .label { color: var(--text-muted); }
.overview-panel .price { font-size: 22px; font-weight: 700; color: var(--primary); }
.overview-panel .total { font-size: 20px; font-weight: 700; }

/* Page layout: two column (form + overview) */
.page-two-col { display: flex; gap: 20px; }
.page-two-col .main-col { flex: 1; min-width: 0; }

/* ============================================================
   图一 购买页 (product selection)
   ============================================================ */
.page-head { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--text); }
.panel-card { background: #fff; border-radius: var(--radius); padding: 24px 28px; margin-bottom: 16px; }
.block-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 16px; }

/* Brand tabs */
.brand-tabs { display: flex; gap: 40px; border-bottom: 1px solid var(--border); margin: -0 0 24px; }
.brand-tab { display: flex; align-items: center; gap: 8px; padding: 10px 4px 14px; font-size: 15px; color: var(--text-secondary); cursor: pointer; position: relative; font-weight: 500; }
.brand-tab.active { color: var(--primary); font-weight: 600; }
.brand-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); border-radius: 2px; }
.brand-logo { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; }
.brand-logo.itrust { background: linear-gradient(135deg,var(--primary-light),var(--primary)); }
.brand-logo.trustasia { background: var(--danger); font-size: 10px; }
/* 购买页品牌图片 icon */
.brand-tab .brand-img { width: 20px; height: 20px; object-fit: contain; display: block; }
/* 表格/详情中的品牌小 icon */
.brand-icon-sm { height: 16px; width: auto; vertical-align: -3px; margin-right: 6px; }

/* Cert type table */
.cert-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cert-thead { display: grid; grid-template-columns: 350px 1fr 200px 160px; padding: 12px 20px; background: #f7f9fb; font-size: 13px; color: var(--text-muted); }
.cert-row { display: grid; grid-template-columns: 350px 1fr 200px 160px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.cert-row:first-of-type { border-top: none; }
.cert-row:hover { background: var(--primary-bg); }
.cert-row.active { background: var(--primary-bg); }
.cert-radio { width: 16px; height: 16px; border: 2px solid var(--control-border); border-radius: 50%; margin-right: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cert-row.active .cert-radio { border-color: var(--primary); }
.cert-row.active .cert-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.cert-name { display: flex; align-items: center; }
.cert-name b { font-size: 14px; font-weight: 500; color: var(--text); }
.cert-name .en { font-size: 13px; color: var(--text-muted); margin-left: 8px; }
.cert-demo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--success); }
.cert-stars { color: var(--warning); font-size: 15px; letter-spacing: 2px; }
.cert-price { font-size: 14px; color: var(--text); }
.cert-price b { font-weight: 600; font-size: 15px; }

/* Domain type */
.domain-types { display: flex; gap: 32px; }
.domain-type { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.domain-type.disabled { color: var(--control-border); cursor: not-allowed; }
.domain-dot { width: 15px; height: 15px; border: 2px solid var(--control-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.domain-type.active { color: var(--primary); font-weight: 500; }
.domain-type.active .domain-dot { border-color: var(--primary); }
.domain-type.active .domain-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

/* Year select with discount badge */
.year-wrap { display: inline-flex; align-items: flex-start; position: relative; }
.year-wrap .el-select { width: 96px; }
.discount-badge { position: absolute; top: -10px; right: -26px; background: var(--danger); color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 3px; font-weight: 500; }

/* Pay bar */
.pay-bar { background: var(--primary-bg); border-radius: var(--radius); padding: 20px 28px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-bottom: 16px; }
.pay-total { text-align: right; }
.pay-total .line1 { font-size: 14px; color: var(--text-secondary); }
.pay-total .amount { color: var(--danger); font-size: 24px; font-weight: 700; margin-left: 6px; }
.pay-total .amount .yuan { font-size: 15px; font-weight: 500; }
.pay-total .line2 { font-size: 13px; color: var(--text-muted); text-decoration: line-through; margin-top: 2px; }
.btn-create { min-width: 110px; height: 38px; font-size: 14px; }

/* ============================================================
   图二 订单信息填写页
   ============================================================ */
.form-page { display: flex; gap: 16px; align-items: flex-start; }
.form-page .form-main { flex: 1; min-width: 0; background: #fff; border-radius: var(--radius); padding: 28px 32px; }
.form-page .form-side { width: 340px; flex-shrink: 0; }
.f-row { display: flex; align-items: flex-start; margin-bottom: 22px; }
.f-label { width: 148px; flex-shrink: 0; padding-top: 7px; font-size: 14px; color: var(--text); text-align: right; padding-right: 16px; }
.f-label.req::before { content: '*'; color: var(--danger); margin-right: 2px; }
.f-control { flex: 1; min-width: 0; }
.f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.radio-line { display: inline-flex; align-items: center; gap: 8px; margin-right: 28px; font-size: 14px; cursor: pointer; color: var(--text); }
.radio-dot { width: 15px; height: 15px; border: 2px solid var(--control-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-line.active { color: var(--primary); }
.radio-line.active .radio-dot { border-color: var(--primary); }
.radio-line.active .radio-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.collapse-bar { background: var(--bg); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; color: var(--text-secondary); }
.divider-text { display: flex; align-items: center; gap: 16px; margin: 28px 0 24px; color: var(--text-secondary); font-size: 14px; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pick-row { display: flex; gap: 8px; }
.pick-row .el-select { flex: 1; }
.icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); background: #fff; }
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.side-info-title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 18px; }
.side-info-title::before, .side-info-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.side-info .si-row { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.side-info .si-row b { color: var(--text); font-weight: 500; }

/* ============================================================
   图四 支付页
   ============================================================ */
.pay-table { width: 100%; border-collapse: collapse; background: #fff; }
.pay-table th { background: #f7f9fb; font-size: 13px; color: var(--text-muted); font-weight: 400; padding: 14px 12px; text-align: left; white-space: nowrap; }
.pay-table td { padding: 18px 12px; font-size: 14px; border-top: 1px solid var(--border); }
.pay-table .pay-amount { color: var(--warning); font-weight: 600; }
.coupon-row { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
.coupon-row .el-input { width: 240px; }
.coupon-tip { font-size: 13px; color: var(--text-muted); }
.balance-line { font-size: 14px; margin-bottom: 12px; color: var(--text); }
.balance-line .money { font-weight: 600; }
.balance-line a { color: var(--primary); margin: 0 4px; cursor: pointer; }
.pay-method-box { width: 150px; height: 42px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: #fff; font-size: 14px; margin-bottom: 20px; }
.pay-method-box.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); color: var(--primary); }
.pay-sub-title { font-size: 14px; color: var(--text); margin: 20px 0 12px; }
.pay-footer { background: var(--primary-bg); border-radius: var(--radius); padding: 20px 28px; text-align: right; margin-top: 8px; }
.pay-footer .invoice-tip { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.pay-footer .invoice-tip a { color: var(--primary); cursor: pointer; }
.pay-actions { margin-top: 20px; display: flex; justify-content: flex-end; }

/* ============================================================
   图三 订单详情页
   ============================================================ */
.detail-head { background: #fff; border-radius: var(--radius); padding: 24px 28px; margin-bottom: 16px; }
.detail-head h2 { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; font-size: 13px; }
.detail-meta .m-row { display: flex; padding: 3px 0; }
.detail-meta .m-label { color: var(--text-muted); width: 84px; flex-shrink: 0; }
.detail-meta .m-val { color: var(--text); }
.detail-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.verify-card { background: #fff; border-radius: var(--radius); padding: 20px 28px; margin-bottom: 16px; }
.verify-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.verify-table { width: 100%; border-collapse: collapse; }
.verify-table th { background: #f7f9fb; font-size: 13px; color: var(--text-muted); font-weight: 400; padding: 12px 16px; text-align: left; }
.verify-table td { padding: 14px 16px; font-size: 13px; border-top: 1px solid var(--border); }
.v-success { color: var(--success); display: inline-flex; align-items: center; gap: 6px; }
.v-cname { color: var(--danger); }
.v-link { color: var(--primary); cursor: pointer; }
.v-copy { color: var(--primary); cursor: pointer; margin-left: 6px; vertical-align: middle; }
.detail-tabs { display: flex; gap: 32px; background: #fff; border-radius: var(--radius) var(--radius) 0 0; padding: 0 28px; border-bottom: 1px solid var(--border); }
.detail-tab { padding: 14px 2px; font-size: 14px; color: var(--text-secondary); cursor: pointer; position: relative; }
.detail-tab.active { color: var(--primary); font-weight: 500; }
.detail-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.detail-body { background: #fff; border-radius: 0 0 var(--radius) var(--radius); padding: 28px; }
.section-divider { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--text-secondary); margin: 28px 0 24px; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.issue-form-wrap { background: #fff; border-radius: var(--radius); padding: 24px 28px; }
.issue-form-wrap .issue-form .el-form-item { margin-bottom: 18px; }

/* Step timeline */
.step-line { display: flex; align-items: flex-start; padding: 12px 40px 8px; }
.step-node { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.step-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--control-border); background: #fff; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.step-node.done .step-circle, .step-node.current .step-circle { border-color: var(--primary); color: var(--primary); }
.step-label { font-size: 13px; color: var(--text-muted); margin-top: 8px; white-space: nowrap; }
.step-node.done .step-label, .step-node.current .step-label { color: var(--primary); }
.step-time { font-size: 12px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.step-bar { flex: 1; height: 2px; background: var(--control-border); margin: 10px 8px 0; }
.step-bar.done { background: var(--primary); }

/* PKI block */
.pki-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; font-size: 13px; }
.pki-head .pki-title { font-weight: 500; color: var(--text); }
.pki-head a { color: var(--primary); cursor: pointer; }
.pki-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.pki-col .pki-row { display: flex; font-size: 13px; padding: 4px 0; }
.pki-col .pki-label { color: var(--text-muted); width: 96px; flex-shrink: 0; }

/* misc detail helpers */
.tag-yes { background: var(--success-bg); color: var(--success); border-radius: 3px; padding: 1px 7px; font-size: 12px; }
.btn-ghost { border: 1px solid var(--border); background: #fff; color: var(--text-secondary); border-radius: var(--radius); padding: 7px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn-ghost:hover { color: var(--primary); border-color: var(--primary); }
.btn-primary-sm { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 8px 16px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn-primary-sm:hover { background: var(--primary-light); }

/* ============================================================
   Element Plus 组件全局主题（统一所有列表/表单页配色）
   ============================================================ */
/* 表格 */
.el-table { --el-table-border-color: var(--border); --el-table-header-bg-color: #f7f9fb;
  --el-table-header-text-color: var(--text-muted); --el-table-row-hover-bg-color: var(--primary-bg);
  --el-table-text-color: var(--text); color: var(--text); }
.el-table th.el-table__cell { background: #f7f9fb !important; color: var(--text-muted); font-weight: 500; }
.el-table .el-table__cell { border-bottom-color: var(--border); }
.el-table--border, .el-table--border .el-table__cell { border-color: var(--border); }
.el-table--group::after, .el-table--border::after, .el-table::before { background-color: var(--border); }

/* 输入框/选择器 */
.el-input__wrapper, .el-textarea__inner { box-shadow: 0 0 0 1px var(--border) inset; border-radius: var(--radius); }
.el-input__wrapper:hover, .el-textarea__inner:hover { box-shadow: 0 0 0 1px var(--primary-light) inset; }
.el-input.is-focus .el-input__wrapper, .el-input__wrapper.is-focus,
.el-select .el-input.is-focus .el-input__wrapper { box-shadow: 0 0 0 1px var(--primary) inset !important; }
.el-input__inner { color: var(--text); }
.el-input__inner::placeholder { color: var(--el-text-color-placeholder); }

/* 按钮 */
.el-button { border-radius: var(--radius); }
.el-button--primary { --el-button-bg-color: var(--primary); --el-button-border-color: var(--primary);
  --el-button-hover-bg-color: var(--primary-light); --el-button-hover-border-color: var(--primary-light);
  --el-button-active-bg-color: var(--primary-dark); --el-button-active-border-color: var(--primary-dark); }
.el-button--danger { --el-button-bg-color: var(--danger); --el-button-border-color: var(--danger);
  --el-button-hover-bg-color: #f17280; --el-button-hover-border-color: #f17280;
  --el-button-active-bg-color: #d94454; --el-button-active-border-color: #d94454; }
.el-button--success { --el-button-bg-color: var(--success); --el-button-border-color: var(--success);
  --el-button-hover-bg-color: #35bfaa; --el-button-hover-border-color: #35bfaa; }
.el-button--warning { --el-button-bg-color: var(--warning); --el-button-border-color: var(--warning);
  --el-button-hover-bg-color: #f9bb73; --el-button-hover-border-color: #f9bb73; }
.el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(.el-button--warning) { color: var(--text); }
.el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(.el-button--warning):hover { color: var(--primary); border-color: var(--primary-light); background: var(--primary-bg); }
.el-button.is-link.el-button--primary, .el-link.el-link--primary { --el-link-text-color: var(--primary); --el-link-hover-text-color: var(--primary-light); }

/* Tabs */
.el-tabs__item { color: var(--text-secondary); }
.el-tabs__item.is-active { color: var(--primary); }
.el-tabs__active-bar { background-color: var(--primary); }
.el-tabs__nav-wrap::after { background-color: var(--border); }
.el-tabs__item:hover { color: var(--primary); }

/* 分页 */
.el-pagination { color: var(--text-secondary); --el-pagination-hover-color: var(--primary); }
.el-pagination .el-pager li, .el-pagination button { border-radius: var(--radius); color: var(--text-secondary); }
.el-pagination .el-pager li.is-active { background: var(--primary); color: #fff; }

/* 标签 */
.el-tag { border-radius: 3px; }

/* 单选/复选 */
.el-radio__input.is-checked .el-radio__inner, .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: var(--primary); background: var(--primary); }
.el-radio__input.is-checked + .el-radio__label, .el-checkbox__input.is-checked + .el-checkbox__label { color: var(--primary); }
.el-radio__inner, .el-checkbox__inner { border-color: var(--control-border); }

/* 开关 */
.el-switch.is-checked .el-switch__core { border-color: var(--primary); background-color: var(--primary); }

/* 下拉选择 */
.el-select-dropdown { border-color: var(--border); }
.el-select-dropdown__item.is-hovering, .el-select-dropdown__item.hover { background: var(--primary-bg); }
.el-select-dropdown__item.is-selected { color: var(--primary); font-weight: 600; }

/* 日期面板等弹层 */
.el-popper.is-light { border: 1px solid var(--border); }
.el-picker-panel { color: var(--text); }
.el-date-table td.today .el-date-table-cell__text { color: var(--primary); }
.el-date-table td.current:not(.disabled) .el-date-table-cell__text { background: var(--primary); }

/* 对话框/消息 */
.el-dialog { border-radius: 8px; }
.el-dialog__title { color: var(--text); font-weight: 600; }
.el-message { border-radius: var(--radius); }
/* 续费弹窗：透明遮罩，保留订单详情背景 */
.renew-transparent-mask { background: transparent !important; }

/* 卡片/空状态/加载 */
.el-empty__description p { color: var(--text-muted); }
.el-card { border-color: var(--border); --el-card-text-color: var(--text); }

/* 表格内下拉触发器与禁用态文字 */
.el-table .el-button.is-link { font-size: 13px; }

/* ============================================================
   消息列表页
   ============================================================ */
.msg-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; align-items: flex-start; cursor: pointer; transition: border-color .15s, background .15s; }
.msg-item:hover { border-color: var(--primary-light); }
.msg-item.unread { background: var(--primary-bg); border-color: #d2e0ff; }
.msg-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-icon.warning { background: var(--warning-bg); color: var(--warning); }
.msg-icon.danger { background: var(--danger-bg); color: var(--danger); }
.msg-icon.success { background: var(--success-bg); color: var(--success); }
.msg-icon.primary { background: var(--primary-bg); color: var(--primary); }
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 14px; font-weight: 600; color: var(--text); }
.unread .msg-title::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 8px; vertical-align: 2px; }
.msg-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.msg-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; padding-top: 2px; }