/* ============================================================================
   jiucai-skin.css · 客户控制台外观层（对齐参考站 jiucai.oo7.co 控制台）
   参考站控制台的设计语言：
     · 画布 #f5f6f8，侧栏/顶栏纯白，1px 冷灰分隔线
     · 圆角面板 17px + 极轻阴影 0 2px 8px -2px rgba(15,23,42,.04)
     · 强调色 Apple Blue #007aff（可用 --ui-accent 一行换成墨绿）
     · 标题 24/700 字距 -.4px，正文 12–13px，数字等宽
   本层只覆盖观感，不新增/删除任何 DOM，也不改后端接口。
   ========================================================================== */

body.customer-body {
  --ui-accent: #007aff;
  --ui-accent-soft: #e8f0fe;
  --ui-accent-line: #cfe2ff;
  --ui-accent-deep: #0063cc;
  --ui-ink: #0f172a;
  --ui-ink-2: #1d2939;
  --ui-text: #3a3a3c;
  --ui-muted: #64748b;
  --ui-muted-2: #94a3b8;
  --ui-canvas: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-soft: #f8fafc;
  --ui-line: #e2e8f0;
  --ui-line-2: #eef1f5;
  --ui-line-strong: #e5e5ea;
  --ui-radius: 17px;
  --ui-radius-sm: 10px;
  --ui-radius-xs: 8px;
  --ui-shadow: 0 2px 8px -2px rgba(15, 23, 42, .06);
  --ui-shadow-md: 0 10px 30px rgba(16, 24, 40, .07);
  --ui-shadow-lg: 0 24px 64px rgba(16, 24, 40, .12);
  --ui-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ui-sans: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --ui-sidebar: 256px;
  --ui-topbar: 72px;
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-family: var(--ui-sans);
  -webkit-font-smoothing: antialiased;
}

body.customer-body .background-grid { display: none; }

/* ---------- 正文基线 ----------
   polish.css 用 `body:is(.customer-body,.admin-body):is(...) :is(p,label,td,...)`
   把所有段落/标签/单元格钉在 16px!important。参考站控制台正文是 12–13.5px，
   这里用 :where() 把优先级压到 (1,1,0)，让下面各组件规则（带 #appView）继续生效。 */
body.customer-body #appView :where(p, label, td, th, li, dt, dd, small, span, select, textarea, input:not([type="checkbox"]):not([type="radio"])) {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
body.customer-body #appView :where(p, label, td, li, dd) { color: inherit; }

body.customer-body .shell,
body.customer-body #appView.console-layout {
  background: var(--ui-canvas) !important;
  min-height: 100svh;
  max-width: none !important;
}

/* ============================ 侧栏 ============================ */
body.customer-body #appView .console-sidebar {
  position: fixed !important;
  top: 0; bottom: 0; left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--ui-sidebar);
  height: 100svh;
  padding: 20px 16px;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-line-strong);
  box-shadow: none;
  transform: none;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  box-sizing: border-box;
  overflow: hidden;
}

body.customer-body #appView .console-brand {
  display: flex;
  align-items: center;
  gap: 11.2px;
  padding: 0 8px 20px;
  color: var(--ui-ink);
  text-decoration: none;
  flex: 0 0 auto;
}
body.customer-body #appView .console-brand .brand-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--ui-accent), var(--ui-accent-deep));
  color: #fff;
  font-size: 15.2px !important;
  font-weight: 700;
  line-height: 1 !important;
  box-shadow: 0 7px 18px rgba(0, 122, 255, .22);
  flex: 0 0 auto;
}
body.customer-body #appView .console-brand strong {
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ui-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.customer-body #appView .console-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2.4px;
  scrollbar-width: thin;
  scrollbar-color: #d7dce4 transparent;
}
body.customer-body #appView .console-nav::-webkit-scrollbar { width: 6px; }
body.customer-body #appView .console-nav::-webkit-scrollbar-thumb { background: #d7dce4; border-radius: 999px; }

