/* ==========================================================================
   企飞通行证 & 资产中心 & 运营中台 · 全站统一视觉样式 (Unified Design System v2.0)
   与 gxqifei.com 主站、AI数字人、AI生图共享同一套品牌色与圆角/阴影规范
   ========================================================================== */
:root{
  --ink:#0f172a;
  --ink2:#475569;
  --ink3:#64748b;
  --line:#e2e8f0;
  --line2:#f1f5f9;
  --bg:#f8fafc;
  --card:#ffffff;
  --accent:#2563eb;
  --accent-indigo:#4f46e5;
  --accent-cyan:#06b6d4;
  --accent-l:#eff6ff;
  --ok:#0d9488;
  --ok-l:#f0fdfa;
  --warn:#d97706;
  --warn-l:#fffbeb;
  --danger:#e11d48;
  --danger-l:#fff1f2;
  --wx:#07c160;
  --ali:#1677ff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(at 10% 8%, rgba(219, 234, 254, 0.65) 0px, transparent 48%),
    radial-gradient(at 90% 12%, rgba(224, 242, 254, 0.55) 0px, transparent 48%),
    radial-gradient(at 50% 92%, rgba(238, 242, 255, 0.6) 0px, transparent 58%);
  background-attachment:fixed;
  color:var(--ink);
  font:14.5px/1.65 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;transition:color .15s;}
a:hover{color:var(--accent-indigo);}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px;}

/* 兼容旧顶栏（若未替换为 qfGlobalNav 时兜底） */
.nav{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.nav-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:17px;letter-spacing:-.3px;color:var(--ink);}
.logo i{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#2563eb 0%,#4f46e5 50%,#06b6d4 100%);
  color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;
  box-shadow:0 4px 12px rgba(37,99,235,.28);}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13.5px;color:var(--ink2);font-weight:600;}
.nav-links a{color:var(--ink2);}
.nav-links a.on{color:var(--accent);font-weight:700;}
.chip{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:4px 13px 4px 5px;}
.chip .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#4f46e5,#06b6d4);
  color:#fff;font-size:11.5px;display:flex;align-items:center;justify-content:center;font-weight:800;}
.chip .nm{font-size:12.5px;font-weight:700;line-height:1.2;}
.chip .bl{font-size:10.5px;color:var(--accent);font-weight:800;line-height:1.2;}

/* 卡片（统一圆角 16px + 柔和投影） */
.card{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border:1px solid rgba(226,232,240,.92);
  border-radius:16px;
  padding:22px 24px;
  margin:16px 0;
  box-shadow:0 4px 20px -2px rgba(15,23,42,.04),0 2px 6px -1px rgba(15,23,42,.02);
}
.card h3{margin:0 0 14px;font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--ink);letter-spacing:-.2px;}
.card h3 .sub{margin-left:auto;font-size:12px;color:var(--ink3);font-weight:500;}

