/* card-soft.css — 用户端卡片柔和风格（仅作用于 #customerApp，管理后台不受影响） */
#customerApp {
  --cs-border: rgba(15, 23, 42, .06);
  --cs-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --cs-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px rgba(15, 23, 42, .08);
  --cs-muted: #7a8599;
  --cs-ease: 180ms cubic-bezier(.2, .7, .3, 1);
  background: linear-gradient(180deg, #f6f8fc 0%, #f3f5fa 100%) !important;
}

/* 通用卡片容器 */
#customerApp .panel,
#customerApp .vendor-section,
#customerApp .media-form,
#customerApp .agent-card,
#customerApp .vendor-card,
#customerApp .ms-card,
#customerApp .channel-card,
#customerApp .customer-plan-card,
#customerApp .subscription-card,
#customerApp .aku-key-card,
#customerApp .quick-card,
#customerApp .metrics article,
#customerApp .customer-metrics article,
#customerApp .ud-cards article,
#customerApp .profile-grid article,
#customerApp .fm-metric {
  background: #fff !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--cs-shadow) !important;
}
#customerApp section.panel.chat-panel { border-radius: 0 !important; box-shadow: none !important; }

#customerApp .panel { padding: 22px 24px; }
#customerApp .panel-head { border-bottom-color: rgba(15, 23, 42, .05) !important; }
#customerApp .panel-head h3 { font-weight: 600; }
#customerApp .panel .muted,
#customerApp .section-hint,
#customerApp .panel-head p { color: var(--cs-muted); }

/* 去掉卡片上/左侧粗色条 */
#customerApp .metrics article::before,
#customerApp .customer-metrics article::before,
#customerApp .ud-cards article::before,
#customerApp .profile-grid article::before,
#customerApp .vendor-card::before,
#customerApp .ms-card::before,
#customerApp .customer-plan-card::before,
#customerApp .balance-chip::before,
#customerApp .portal-topbar > div::before { display: none !important; }
#customerApp .portal-topbar > div { padding-left: 0 !important; }
#customerApp .portal-topbar { border-bottom-color: rgba(15, 23, 42, .05) !important; }

/* 指标卡片：小色点代替色条 */
#customerApp .metrics article,
#customerApp .customer-metrics article,
#customerApp .profile-grid article { padding: 18px 20px !important; }
#customerApp .metrics article small,
#customerApp .customer-metrics article small,
#customerApp .profile-grid article small {
  display: inline-flex; align-items: center; gap: 7px; color: var(--cs-muted); font-weight: 500;
}
#customerApp .metrics article small::before,
#customerApp .customer-metrics article small::before,
#customerApp .profile-grid article small::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yb-violet, #6239e8); opacity: .55;
}
#customerApp .metrics article:nth-child(2) small::before,
#customerApp .profile-grid article:nth-child(2) small::before { background: var(--yb-cyan, #1597a8); }
#customerApp .metrics article:nth-child(3) small::before,
#customerApp .profile-grid article:nth-child(3) small::before { background: var(--yb-green, #16a36b); }
#customerApp .metrics article:nth-child(4) small::before { background: #f08a5d; }
#customerApp .profile-grid article strong { font-size: 15px; overflow-wrap: anywhere; word-break: normal; }

/* 侧边栏余额卡片 */
#customerApp .balance-chip {
  padding: 12px 14px !important;
  background: linear-gradient(135deg, #fff 0%, #f8f6ff 100%) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

/* 快捷入口：去掉左粗边 */
#customerApp .quick-card {
  border-left: 1px solid var(--cs-border) !important;
  padding: 20px 48px 20px 22px !important;
  background: linear-gradient(135deg, #fff 0%, #fbfaff 100%) !important;
}

/* 仅可点击卡片：悬停上浮 */
#customerApp .quick-card,
#customerApp .vendor-card,
#customerApp .ms-card,
#customerApp .agent-card,
#customerApp .customer-plan-card,
#customerApp .aku-key-card {
  transition: transform var(--cs-ease), box-shadow var(--cs-ease), border-color var(--cs-ease) !important;
}
#customerApp .quick-card:hover,
#customerApp .vendor-card:hover,
#customerApp .ms-card:hover,
#customerApp .agent-card:hover,
#customerApp .customer-plan-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-hover) !important;
  border-color: rgba(98, 57, 232, .14) !important;
}

/* 内部小组件 */
#customerApp .table-wrap,
#customerApp .inv-order-wrap,
#customerApp .media-result,
#customerApp .aku-availability-note {
  border-radius: 12px !important;
  border-color: rgba(15, 23, 42, .07) !important;
}
#customerApp .aku-availability-note { border-color: rgba(214, 158, 46, .22) !important; background: #fffaf0 !important; }
#customerApp .usage-subsection,
#customerApp .aku-key-metrics { border-style: solid !important; border-color: rgba(15, 23, 42, .05) !important; }

/* 大横幅：圆角统一、阴影更轻 */
#customerApp .marketing-hero,
#customerApp .ms-hero,
#customerApp .media-hub-hero {
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(31, 43, 89, .10) !important;
}

@media (max-width: 720px) {
  #customerApp .panel { padding: 16px; }
  #customerApp .panel, #customerApp .metrics article { border-radius: 14px !important; }
}