/* 品牌方块：dashboard.css 用 !important 把 logo 钉成旧蓝 #3e6bec，这里提权换成站内墨绿。 */
html[data-ui-theme] body.customer-body #appView .console-brand .brand-mark {
  background: linear-gradient(135deg, #0b7a5b, #064e36) !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px -10px rgba(6, 78, 54, .8) !important;
}

body.customer-body #appView .console-group-label {
  margin: 13.6px 11.2px 4.8px;
  padding: 0;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ui-muted-2);
}

body.customer-body #appView .nav-item {
  display: flex;
  align-items: center;
  gap: 11.2px;
  width: 100%;
  min-height: 42.4px;
  padding: 8.8px 11.2px;
  border: 0;
  border-radius: 10.4px;
  background: transparent;
  color: var(--ui-text);
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.35 !important;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
body.customer-body #appView .nav-item > span:not(.nav-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.customer-body #appView .nav-item:hover { background: #f2f2f7; color: #1c1c1e; }
body.customer-body #appView .nav-item:active { transform: scale(.985); }
body.customer-body #appView .nav-item.active {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  font-weight: 600;
  box-shadow: none;
}
body.customer-body #appView .nav-item .nav-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  color: #5c5c60;
  font-size: 14px !important;
  transition: color .18s ease, background-color .18s ease;
}
body.customer-body #appView .nav-item .nav-icon svg {
  width: 16.8px; height: 16.8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.customer-body #appView .nav-item:hover .nav-icon { color: var(--ui-ink-2); }
body.customer-body #appView .nav-item.active .nav-icon { color: var(--ui-accent); background: transparent; }

/* 节点状态折叠组 */
body.customer-body #appView .console-monitor-group { display: block; }
body.customer-body #appView .console-monitor-group > summary {
  display: flex;
  align-items: center;
  gap: 11.2px;
  min-height: 42.4px;
  padding: 8.8px 11.2px;
  border-radius: 10.4px;
  color: var(--ui-text);
  font-size: 14px !important;
  cursor: pointer;
  list-style: none;
  transition: background-color .18s ease, color .18s ease;
}
body.customer-body #appView .console-monitor-group > summary::-webkit-details-marker { display: none; }
body.customer-body #appView .console-monitor-group > summary:hover { background: #f2f2f7; color: #1c1c1e; }
body.customer-body #appView .console-monitor-group > summary .nav-icon {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: #5c5c60;
}
body.customer-body #appView .console-monitor-group > summary .nav-icon svg {
  width: 16.8px; height: 16.8px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
body.customer-body #appView .console-chevron {
  margin-left: auto;
  font-size: 14px !important;
  color: var(--ui-muted-2);
  transition: transform .2s ease;
}
body.customer-body #appView .console-monitor-group[open] .console-chevron { transform: rotate(90deg); }
body.customer-body #appView .console-monitor-group > div {
  display: grid;
  gap: 2px;
  margin: 2px 0 4px 15.2px;
  padding-left: 8.8px;
  border-left: 1px solid var(--ui-line-2);
}
body.customer-body #appView .console-monitor-group > div .nav-item { min-height: 37.6px; font-size: 13px !important; }

/* 侧栏底部账号卡 */
body.customer-body #appView .console-account {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10.4px;
  width: 100%;
  margin-top: 12px;
  padding: 11.2px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-ink-2);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
body.customer-body #appView .console-account:hover { background: #f8fafc; border-color: var(--ui-line-strong); }
body.customer-body #appView .console-account img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ui-accent-soft);
  flex: 0 0 auto;
}
body.customer-body #appView .console-account > span:not([aria-hidden]) {
  display: grid;
  gap: 2.4px;
  min-width: 0;
}
body.customer-body #appView .console-account strong {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--ui-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.customer-body #appView .console-account small {
  font-family: var(--ui-mono);
  font-size: 10px !important;
  color: var(--ui-muted-2);
  letter-spacing: .02em;
}
body.customer-body #appView .console-account > span[aria-hidden] {
  margin-left: auto;
  color: var(--ui-muted-2);
  font-size: 14px !important;
}