/* 余额大卡（皇家靛蓝-电光蓝-青色流体渐变） */
.balance{
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 45%,#0f3f5c 100%);
  border-radius:20px;
  padding:28px 32px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 45px -15px rgba(30,27,75,.45);
  border:1px solid rgba(255,255,255,.08);
}
.balance::after{
  content:"";position:absolute;right:-40px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.32),rgba(79,70,229,.22) 45%,transparent 70%);
  pointer-events:none;
}
.balance .k{font-size:12.5px;color:#94a3b8;margin-bottom:6px;font-weight:600;letter-spacing:.03em;}
.balance .v{font-size:48px;font-weight:900;letter-spacing:-1.8px;line-height:1.08;background:linear-gradient(135deg,#ffffff 40%,#93c5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.balance .u{font-size:13.5px;color:#38bdf8;font-weight:700;margin-left:10px;}
.balance .acts{margin-top:20px;display:flex;gap:10px;position:relative;flex-wrap:wrap;}

/* AI 创作工作台直通车卡片（个人中心专属联通入口） */
.qf-studio-launch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
}
.qf-launch-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(226,232,240,.95);
  border-radius:16px;
  padding:16px 20px;
  text-decoration:none !important;
  color:var(--ink) !important;
  box-shadow:0 4px 16px -2px rgba(15,23,42,.04);
  transition:all .2s cubic-bezier(0.16,1,0.3,1);
  position:relative;
  overflow:hidden;
}
.qf-launch-card:hover{
  transform:translateY(-2px);
  border-color:#93c5fd;
  box-shadow:0 12px 28px -6px rgba(37,99,235,.14);
}
.qf-launch-left{display:flex;align-items:center;gap:14px;}
.qf-launch-ic{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.qf-launch-ic.video{background:linear-gradient(135deg,#eff6ff,#e0f2fe);border:1px solid #bae6fd;}
.qf-launch-ic.image{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1px solid #ddd6fe;}
.qf-launch-title{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:2px;display:flex;align-items:center;gap:6px;}
.qf-launch-desc{font-size:12px;color:var(--ink3);}
.qf-launch-go{
  padding:7px 14px;border-radius:999px;font-size:12px;font-weight:800;
  background:#f1f5f9;color:var(--accent);white-space:nowrap;transition:all .18s;
}
.qf-launch-card:hover .qf-launch-go{
  background:linear-gradient(135deg,#2563eb,#4f46e5,#06b6d4);
  color:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.28);
}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;font-weight:700;
  cursor:pointer;border:none;font-family:inherit;transition:all .18s;padding:10px 20px;font-size:14px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-pri{background:linear-gradient(135deg,#2563eb 0%,#4f46e5 50%,#06b6d4 100%);color:#fff;box-shadow:0 6px 18px -6px rgba(37,99,235,.55);}
.btn-pri:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 22px -6px rgba(37,99,235,.65);}
.btn-sec{background:#fff;color:var(--ink2);border:1px solid #cbd5e1;font-size:13px;padding:9px 16px;}
.btn-sec:hover:not(:disabled){background:#f8fafc;color:var(--ink);border-color:#94a3b8;}
.btn-ghost{background:transparent;color:var(--accent);padding:8px 12px;font-size:13px;}
.btn-ghost:hover:not(:disabled){background:var(--accent-l);}
.btn-w{background:#fff;color:#0f172a;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.15);}
.btn-w:hover{transform:translateY(-1px);background:#f8fafc;}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:8px;}
.btn-block{width:100%;}

/* 表单 */
.field{width:100%;border:1.5px solid #cbd5e1;border-radius:10px;padding:11px 14px;font-size:14px;
  font-family:inherit;color:var(--ink);background:#fff;outline:none;transition:all .15s;}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.label{font-size:12.5px;color:var(--ink2);margin:0 0 6px;font-weight:700;display:block;}
.form-row{margin-bottom:14px;}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-weight:700;padding:10px 12px;background:#f8fafc;color:var(--ink3);
  font-size:11.5px;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#f8fafc;}
.mono{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:11.8px;}
.r{text-align:right;font-variant-numeric:tabular-nums;}

/* 徽章 */
.pill{display:inline-block;font-size:11px;padding:2.5px 9px;border-radius:999px;font-weight:700;white-space:nowrap;}
.pill.ok{background:var(--ok-l);color:var(--ok);border:1px solid #99f6e4;}
.pill.wait{background:var(--warn-l);color:var(--warn);border:1px solid #fde68a;}
.pill.fail{background:var(--danger-l);color:var(--danger);border:1px solid #fecdd3;}
.pill.gray{background:#f1f5f9;color:var(--ink3);border:1px solid #e2e8f0;}
.pill.acc{background:var(--accent-l);color:var(--accent);border:1px solid #bfdbfe;}

/* 统计小卡 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;}
.kpi{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:14px;padding:15px 18px;box-shadow:0 2px 10px rgba(15,23,42,.02);}
.kpi .k{font-size:12px;color:var(--ink3);margin-bottom:4px;font-weight:600;}
.kpi .v{font-size:23px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--ink);}
.kpi .s{font-size:11px;color:var(--ink3);margin-top:2px;}

/* 提示条 */
.note{border-radius:11px;padding:12px 15px;font-size:12.5px;line-height:1.7;margin:12px 0;border:1px solid;}
.note.info{background:var(--accent-l);border-color:#bfdbfe;color:#1e40af;}
.note.warn{background:var(--warn-l);border-color:#fde68a;color:#92400e;}
.note.ok{background:var(--ok-l);border-color:#99f6e4;color:#115e59;}
.note.bad{background:var(--danger-l);border-color:#fecdd3;color:#9f1239;}

/* toast */
#toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);
  background:#0f172a;color:#fff;font-size:13.5px;font-weight:600;padding:11px 22px;border-radius:12px;
  opacity:0;transition:.25s;pointer-events:none;z-index:10005;box-shadow:0 12px 32px -8px rgba(15,23,42,.55);}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* 空态 */
.empty{text-align:center;padding:40px 20px;color:var(--ink3);font-size:13px;}
.empty .ic{font-size:28px;margin-bottom:8px;opacity:.55;}

/* 套餐卡 */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;
  transition:all .18s;position:relative;}
.plan:hover{border-color:#93c5fd;transform:translateY(-1px);}
.plan.on{border-color:var(--accent);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 10px 24px -10px rgba(37,99,235,.35);}
.plan .tag{position:absolute;top:-10px;right:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;
  font-size:10.5px;font-weight:800;padding:2px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(37,99,235,.3);}
.plan .nm{font-size:13px;color:var(--ink2);margin-bottom:6px;font-weight:700;}
.plan .pr{font-size:26px;font-weight:900;letter-spacing:-.8px;color:var(--ink);}
.plan .pt{font-size:12px;color:var(--ink3);margin-top:3px;}
.plan .cv{font-size:11.5px;color:var(--accent);background:var(--accent-l);border-radius:6px;
  padding:3px 8px;margin-top:9px;display:inline-block;font-weight:700;}

/* 侧边导航（运营中台） */
.layout{display:grid;grid-template-columns:212px 1fr;min-height:100vh;}
.side{background:#0f172a;padding:18px 12px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06);}
.side .grp{font-size:10.5px;color:#64748b;letter-spacing:.08em;font-weight:800;padding:14px 10px 6px;}
.side a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;color:#94a3b8;
  font-size:13px;font-weight:600;text-decoration:none;margin-bottom:2px;transition:all .15s;}
.side a:hover{background:rgba(255,255,255,.06);color:#f1f5f9;}
.side a.on{background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(6,182,212,.18));color:#38bdf8;font-weight:700;border:1px solid rgba(56,189,248,.25);}
.side .bdg{margin-left:auto;background:#e11d48;color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:800;}
.main{padding:24px 28px;background:var(--bg);overflow:auto;}

@media(max-width:760px){
  .balance .v{font-size:38px;}
  .qf-studio-launch{grid-template-columns:1fr;}
  .layout{grid-template-columns:1fr;}
  .side{display:flex;flex-direction:row;overflow-x:auto;padding:10px;}
  .side .grp{display:none;}
  .side a{white-space:nowrap;}
  .nav-links{gap:10px;font-size:12.5px;}
}

/* ==================== 统一居中模态对话框 (qfModal) ==================== */
.qf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: qfFadeIn .18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.qf-modal-box {
  position: relative;
  width: 440px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 24px 22px;
  box-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: qfScaleIn .18s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
@keyframes qfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes qfScaleIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.qf-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.qf-modal-icon.info { background: #eff6ff; color: #2563eb; }
.qf-modal-icon.warn { background: #fef3c7; color: #d97706; }
.qf-modal-icon.danger { background: #fee2e2; color: #dc2626; }
.qf-modal-icon.success { background: #dcfce7; color: #16a34a; }
.qf-modal-icon.edit { background: #e0f2fe; color: #0284c7; }

.qf-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.35;
}
.qf-modal-desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 16px;
  word-break: break-word;
}
.qf-modal-tip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: left;
}
.qf-modal-field {
  margin-bottom: 14px;
  text-align: left;
}
.qf-modal-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.qf-modal-input, .qf-modal-textarea {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.qf-modal-input:focus, .qf-modal-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.qf-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.qf-modal-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.qf-modal-btn-cancel {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.qf-modal-btn-cancel:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}
.qf-modal-btn-confirm {
  background: linear-gradient(135deg, #2563eb, #4f46e5, #06b6d4);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.qf-modal-btn-confirm:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.qf-modal-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.qf-modal-btn-danger:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ==================== 分页组件样式 ==================== */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink2);
  flex-wrap: wrap;
  gap: 12px;
}
.pagination-info {
  font-size: 12.5px;
  color: var(--ink3);
}
.pagination-info b {
  color: var(--ink);
}
.pagination-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  font-family: inherit;
}
.page-btn:hover:not(:disabled):not(.on) {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: var(--ink);
}
.page-btn.on {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--line2);
  background: #fafbfc;
}
.page-ellipsis {
  padding: 0 4px;
  color: var(--ink3);
  font-size: 12px;
}

/* ==================== 响应式账单/订单与积分流水列表（零横向溢出） ==================== */
.qf-bill-list {
  display: flex;
  flex-direction: column;
}
.qf-bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line2);
  transition: background 0.15s ease;
}
.qf-bill-row:last-child {
  border-bottom: none;
}
.qf-bill-left {
  flex: 1;
  min-width: 0;
}
.qf-bill-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.qf-bill-sub {
  font-size: 11.5px;
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qf-bill-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-align: right;
}
.qf-bill-amt {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.qf-bill-meta {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 2px;
}

/* ==================== 移动端深度精细化适配 (<= 760px) ==================== */
@media (max-width: 760px) {
  .wrap {
    padding: 0 12px !important;
  }
  .card {
    padding: 16px 15px !important;
    border-radius: 14px !important;
    margin: 12px 0 !important;
  }
  .balance {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }
  .balance .v {
    font-size: 38px !important;
  }
  .balance .acts {
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .balance .acts .btn-w {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 11px 16px !important;
  }
  .balance .acts .btn:not(.btn-w) {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }
  /* 3个统计小卡在移动端并排为1行3列，整齐划一 */
  .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .kpi {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
  .kpi .k {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  .kpi .v {
    font-size: 19px !important;
  }
  /* AI 创作工作台直通车卡片在移动端紧凑不折行 */
  .qf-studio-launch {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .qf-launch-card {
    padding: 13px 14px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }
  .qf-launch-left {
    gap: 11px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .qf-launch-ic {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    font-size: 19px !important;
  }
  .qf-launch-title {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .qf-launch-desc {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .qf-launch-go {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }
  /* 套餐网格在手机端改为 2 列对称卡片 */
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .plan {
    padding: 14px 12px !important;
  }
  .plan .pr {
    font-size: 22px !important;
  }
}

/* ==================== 运营中台 (Admin) 桌面端与移动端自适应架构 ==================== */
.adm-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}
.adm-brand-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none !important;
}
.adm-nav-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.adm-staff-foot {
  margin-top: auto;
  padding: 16px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.adm-staff-top {
  display: none;
}

/* 桌面端显示完整表格，移动端切换为结构化卡片列表 */
.adm-pc-table {
  display: block;
  width: 100%;
  overflow-x: auto;
}
.adm-mb-list {
  display: none;
}

/* 移动端卡片列表通用样式 */
.adm-m-card {
  padding: 14px 15px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-m-card:last-child {
  border-bottom: none;
}
.adm-m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.adm-m-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  flex-wrap: wrap;
  min-width: 0;
}
.adm-m-val {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.adm-m-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink3);
  flex-wrap: wrap;
}
.adm-m-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  background: #f8fafc;
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 8px 10px;
  text-align: center;
}
.adm-m-grid .mk {
  font-size: 10.5px;
  color: var(--ink3);
}
.adm-m-grid .mv {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 1px;
}
.adm-m-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.adm-wx-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

@media (max-width: 820px) {
  .layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  /* 运营后台移动端顶栏：第一行品牌+管理员退出，第二行单行胶囊滑动导航，彻底消除拉伸变形 */
  .side {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
    overflow: visible !important;
  }
  .adm-brand-row {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
  }
  .adm-staff-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .adm-staff-badge {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .adm-logout-btn {
    font-size: 11.5px;
    font-weight: 700;
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.28);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none !important;
  }
  .adm-staff-foot {
    display: none !important;
  }
  .adm-nav-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  .adm-nav-list::-webkit-scrollbar {
    display: none;
  }
  .adm-nav-list .grp {
    display: none !important;
  }
  .adm-nav-list a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 34px !important;
    padding: 0 13px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .adm-nav-list a.on {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #06b6d4 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4) !important;
  }
  .main {
    padding: 14px 12px 48px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* 运营后台 4 项 KPI 在手机端排成 2x2 对称矩阵 */
  #appView .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #appView .kpi {
    text-align: left !important;
    padding: 13px 14px !important;
  }
  #appView .kpi .v {
    font-size: 21px !important;
  }
  /* 移动端自动隐藏宽表格，展示原生级结构化卡片列表 */
  .adm-pc-table {
    display: none !important;
  }
  .adm-mb-list {
    display: flex !important;
    flex-direction: column !important;
  }
  /* 公众号菜单编辑器在手机端上下堆叠 */
  .adm-wx-layout {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .adm-wx-phone {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
}