/* ============================ 顶栏 ============================ */
body.customer-body #appView .console-topbar {
  position: fixed;
  top: 0; right: 0; left: var(--ui-sidebar);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ui-topbar);
  padding: 0 28px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ui-line-2);
  box-sizing: border-box;
}
body.customer-body #appView .console-topbar > strong {
  font-size: 17px !important;
  font-weight: 650;
  letter-spacing: -.2px;
  color: var(--ui-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.customer-body #appView .console-topbar-actions {
  display: flex;
  align-items: center;
  gap: 9.6px;
  margin-left: auto;
  flex: 0 0 auto;
}
body.customer-body #appView .console-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 4.48px 9.6px;
  border: 1px solid var(--ui-accent-line);
  border-radius: 999px;
  background: var(--ui-accent-soft);
  color: #0b57c2;
  font-size: 11px !important;
  font-weight: 600;
  white-space: nowrap;
}
body.customer-body #appView .console-top-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4.48px 9.6px 4.48px 4.8px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
body.customer-body #appView .console-top-user:hover { background: #f8fafc; border-color: var(--ui-line-strong); }
body.customer-body #appView .console-top-user img {
  width: 25.6px; height: 25.6px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ui-accent-soft);
}
body.customer-body #appView .console-menu-toggle {
  display: none;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  color: #475467;
  cursor: pointer;
  flex: 0 0 auto;
}
body.customer-body #appView .console-menu-toggle svg {
  width: 16.8px; height: 16.8px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round;
}
body.customer-body #appView .console-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  border: 0;
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ============================ 工作区 ============================ */
body.customer-body #appView .workspace {
  margin-left: var(--ui-sidebar) !important;
  padding-top: var(--ui-topbar);
  min-height: 100svh;
  min-width: 0;
  background: var(--ui-canvas);
  transition: margin-left .24s cubic-bezier(.2, .8, .2, 1);
}
body.customer-body #appView .content-view {
  width: min(1440px, 100%);
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 34px 48px;
  background: transparent;
  box-sizing: border-box;
}
body.customer-body #appView .content-view > *,
body.customer-body #appView .content-view > * > * { min-width: 0; }

/* 页面标题区 */
body.customer-body #appView .console-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-line);
}
body.customer-body #appView .console-page-head h1,
body.customer-body #appView .console-page-head h2,
body.customer-body #appView .workspace-page-title {
  margin: 0;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ui-ink);
}
body.customer-body #appView .page-intro,
body.customer-body #appView .console-page-head p,
body.customer-body #appView .customer-intro {
  margin: 6px 0 0;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--ui-muted);
}
body.customer-body #appView .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ui-muted-2);
}

/* ============================ 卡片与面板 ============================ */
body.customer-body #appView .table-card,
body.customer-body #appView .panel,
body.customer-body #appView .console-card,
body.customer-body #appView .stat-card,
body.customer-body #appView .node-auth-card,
body.customer-body #appView .subscription-card,
body.customer-body #appView .voucher-redeem-card,
body.customer-body #appView .profile-logout,
body.customer-body #appView .commerce-section,
body.customer-body #appView .plans-catalog-panel {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  padding: 20px;
}
body.customer-body #appView .table-card { padding: 0; overflow: hidden; }
body.customer-body #appView .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ui-line);
}
body.customer-body #appView .table-head h2,
body.customer-body #appView .table-head h3 {
  margin: 0;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ui-ink);
}
body.customer-body #appView .table-wrap { overflow-x: auto; }

/* 统计卡 */
body.customer-body #appView .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
body.customer-body #appView .stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5.6px;
  min-height: 116px;
  padding: 16.8px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.customer-body #appView .stat-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .18);
}
body.customer-body #appView .stat-label {
  font-size: 12px !important;
  font-weight: 500;
  color: var(--ui-muted-2);
}
body.customer-body #appView .stat-card strong,
body.customer-body #appView .stat-card b {
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 700;
  color: var(--ui-ink);
  font-variant-numeric: tabular-nums;
}
body.customer-body #appView .stat-watermark {
  position: absolute;
  right: 12px; bottom: 8px;
  font-size: 40px !important;
  line-height: 1 !important;
  color: #f1f5f9;
  pointer-events: none;
}

/* 数据面板 */
body.customer-body #appView .console-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
body.customer-body #appView .console-data-head h1 {
  margin: 0;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ui-ink);
}
body.customer-body #appView .console-data-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--ui-shadow);
}
body.customer-body #appView .console-data-welcome strong {
  display: block;
  font-size: 16px !important;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.2px;
}
body.customer-body #appView .console-data-welcome p {
  margin: 6px 0 0;
  font-size: 13px !important;
  color: var(--ui-muted);
}
body.customer-body #appView .console-data-actions,
body.customer-body #appView .console-quick-actions,
body.customer-body #appView .console-directory-grid,
body.customer-body #appView .console-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
body.customer-body #appView .console-data-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  color: var(--ui-ink-2);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.customer-body #appView .console-data-action:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .3);
}
body.customer-body #appView .console-data-symbol {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid var(--ui-accent-line);
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  color: var(--ui-accent);
  font-size: 16px !important;
  font-weight: 700;
}
body.customer-body #appView .console-data-copy { display: grid; gap: 2.4px; min-width: 0; }
body.customer-body #appView .console-data-copy strong {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--ui-ink);
}
body.customer-body #appView .console-data-copy small {
  font-size: 12px !important;
  color: var(--ui-muted);
}
body.customer-body #appView .console-callout {
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-radius);
  background: #f5f9ff;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #334155;
}

/* ============================ 按钮 ============================ */
body.customer-body #appView .button,
body.customer-body #appView button.button,
body.customer-body dialog .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  min-height: 36px;
  padding: 7.2px 13.6px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-ink-2);
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
body.customer-body #appView .button:hover,
body.customer-body dialog .button:hover { background: var(--ui-soft); border-color: #cbd5e1; }
body.customer-body #appView .button:active,
body.customer-body dialog .button:active { transform: scale(.985); }
body.customer-body #appView .button:disabled,
body.customer-body dialog .button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

body.customer-body #appView .button.primary,
body.customer-body dialog .button.primary {
  border-color: transparent;
  background: var(--ui-accent);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(0, 122, 255, .6);
}
body.customer-body #appView .button.primary:hover,
body.customer-body dialog .button.primary:hover { background: var(--ui-accent-deep); box-shadow: 0 8px 20px -8px rgba(0, 122, 255, .65); }
body.customer-body #appView .button.secondary,
body.customer-body dialog .button.secondary {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  color: var(--ui-ink-2);
}
body.customer-body #appView .button.secondary:hover,
body.customer-body dialog .button.secondary:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: #0b57c2; }
body.customer-body #appView .button.ghost,
body.customer-body dialog .button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ui-muted);
  box-shadow: none;
}
body.customer-body #appView .button.ghost:hover,
body.customer-body dialog .button.ghost:hover { background: var(--ui-soft); color: var(--ui-ink); }
body.customer-body #appView .button.danger-button,
body.customer-body #appView .danger-button {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b42318;
}
body.customer-body #appView .button.danger-button:hover,
body.customer-body #appView .danger-button:hover { background: #fee2e2; border-color: #fca5a5; }
body.customer-body #appView .button.full { width: 100%; }
body.customer-body #appView .icon-button {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  color: #475467;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
body.customer-body #appView .icon-button:hover { background: var(--ui-soft); border-color: #cbd5e1; }
body.customer-body #appView .icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* 忙碌态双弧圈（与登录页保持一致） */
body.customer-body #appView .button[data-busy="true"]::after,
body.customer-body dialog .button[data-busy="true"]::after {
  content: "";
  width: 12.8px; height: 12.8px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, .35);
  border-top-color: currentColor;
  animation: skinSpin .75s linear infinite;
  flex: 0 0 auto;
}
@keyframes skinSpin { to { transform: rotate(360deg); } }

/* ============================ 表单 ============================ */
body.customer-body #appView .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.customer-body #appView .form-grid > .span-2 { grid-column: 1 / -1; }
body.customer-body #appView .form-grid label,
body.customer-body dialog .form-grid label,
body.customer-body #appView .settings-layout label {
  display: grid;
  gap: 5.6px;
  min-width: 0;
  font-size: 12px !important;
  font-weight: 500;
  color: #475569;
}
body.customer-body #appView .form-grid input,
body.customer-body #appView .form-grid select,
body.customer-body #appView .form-grid textarea,
body.customer-body dialog input,
body.customer-body dialog select,
body.customer-body dialog textarea,
body.customer-body #appView .filter-bar input,
body.customer-body #appView .filter-bar select,
body.customer-body #appView .toolbar input,
body.customer-body #appView .toolbar select,
body.customer-body #appView .nodes-toolbar input,
body.customer-body #appView .nodes-toolbar select,
body.customer-body #appView .synced-toolbar input,
body.customer-body #appView .synced-toolbar select,
body.customer-body #appView .mapping-filter-bar input,
body.customer-body #appView .mapping-filter-bar select {
  width: 100%;
  min-height: 37.6px;
  padding: 7.68px 11.2px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: inherit;
  font-size: 13px !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.customer-body #appView .form-grid input::placeholder,
body.customer-body dialog input::placeholder { color: var(--ui-muted-2); }
body.customer-body #appView .form-grid input:focus,
body.customer-body #appView .form-grid select:focus,
body.customer-body dialog input:focus,
body.customer-body dialog select:focus,
body.customer-body #appView .nodes-toolbar input:focus,
body.customer-body #appView .nodes-toolbar select:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .12);
}
body.customer-body #appView .form-grid small,
body.customer-body dialog small { font-size: 11px !important; color: var(--ui-muted-2); line-height: 1.6 !important; }
body.customer-body #appView .password-wrap { position: relative; display: block; }
body.customer-body #appView .password-wrap > button {
  position: absolute;
  top: 50%; right: 5.6px;
  transform: translateY(-50%);
  padding: 4px 8px;
  border: 0;
  border-radius: 6.4px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 11px !important;
  font-weight: 600;
  cursor: pointer;
}
body.customer-body #appView .password-wrap > button:hover { background: var(--ui-soft); color: var(--ui-ink); }

/* 分段控件 / 切换器 */
body.customer-body #appView .segmented,
body.customer-body #appView .mapping-switcher,
body.customer-body #appView .synced-switcher,
body.customer-body #appView .nodes-switcher,
body.customer-body #appView .mapping-switcher-simple {
  display: inline-flex;
  gap: 2px;
  padding: 3.52px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-soft);
  flex-wrap: wrap;
}
body.customer-body #appView .segmented-item,
body.customer-body #appView .mapping-switcher button,
body.customer-body #appView .synced-switcher button,
body.customer-body #appView .nodes-switcher button,
body.customer-body #appView .mapping-switcher-simple button {
  padding: 6.4px 12px;
  border: 0;
  border-radius: 8.8px;
  background: transparent;
  color: var(--ui-muted);
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body.customer-body #appView .segmented-item.active,
body.customer-body #appView .segmented-item[aria-selected="true"],
body.customer-body #appView .mapping-switcher button.active,
body.customer-body #appView .synced-switcher button.active,
body.customer-body #appView .nodes-switcher button.active,
body.customer-body #appView .mapping-switcher-simple button.active {
  background: var(--ui-surface);
  color: var(--ui-accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}

/* ============================ 表格 ============================ */
body.customer-body #appView table { width: 100%; border-collapse: collapse; font-size: 13px !important; }
body.customer-body #appView thead th {
  padding: 10.4px 20px;
  background: var(--ui-soft);
  border-bottom: 1px solid var(--ui-line);
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ui-muted-2);
  text-align: left;
  white-space: nowrap;
}
body.customer-body #appView tbody td {
  padding: 12.8px 20px;
  border-bottom: 1px solid var(--ui-line-2);
  color: var(--ui-ink-2);
  vertical-align: middle;
}
body.customer-body #appView tbody tr:last-child td { border-bottom: 0; }
body.customer-body #appView tbody tr:hover td { background: #fafcff; }
body.customer-body #appView tbody td code,
body.customer-body #appView code {
  font-family: var(--ui-mono);
  font-size: 12px !important;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  padding: 1.6px 5.6px;
  overflow-wrap: anywhere;
}

/* 徽标 */
body.customer-body #appView .badge,
body.customer-body #appView .dg-tag {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 3.2px 8.8px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ui-muted);
  font-size: 11px !important;
  font-weight: 600;
  white-space: nowrap;
}
body.customer-body #appView .badge.success,
body.customer-body #appView .badge.paid { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
body.customer-body #appView .badge.warning,
body.customer-body #appView .badge.pending { background: #fffbeb; border-color: #fde68a; color: #b45309; }
body.customer-body #appView .badge.danger,
body.customer-body #appView .badge.error { background: #fef2f2; border-color: #fecaca; color: #b42318; }

/* 空状态 / 提示 */
body.customer-body #appView .empty-state,
body.customer-body #appView .compact-empty,
body.customer-body #appView .inline-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--ui-muted-2);
  font-size: 13px !important;
  text-align: center;
}
body.customer-body #appView .empty-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--ui-soft);
  border: 1px solid var(--ui-line);
  font-size: 20px !important;
  color: var(--ui-muted-2);
}
body.customer-body #appView .message {
  min-height: 0;
  margin: 8px 0 0;
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: var(--ui-muted);
}
body.customer-body #appView .message.success { color: #067647; }
body.customer-body #appView .message:empty { display: none; }
body.customer-body #appView .field-caption { font-size: 11px !important; color: var(--ui-muted-2); }

/* ============================ 个人中心 ============================ */
body.customer-body #appView .profile-overview,
body.customer-body #appView .profile-columns {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
body.customer-body #appView .profile-identity { display: flex; align-items: center; gap: 14px; }
body.customer-body #appView .profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid #f1f5f9;
  background: var(--ui-accent-soft);
  object-fit: cover;
  flex: 0 0 auto;
}
body.customer-body #appView .profile-account-facts,
body.customer-body #appView .node-auth-facts {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  font-size: 12px !important;
}
body.customer-body #appView .profile-account-facts > div,
body.customer-body #appView .node-auth-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9.6px 0;
  border-bottom: 1px dashed var(--ui-line);
}
body.customer-body #appView .profile-account-facts > div:last-child,
body.customer-body #appView .node-auth-facts > div:last-child { border-bottom: 0; }
body.customer-body #appView .profile-account-facts dd,
body.customer-body #appView .node-auth-facts dd {
  margin: 0;
  font-family: var(--ui-mono);
  font-size: 11px !important;
  color: var(--ui-ink);
  text-align: right;
  overflow-wrap: anywhere;
}
body.customer-body #appView .profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 9.6px;
  border-bottom: 1px solid var(--ui-line);
}
body.customer-body #appView .profile-section-head h2,
body.customer-body #appView .profile-section-head h3 {
  margin: 0;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--ui-ink);
}
body.customer-body #appView .profile-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
body.customer-body #appView .activity-list { display: grid; gap: 8px; }
body.customer-body #appView .activity-list article,
body.customer-body #appView .activity-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9.6px 12px;
  border: 1px solid var(--ui-line-2);
  border-radius: 10px;
  background: var(--ui-soft);
  font-size: 12px !important;
}
body.customer-body #appView .node-auth-card { display: grid; gap: 8px; }
body.customer-body #appView .node-auth-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.customer-body #appView .node-auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================ 套餐 / 钱包 / 订单 ============================ */
body.customer-body #appView .commerce-heading h1,
body.customer-body #appView .commerce-heading h2 {
  margin: 0;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ui-ink);
}
body.customer-body #appView .commerce-heading p { margin: 6px 0 0; font-size: 12px !important; color: var(--ui-muted); }
body.customer-body #appView .plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
body.customer-body #appView .plans-grid > article,
body.customer-body #appView .plans-grid > .plan-card {
  display: grid;
  gap: 8px;
  padding: 18.4px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.customer-body #appView .plans-grid > article:hover { transform: translateY(-2px); border-color: #cbd5e1; }
body.customer-body #appView .subscription-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
body.customer-body #appView .subscription-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 16px;
  border: 1px solid var(--ui-accent-line);
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  color: var(--ui-accent);
  font-size: 18.4px !important;
  flex: 0 0 auto;
}
body.customer-body #appView .order-list { display: grid; gap: 8px; }
body.customer-body #appView .order-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11.2px 13.6px;
  border: 1px solid var(--ui-line-2);
  border-radius: 10px;
  background: var(--ui-soft);
  font-size: 12px !important;
}
body.customer-body #appView .voucher-redeem-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
body.customer-body #appView .voucher-code-field { flex: 1 1 192px; min-width: 0; }

/* ============================ 对话框 ============================ */
body.customer-body dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-ink-2);
  max-width: min(576px, calc(100vw - 32px));
}
body.customer-body dialog::backdrop { background: rgba(15, 23, 42, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.customer-body .modal-card {
  width: 100%;
  max-width: 576px;
  max-height: min(88vh, 832px);
  overflow: auto;
  padding: 21.6px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg);
}
body.customer-body .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-line);
}
body.customer-body .modal-head h2 {
  margin: 0;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--ui-ink);
}
body.customer-body .modal-head p { margin: 4.8px 0 0; font-size: 12px !important; color: var(--ui-muted); }
body.customer-body .close-button {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: 16.8px !important;
  line-height: 1 !important;
  cursor: pointer;
  flex: 0 0 auto;
}
body.customer-body .close-button:hover { background: var(--ui-soft); color: var(--ui-ink); }
body.customer-body .modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-line);
}
body.customer-body .detail-grid { display: grid; gap: 8px; font-size: 13px !important; }
body.customer-body .detail-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8.8px 0;
  border-bottom: 1px dashed var(--ui-line);
}

/* ============================ 移动端底栏 ============================ */
body.customer-body #appView .customer-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  padding: 4.8px 5.6px calc(4.8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ui-line-2);
}
body.customer-body #appView .customer-bottom-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6px;
}
body.customer-body #appView .customer-bottom-nav .nav-item {
  display: grid;
  justify-items: center;
  gap: 2.4px;
  min-height: 46.4px;
  padding: 4.8px 1.6px;
  border-radius: 9.6px;
  font-size: 10px !important;
  font-weight: 500;
  color: var(--ui-muted);
  background: transparent;
}
body.customer-body #appView .customer-bottom-nav .nav-item .nav-icon {
  width: 21.6px; height: 21.6px;
  background: transparent;
  color: inherit;
}
body.customer-body #appView .customer-bottom-nav .nav-item .nav-icon svg { width: 18.4px; height: 18.4px; }
body.customer-body #appView .customer-bottom-nav .nav-item.active {
  color: var(--ui-accent);
  background: transparent;
  font-weight: 700;
}
body.customer-body #appView .customer-bottom-nav .nav-item.active .nav-icon { color: var(--ui-accent); }

/* ============================ 页脚 / 通知 ============================ */
body.customer-body .release-footer {
  margin-left: var(--ui-sidebar);
  padding: 16px 34px 24px;
  border-top: 1px solid var(--ui-line-2);
  background: transparent;
  font-size: 11px !important;
  color: var(--ui-muted-2);
  text-align: center;
}
/* 登录门户自带页脚（.auth-portal-foot），此时不再叠加发布页脚。 */
body.customer-body[data-session-state="auth"] .release-footer,
body.customer-body[data-session-state="error"] .release-footer {
  display: none !important;
}
body.customer-body:not([data-session-state="authenticated"]) .release-footer {
  margin-left: 0;
  margin-bottom: 0;
  padding: 12px 16px 24px;
}
body.customer-body .toast-region { z-index: 90; }
body.customer-body .toast-region > * {
  border-radius: 12px !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow-md) !important;
  font-size: 13px !important;
}

/* ============================ 响应式 ============================ */
@media (max-width: 1180px) {
  body.customer-body #appView .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  body.customer-body #appView .content-view { padding: 20px 20px 40px; }
  body.customer-body #appView .console-topbar { padding: 0 20px; }
}

@media (max-width: 860px) {
  body.customer-body #appView .console-sidebar {
    transform: translateX(-102%);
    box-shadow: 20px 0 48px rgba(16, 24, 40, .12);
    z-index: 45;
  }
  body.customer-body #appView .console-sidebar.is-open { transform: translateX(0); }
  body.customer-body #appView .console-topbar { left: 0; height: 64px; padding: 0 13.6px; gap: 9.6px; }
  body.customer-body #appView .console-menu-toggle { display: grid; }
  body.customer-body #appView .workspace { margin-left: 0 !important; padding-top: 64px; padding-bottom: calc(59.2px + env(safe-area-inset-bottom, 0px)); }
  body.customer-body #appView .content-view { padding: 16px 12.8px 28px; }
  body.customer-body #appView .customer-bottom-nav { display: block; }
  body.customer-body .release-footer { margin-left: 0; padding: 12px 12.8px calc(67.2px + env(safe-area-inset-bottom, 0px)); }
  body.customer-body #appView .console-plan-badge { display: none; }
  body.customer-body #appView .console-top-user span { display: none; }
  body.customer-body #appView .console-top-user { padding: 3.2px; }
  body.customer-body #appView .console-page-head { align-items: flex-start; }
  body.customer-body #appView .console-page-head h1,
  body.customer-body #appView .workspace-page-title { font-size: 20px !important; }
  body.customer-body #appView .form-grid { grid-template-columns: minmax(0, 1fr); }
  body.customer-body dialog { max-width: calc(100vw - 24px); }
  body.customer-body .modal-card { max-height: 86vh; padding: 16px; }
  body.customer-body #appView table { font-size: 12px !important; }
  body.customer-body #appView thead th,
  body.customer-body #appView tbody td { padding: 9.6px 12px; }
}

@media (max-width: 480px) {
  body.customer-body #appView .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9.6px; }
  body.customer-body #appView .stat-card { min-height: 99.2px; padding: 12.8px; }
  body.customer-body #appView .stat-card strong,
  body.customer-body #appView .stat-card b { font-size: 20px !important; }
  body.customer-body #appView .console-data-welcome { flex-direction: column; align-items: flex-start; }
  body.customer-body #appView .console-data-actions,
  body.customer-body #appView .console-quick-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.customer-body #appView *,
  body.customer-body dialog * { transition: none !important; animation: none !important; }
}