/**
 * 86hc.com · 香港汇丰商业银行开户绿色通道专属样式表
 * 严格遵循 86HC GEMINI.md 核心规范：
 * 1. 按钮主行动色严格保持 #1d6ff2 (纯白文字，暗黑模式背景恒定隔离)
 * 2. 企微顾问直联按钮官方绿渐变 linear-gradient(135deg, #059669 0%, #047857 100%)
 * 3. 1240px 对称容器标尺 (.hsbc-container)
 * 4. 完美适配 [data-theme="dark"] / html.dark / body.dark-theme / .dark 全模式
 */

/* ==========================================================================
   1. 设计令牌体系与暗黑模式定义
   ========================================================================== */

:root {
  --hsbc-bg-canvas: var(--canvas, #f0f4f8);
  --hsbc-bg-card: var(--surface, #ffffff);
  --hsbc-bg-subtle: var(--surface-sub, #f8fafc);
  --hsbc-border: var(--border-color, #d9e2ec);
  --hsbc-border-subtle: var(--border-subtle, #e2e8f0);
  --hsbc-text-primary: var(--text-primary, #0d192b);
  --hsbc-text-secondary: var(--text-secondary, #273e56);
  --hsbc-text-muted: var(--text-muted, #475569);
  --hsbc-primary-blue: var(--blue, #1d6ff2);
  --hsbc-primary-hover: var(--blue-hover, #1558cc);
  --hsbc-primary-active: var(--blue-active, #0e46a8);
  --hsbc-primary-light: var(--blue-light, #eff6ff);
  --hsbc-primary-border: var(--blue-border, #bfdbfe);
  --hsbc-primary-text: var(--blue-text, #1558cc);
  --hsbc-accent-red: #db0011;
  --hsbc-accent-emerald: var(--emerald, #059669);
  --hsbc-accent-amber: var(--amber, #d97706);
  --hsbc-accent-rose: #e11d48;
  --hsbc-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --hsbc-shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --hsbc-shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --hsbc-radius-sm: 6px;
  --hsbc-radius-md: 10px;
  --hsbc-radius-lg: 14px;
  --hsbc-radius-xl: 20px;
}

.dark,
body.dark-theme,
[data-theme="dark"],
html.dark {
  --hsbc-bg-canvas: #090f1d;
  --hsbc-bg-card: #0f1a2e;
  --hsbc-bg-subtle: #14223a;
  --hsbc-border: rgba(255, 255, 255, 0.12);
  --hsbc-border-subtle: rgba(255, 255, 255, 0.07);
  --hsbc-text-primary: #f8fafc;
  --hsbc-text-secondary: #cbd5e1;
  --hsbc-text-muted: #8ea4bc;
  /* 恒定皇家蓝主色，严格遵循规则 3 */
  --hsbc-primary-blue: #1d6ff2;
  --hsbc-primary-hover: #1558cc;
  --hsbc-primary-active: #0e46a8;
  --hsbc-primary-light: rgba(29, 111, 242, 0.16);
  --hsbc-primary-highlight: #38bdf8;
  --hsbc-accent-emerald: #34d399;
  --hsbc-accent-amber: #fbbf24;
  --hsbc-accent-rose: #fb7185;
  --hsbc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --hsbc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --hsbc-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.7);
}



/* ==========================================================================
   2. 基础容器与门户结构
   ========================================================================== */

.hsbc-opening-portal {
  background-color: var(--hsbc-bg-canvas);
  color: var(--hsbc-text-secondary);
  min-height: 100vh;
  padding-top: 16px !important;
  padding-bottom: 80px;
  line-height: 1.6;
}

.hsbc-container {
  width: 100% !important;
  max-width: var(--container-max-width, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: calc(var(--container-padding-x, 24px) + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(var(--container-padding-x, 24px) + env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box !important;
}

/* 面包屑导航 - 标准对齐全站规范，上下留白黄金比例 */
.hsbc-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  row-gap: 6px !important;
  column-gap: 8px !important;
  font-size: 13px !important;
  color: var(--hsbc-text-muted) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hsbc-breadcrumb .breadcrumb-link,
.hsbc-breadcrumb .crumb-link,
.hsbc-breadcrumb a {
  color: var(--hsbc-text-muted) !important;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap !important;
}

.hsbc-breadcrumb .breadcrumb-link:hover,
.hsbc-breadcrumb .crumb-link:hover,
.hsbc-breadcrumb a:hover {
  color: var(--hsbc-primary-blue) !important;
}

.dark .hsbc-breadcrumb .breadcrumb-link:hover,
.dark .hsbc-breadcrumb .crumb-link:hover,
.dark .hsbc-breadcrumb a:hover {
  color: #38bdf8 !important;
}

.hsbc-breadcrumb .breadcrumb-sep,
.hsbc-breadcrumb .crumb-sep,
.hsbc-bc-sep {
  opacity: 0.5;
  color: var(--hsbc-border) !important;
  user-select: none;
}

.hsbc-breadcrumb .breadcrumb-current,
.hsbc-breadcrumb .crumb-current,
.hsbc-bc-current {
  color: var(--hsbc-text-primary) !important;
  font-weight: 600;
  word-break: break-word;
}

/* ==========================================================================
   3. Hero 区域与 恒诚 × 汇丰 联名合规横幅
   ========================================================================== */

.hsbc-hero-section {
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

.hsbc-hero-card {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-xl);
  padding: 28px 36px 28px;
  box-shadow: var(--hsbc-shadow-md);
  position: relative;
  overflow: hidden;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hsbc-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1d6ff2 0%, #db0011 100%);
  z-index: 2;
}

.hsbc-hero-content {
  text-align: left !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 恒诚 × 汇丰 顶级机构联名合作背书条 */
.hsbc-co-brand-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hsbc-co-brand-partner-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hsbc-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: 9999px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition: all 0.2s ease;
}

.dark .hsbc-partner-badge,
body.dark-theme .hsbc-partner-badge,
[data-theme="dark"] .hsbc-partner-badge,
html.dark .hsbc-partner-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.hsbc-partner-logo-wrap {
  display: flex;
  align-items: center;
}

.hsbc-hc-logo-img {
  height: 20px;
  width: auto;
  display: block;
  object-fit: contain;
}

.hsbc-hc-logo-dark {
  display: none !important;
}

.dark .hsbc-hc-logo-light,
body.dark-theme .hsbc-hc-logo-light,
[data-theme="dark"] .hsbc-hc-logo-light,
html.dark .hsbc-hc-logo-light {
  display: none !important;
}

.dark .hsbc-hc-logo-dark,
body.dark-theme .hsbc-hc-logo-dark,
[data-theme="dark"] .hsbc-hc-logo-dark,
html.dark .hsbc-hc-logo-dark {
  display: block !important;
}

.hsbc-tcsp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #1d6ff2;
  background: rgba(29, 111, 242, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
}

.dark .hsbc-tcsp-chip,
body.dark-theme .hsbc-tcsp-chip,
[data-theme="dark"] .hsbc-tcsp-chip,
html.dark .hsbc-tcsp-chip {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

.hsbc-partner-cross {
  font-size: 16px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
}

.hsbc-partner-bank {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hsbc-bank-hexagon-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hsbc-logo-hexagon {
  width: 34px;
  height: 17px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(219, 0, 17, 0.2));
}

.hsbc-bank-brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hsbc-bank-en {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.5px;
  line-height: 1;
}

.dark .hsbc-bank-en,
body.dark-theme .hsbc-bank-en,
[data-theme="dark"] .hsbc-bank-en,
html.dark .hsbc-bank-en {
  color: #ffffff;
}

.hsbc-bank-zh {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  line-height: 1;
}

.dark .hsbc-bank-zh,
body.dark-theme .hsbc-bank-zh,
[data-theme="dark"] .hsbc-bank-zh,
html.dark .hsbc-bank-zh {
  color: #cbd5e1;
}

/* 官方直联绿色通道状态标识 */
.hsbc-channel-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  padding: 6px 14px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
}

.dark .hsbc-channel-indicator,
body.dark-theme .hsbc-channel-indicator,
[data-theme="dark"] .hsbc-channel-indicator,
html.dark .hsbc-channel-indicator {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
}

.hsbc-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: hsbcPulseLive 2s infinite ease-in-out;
  flex-shrink: 0;
}

.hsbc-channel-text {
  font-size: 12px;
  font-weight: 700;
  color: #047857;
  letter-spacing: 0.2px;
  line-height: 1;
}

.dark .hsbc-channel-text,
body.dark-theme .hsbc-channel-text,
[data-theme="dark"] .hsbc-channel-text,
html.dark .hsbc-channel-text {
  color: #34d399;
}

/* 标题与版式层次体系 */
.hsbc-hero-typography {
  margin-bottom: 0;
  text-align: left !important;
}

.hsbc-hero-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
  line-height: 1.28;
  margin: 0 0 14px 0;
  letter-spacing: 0.015em;
  text-align: left !important;
}

html[lang="en"] .hsbc-hero-title {
  letter-spacing: 0;
}

.hsbc-title-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #1d6ff2 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  margin-left: 10px;
}

.dark .hsbc-title-highlight,
body.dark-theme .hsbc-title-highlight,
[data-theme="dark"] .hsbc-title-highlight,
html.dark .hsbc-title-highlight {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hsbc-hero-desc {
  font-size: 14px;
  color: var(--hsbc-text-secondary);
  line-height: 1.75;
  margin: 0;
  max-width: 980px;
  text-align: left !important;
}

/* 核心 4 大指标 Bento 矩阵 (彻底消除孤行破损，对称 4 列) */
.hsbc-hero-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  margin-top: 22px;
}

.hsbc-metric-card {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: 12px;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.hsbc-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 111, 242, 0.35);
  box-shadow: 0 6px 16px -2px rgba(29, 111, 242, 0.1);
}

.dark .hsbc-metric-card:hover,
body.dark-theme .hsbc-metric-card:hover,
[data-theme="dark"] .hsbc-metric-card:hover,
html.dark .hsbc-metric-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.hsbc-mc-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(29, 111, 242, 0.08);
  color: #1d6ff2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.dark .hsbc-mc-icon-wrap,
body.dark-theme .hsbc-mc-icon-wrap,
[data-theme="dark"] .hsbc-mc-icon-wrap,
html.dark .hsbc-mc-icon-wrap {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.hsbc-mc-content {
  display: flex;
  flex-direction: column;
}

.hsbc-mc-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  line-height: 1.35;
  white-space: nowrap;
}

.hsbc-mc-desc {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  margin-top: 4px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧法定持牌合规预审服务台卡片 */
.hsbc-hero-aside {
  display: flex;
  flex-direction: column;
}

.hsbc-trust-card {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 24px;
  box-shadow: var(--hsbc-shadow-md);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
}

.hsbc-trust-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(29, 111, 242, 0.08) 0%, rgba(29, 111, 242, 0) 70%);
  pointer-events: none;
}

.hsbc-trust-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbc-trust-seal {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1d6ff2 0%, #0284c7 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(29, 111, 242, 0.25);
}

.hsbc-seal-check {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--hsbc-bg-card);
  box-sizing: content-box;
}

.hsbc-trust-title-group {
  display: flex;
  flex-direction: column;
}

.hsbc-trust-h-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  line-height: 1.3;
}

.hsbc-trust-h-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.hsbc-licence-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #1d6ff2;
  background: rgba(29, 111, 242, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.dark .hsbc-licence-badge,
body.dark-theme .hsbc-licence-badge,
[data-theme="dark"] .hsbc-licence-badge,
html.dark .hsbc-licence-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

.hsbc-licence-gov {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  font-weight: 600;
}

/* 实时顾问在线状态指示条 */
.hsbc-live-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 6px 12px;
  border-radius: 8px;
}

.hsbc-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: hsbcPulseLive 2s infinite ease-in-out;
  flex-shrink: 0;
}

.hsbc-live-status-text {
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  letter-spacing: 0.1px;
}

.dark .hsbc-live-status-text,
body.dark-theme .hsbc-live-status-text,
[data-theme="dark"] .hsbc-live-status-text,
html.dark .hsbc-live-status-text {
  color: #34d399;
}

/* 3 项法定合规承诺清单 */
.hsbc-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hsbc-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hsbc-trust-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.dark .hsbc-trust-item-icon,
body.dark-theme .hsbc-trust-item-icon,
[data-theme="dark"] .hsbc-trust-item-icon,
html.dark .hsbc-trust-item-icon {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.hsbc-trust-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hsbc-trust-item-text strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
  line-height: 1.35;
}

.hsbc-trust-item-text span {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  line-height: 1.45;
}

/* 企微直联按钮区域 (严格遵从 Rule 3 企微绿规范) */
.hsbc-trust-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.hsbc-btn-wecom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  border-radius: var(--hsbc-radius-md);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
}

.hsbc-btn-wecom:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
  color: #ffffff !important;
}

.hsbc-trust-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--hsbc-text-muted);
  font-weight: 600;
}

.hsbc-trust-footnote svg {
  color: #059669;
  flex-shrink: 0;
}

.hsbc-btn-lg {
  padding: 13px 26px;
  font-size: 14px;
}

@keyframes hsbcPulseLive {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   4. 核心 6 步开户表单向导 (Stepper + Form Card)
   ========================================================================== */

.hsbc-wizard-section {
  padding-bottom: 40px;
}

.hsbc-wizard-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stepper 步骤指示栏 */
.hsbc-stepper-bar {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--hsbc-shadow-sm);
  overflow-x: auto;
}

.hsbc-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: var(--hsbc-radius-md);
  user-select: none;
}

.hsbc-step-item:hover {
  opacity: 0.9;
}

.hsbc-step-item.active {
  opacity: 1;
}

.hsbc-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hsbc-bg-subtle);
  border: 2px solid var(--hsbc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbc-text-muted);
  transition: all 0.2s ease;
}

.hsbc-step-item.active .hsbc-step-dot {
  background: var(--hsbc-primary-blue);
  border-color: var(--hsbc-primary-blue);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(29, 111, 242, 0.18);
}

.hsbc-step-item.completed .hsbc-step-dot {
  background: var(--hsbc-accent-emerald);
  border-color: var(--hsbc-accent-emerald);
  color: #ffffff;
}

.hsbc-step-item .hsbc-step-check {
  display: none;
}

.hsbc-step-item.completed .hsbc-step-check {
  display: block;
}

.hsbc-step-item.completed .hsbc-step-num {
  display: none;
}

.hsbc-step-info {
  display: flex;
  flex-direction: column;
}

.hsbc-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
}

.hsbc-step-sub {
  font-size: 11px;
  color: var(--hsbc-text-muted);
}

.hsbc-step-line {
  flex: 1;
  height: 2px;
  background: var(--hsbc-border);
  margin: 0 12px;
  min-width: 24px;
}

.hsbc-step-line.completed {
  background: var(--hsbc-accent-emerald);
}

/* 主操作卡片 */
.hsbc-card-container {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-xl);
  box-shadow: var(--hsbc-shadow-md);
  padding: 32px 36px;
}

.hsbc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--hsbc-border-subtle);
}

.hsbc-draft-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--hsbc-text-muted);
}

.hsbc-draft-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.hsbc-step-counter {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-primary-blue);
  background: var(--hsbc-primary-light);
  padding: 4px 10px;
  border-radius: 9999px;
}

/* Step Pane 切换控制 */
.hsbc-step-pane {
  display: none;
}

.hsbc-step-pane.active {
  display: block;
  animation: hsbcFadeIn 0.25s ease-out forwards;
}

@keyframes hsbcFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hsbc-pane-head {
  margin-bottom: 26px;
}

.hsbc-pane-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin: 0 0 8px 0;
  letter-spacing: 0;
}

.hsbc-pane-subtitle {
  font-size: 13px;
  color: var(--hsbc-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* 表单行与列控件 */
.hsbc-form-row {
  margin-bottom: 20px;
}

.hsbc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hsbc-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.hsbc-row-applicant-names {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 20px;
}

.hsbc-input-upper {
  text-transform: uppercase;
}

.hsbc-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--hsbc-text-muted);
  margin-left: 4px;
}

.hsbc-form-col {
  display: flex;
  flex-direction: column;
}

.hsbc-field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hsbc-required {
  color: var(--hsbc-accent-rose);
  font-weight: 600;
}

.hsbc-field-hint {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  margin-top: 5px;
}

.hsbc-input,
.hsbc-select,
.hsbc-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--hsbc-radius-md);
  border: 1px solid var(--hsbc-border);
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.hsbc-input:focus,
.hsbc-select:focus,
.hsbc-textarea:focus {
  outline: none;
  border-color: var(--hsbc-primary-blue);
  background: var(--hsbc-bg-card);
  box-shadow: 0 0 0 3px rgba(29, 111, 242, 0.15);
}

.hsbc-input::placeholder,
.hsbc-textarea::placeholder {
  color: var(--hsbc-text-muted);
  opacity: 0.6;
}

/* 手机号与前缀 */
.hsbc-phone-input-group {
  display: flex;
  gap: 10px;
}

.hsbc-select-prefix {
  width: 150px;
  flex-shrink: 0;
  padding: 10px 12px;
  border-radius: var(--hsbc-radius-md);
  border: 1px solid var(--hsbc-border);
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-primary);
  font-size: 13px;
  font-family: inherit;
}

/* ==========================================================================
   5. Step 1: 企业搜索与法团档案卡片
   ========================================================================== */

.hsbc-search-box-wrap {
  position: relative;
  margin-bottom: 24px;
}

.hsbc-search-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.hsbc-search-icon {
  position: absolute;
  left: 14px;
  color: var(--hsbc-text-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hsbc-search-input-group .hsbc-input {
  padding-left: 42px;
  padding-right: 110px;
  height: 48px;
  font-size: 14px;
  border-radius: var(--hsbc-radius-lg);
}

.hsbc-btn-search {
  position: absolute;
  right: 6px;
  background: var(--hsbc-primary-blue);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--hsbc-radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsbc-btn-search:hover {
  background: var(--hsbc-primary-hover);
}

.hsbc-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  box-shadow: var(--hsbc-shadow-lg);
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.hsbc-search-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hsbc-border-subtle);
  cursor: pointer;
  transition: background 0.15s ease;
}

.hsbc-search-item:last-child {
  border-bottom: none;
}

.hsbc-search-item:hover {
  background: var(--hsbc-primary-light);
}

.hsbc-si-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
  margin-bottom: 3px;
}

.hsbc-si-meta {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  display: flex;
  gap: 12px;
}

/* ==========================================================================
   5. 选中法团展示卡片 (一行流极简设计 · 品牌双色渐变微边框选中态)
   ========================================================================== */
.hsbc-company-card {
  position: relative;
  background: 
    linear-gradient(var(--hsbc-bg-card, #ffffff), var(--hsbc-bg-card, #ffffff)) padding-box,
    linear-gradient(90deg, rgba(29, 111, 242, 0.42) 0%, rgba(139, 92, 246, 0.32) 50%, rgba(219, 0, 17, 0.4) 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--hsbc-radius-md, 8px);
  padding: 12px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px -2px rgba(29, 111, 242, 0.07), 0 2px 10px -2px rgba(219, 0, 17, 0.05);
  transition: all 0.2s ease;
  overflow: hidden;
}

/* 顶部极细渐变微高光条 (浅一点、细一点：2px，与 Hero 联名渐变呼应但更细致柔和) */
.hsbc-company-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(29, 111, 242, 0.7) 0%, rgba(139, 92, 246, 0.5) 50%, rgba(219, 0, 17, 0.65) 100%);
  z-index: 1;
}

.hsbc-cc-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hsbc-cc-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  line-height: 1.4;
}

.hsbc-cc-name-zh {
  font-size: 16px;
  font-weight: 600;
  color: var(--hsbc-text-primary, #0d192b);
  letter-spacing: 0;
  white-space: nowrap;
}

.hsbc-cc-name-en {
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbc-text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hsbc-cc-sep {
  width: 1px;
  height: 12px;
  background: var(--hsbc-border, #cbd5e1);
  flex-shrink: 0;
}

.hsbc-cc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.hsbc-cc-meta-label {
  color: var(--hsbc-text-muted, #64748b);
  font-weight: 500;
}

.hsbc-cc-meta-val {
  color: var(--hsbc-text-primary, #0d192b);
  font-weight: 700;
}

.hsbc-btn-reselect {
  flex-shrink: 0;
  font-size: 12px;
  padding: 5px 12px;
}

.hsbc-cc-dossier-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--hsbc-border, #cbd5e1);
  display: flex;
  align-items: center;
}

.hsbc-dossier-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 9999px;
  line-height: 1.4;
}

.hsbc-dossier-sync-badge svg {
  color: #059669;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hsbc-cc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hsbc-cc-name-zh,
  .hsbc-cc-name-en {
    white-space: normal;
  }
  .hsbc-btn-reselect {
    align-self: flex-start;
  }
}

.dark .hsbc-company-card {
  background: 
    linear-gradient(#111e33, #111e33) padding-box,
    linear-gradient(90deg, rgba(56, 189, 248, 0.4) 0%, rgba(168, 85, 247, 0.3) 50%, rgba(248, 113, 113, 0.4) 100%) border-box;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 12px -2px rgba(56, 189, 248, 0.1);
}

.dark .hsbc-company-card::before {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.65) 0%, rgba(168, 85, 247, 0.45) 50%, rgba(248, 113, 113, 0.55) 100%);
}

.dark .hsbc-cc-name-zh {
  color: #f8fafc;
}

.dark .hsbc-cc-name-en {
  color: #94a3b8;
}

.dark .hsbc-cc-sep {
  background: rgba(255, 255, 255, 0.15);
}

.dark .hsbc-cc-meta-label {
  color: #94a3b8;
}

.dark .hsbc-cc-meta-val {
  color: #f8fafc;
}

.dark .hsbc-cc-dossier-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.dark .hsbc-dossier-sync-badge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
}

.dark .hsbc-dossier-sync-badge svg {
  color: #34d399;
}


.hsbc-link-btn {
  background: none;
  border: none;
  color: var(--hsbc-primary-blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
}

.hsbc-link-btn:hover {
  text-decoration: underline;
}

/* ==========================================================================
   6. Step 3: 商业运营与行业卡片
   ========================================================================== */

.hsbc-bank-lock-card {
  background: linear-gradient(135deg, rgba(219, 0, 17, 0.04) 0%, rgba(29, 111, 242, 0.04) 100%);
  border: 1px solid rgba(219, 0, 17, 0.2);
  border-radius: var(--hsbc-radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.hsbc-blk-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hsbc-blk-hex {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: var(--hsbc-shadow-sm);
}

.hsbc-blk-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
}

.hsbc-blk-tag {
  font-size: 12px;
  color: var(--hsbc-text-muted);
  font-family: var(--font-mono);
}

.hsbc-blk-badge {
  font-size: 12px;
  font-weight: 700;
  color: #db0011;
  background: #ffe4e6;
  padding: 4px 10px;
  border-radius: 9999px;
}

.hsbc-field-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin: 24px 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hsbc-border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 行业选择 5 大卡片 */
.hsbc-industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.hsbc-ind-card {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.hsbc-ind-card:hover {
  border-color: var(--hsbc-primary-blue);
  transform: translateY(-2px);
}

.hsbc-ind-card.active {
  background: var(--hsbc-primary-light);
  border-color: var(--hsbc-primary-blue);
  box-shadow: 0 0 0 2px rgba(29, 111, 242, 0.25);
}

.hsbc-ind-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--hsbc-primary-blue);
  margin-bottom: 6px;
}

.hsbc-ind-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin-bottom: 6px;
}

.hsbc-ind-desc {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  line-height: 1.4;
  margin-top: auto;
}

/* 细分子类 Chips 标签 */
.hsbc-sub-cat-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.hsbc-sub-cat-label {
  font-size: 12px;
  color: var(--hsbc-text-muted);
  font-weight: 600;
}

.hsbc-sub-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbc-sub-chip-btn {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbc-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.hsbc-sub-chip-btn:hover,
.hsbc-sub-chip-btn.active {
  background: var(--hsbc-primary-blue);
  color: #ffffff;
  border-color: var(--hsbc-primary-blue);
}

/* 币种选择 Chips */
.hsbc-currency-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hsbc-chip-check {
  display: inline-flex;
  cursor: pointer;
}

.hsbc-chip-check input {
  display: none;
}

.hsbc-chip-check span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-text-secondary);
  transition: all 0.15s ease;
}

.hsbc-chip-check input:checked + span {
  background: var(--hsbc-primary-blue);
  color: #ffffff;
  border-color: var(--hsbc-primary-blue);
}

.hsbc-chip-select-all span {
  border-style: dashed;
}

.hsbc-chip-select-all input:checked + span {
  border-style: solid;
}

/* 企业实际经营地址与商业通讯地址 */
.hsbc-address-block {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.hsbc-address-row {
  margin-bottom: 16px;
}

.hsbc-address-row:last-child {
  margin-bottom: 0;
}

.hsbc-address-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}

.hsbc-checkbox-label-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-primary-blue);
  user-select: none;
}

.hsbc-checkbox-label-inline input {
  display: none;
}

.hsbc-checkbox-label-inline .hsbc-checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--hsbc-border);
  border-radius: 4px;
  background: var(--hsbc-bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.hsbc-checkbox-label-inline input:checked + .hsbc-checkbox-custom {
  background: var(--hsbc-primary-blue);
  border-color: var(--hsbc-primary-blue);
}

.hsbc-checkbox-label-inline input:checked + .hsbc-checkbox-custom::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.hsbc-postal-address-wrap.is-synced .hsbc-input,
.hsbc-business-address-wrap.is-synced .hsbc-input {
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-muted);
  cursor: not-allowed;
  border-style: dashed;
}

.hsbc-addr-mode-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hsbc-chip-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}

.hsbc-chip-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hsbc-chip-radio span {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: 999px;
  color: var(--hsbc-text-secondary);
  font-weight: 500;
  transition: all 0.15s ease;
}

.hsbc-chip-radio input:checked + span {
  background: var(--hsbc-primary-light);
  border-color: var(--hsbc-primary-blue);
  color: var(--hsbc-primary-blue);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(29, 111, 242, 0.15);
}

.hsbc-chip-radio:hover span {
  border-color: var(--hsbc-primary-blue);
  color: var(--hsbc-primary-blue);
}

.hsbc-addr-quick-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.hsbc-addr-quick-label {
  font-size: 11px;
  color: var(--hsbc-text-muted);
}

.hsbc-addr-tag-btn {
  font-size: 11px;
  color: var(--hsbc-text-secondary);
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hsbc-addr-tag-btn:hover {
  border-color: var(--hsbc-primary-blue);
  color: var(--hsbc-primary-blue);
  background: var(--hsbc-primary-light);
}

/* 主要资金往来国家/地区及占比 (TOP 1-4 · 单行 4 项并排) */
.hsbc-trading-countries-block {
  width: 100%;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 18px 20px;
}

.hsbc-tc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.hsbc-tc-total-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-text-secondary);
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsbc-tc-total-pill.is-100 {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.hsbc-tc-sub-hint {
  font-size: 12px;
  color: var(--hsbc-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* 4 个选项并排在一行 (4-Column Single Row Grid) */
.hsbc-tc-grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.hsbc-tc-col {
  min-width: 0;
}

.hsbc-tc-col-card {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  padding: 4px 6px 4px 8px;
  transition: all 0.15s ease;
  height: 42px;
  box-sizing: border-box;
}

.hsbc-tc-col-card:focus-within {
  border-color: var(--hsbc-primary-blue);
  box-shadow: 0 0 0 1px var(--hsbc-primary-blue);
}

.hsbc-tc-col-card.is-filled {
  border-color: rgba(29, 111, 242, 0.4);
}

.hsbc-tc-col-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbc-text-muted);
  font-family: var(--font-mono);
  background: var(--hsbc-bg-subtle);
  border-radius: 4px;
  padding: 2px 5px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
  user-select: none;
}

.hsbc-tc-col-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 4px 6px !important;
  height: 34px !important;
  font-size: 13px !important;
  color: var(--hsbc-text-primary);
  box-shadow: none !important;
}

.hsbc-tc-col-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.hsbc-tc-col-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-muted);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s;
}

.hsbc-tc-col-clear:hover {
  background: #fee2e2;
  color: #dc2626;
}

.dark .hsbc-tc-col-clear:hover,
[data-theme="dark"] .hsbc-tc-col-clear:hover,
html.dark .hsbc-tc-col-clear:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.hsbc-tc-col-divider {
  width: 1px;
  height: 20px;
  background: var(--hsbc-border);
  flex-shrink: 0;
  margin: 0 2px;
}

.hsbc-tc-col-share-wrap {
  flex-shrink: 0;
}

.hsbc-tc-col-select {
  width: 62px !important;
  height: 32px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 4px !important;
  border: 1px solid var(--hsbc-border) !important;
  border-radius: 4px !important;
  background: var(--hsbc-bg-subtle) !important;
  color: var(--hsbc-text-primary) !important;
  cursor: pointer;
  flex-shrink: 0;
}

.hsbc-tc-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.hsbc-tc-quick-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hsbc-tc-quick-label {
  font-size: 11px;
  color: var(--hsbc-text-muted);
}

.hsbc-tc-tag-btn {
  font-size: 11px;
  color: var(--hsbc-text-secondary);
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.hsbc-tc-tag-btn:hover {
  border-color: var(--hsbc-primary-blue);
  color: var(--hsbc-primary-blue);
  background: var(--hsbc-primary-light);
}

/* 营运主体与关联背景选择器 (Step 3 Section 4) */
.hsbc-track-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.hsbc-track-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--hsbc-bg-subtle);
  border: 1.5px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}

.hsbc-track-card:hover {
  border-color: #93c5fd;
  background: #f8faff;
  transform: translateY(-1px);
}

.hsbc-track-card.active {
  border-color: var(--hsbc-primary-blue, #1d6ff2);
  background: #f0f7ff;
  box-shadow: 0 4px 14px rgba(29, 111, 242, 0.08);
}

.hsbc-tc-radio-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
  position: relative;
}

.hsbc-track-card.active .hsbc-tc-radio-indicator {
  border-color: var(--hsbc-primary-blue, #1d6ff2);
  background: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-track-card.active .hsbc-tc-radio-indicator::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

.hsbc-tc-content {
  flex: 1;
  min-width: 0;
}

.hsbc-tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.hsbc-tc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hsbc-text-primary, #0f172a);
}

.hsbc-tc-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hsbc-text-muted, #64748b);
}

.hsbc-tc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.hsbc-tc-badge.badge-green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.hsbc-tc-badge.badge-blue {
  background: #eff6ff;
  color: #1d6ff2;
  border: 1px solid #bfdbfe;
}

.hsbc-tc-badge.badge-purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.hsbc-track-details-block {
  margin-bottom: 18px;
  animation: hsbcFadeIn 0.25s ease;
}

.hsbc-track-note-box {
  background: #f8fafc;
  border: 1px dashed var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  padding: 12px 14px;
}

.hsbc-tnb-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
  margin-bottom: 4px;
}

.hsbc-tnb-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hsbc-text-muted);
}

.hsbc-startup-guide-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  border-radius: var(--hsbc-radius-lg);
  padding: 16px 18px;
}

.hsbc-sgc-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.hsbc-sgc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #5b21b6;
  margin: 0 0 6px 0;
}

.hsbc-sgc-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #4c1d95;
  margin: 0;
}

/* Step 5 顶栏行业/背景感知与快捷切换条 */
.hsbc-step5-track-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid var(--hsbc-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.hsbc-s5tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbc-s5tb-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbc-text-muted);
}

.hsbc-s5tb-active-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-primary-blue, #1d6ff2);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 9px;
  border-radius: 4px;
}

.hsbc-step5-track-pills {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--hsbc-border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.hsbc-s5-track-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hsbc-text-muted);
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hsbc-s5-track-btn:hover {
  color: var(--hsbc-text-primary);
  background: #f1f5f9;
}

.hsbc-s5-track-btn.active {
  background: var(--hsbc-primary-blue, #1d6ff2);
  color: #ffffff;
  font-weight: 700;
}

/* 兼容历史开关组件 */
.hsbc-switch-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.hsbc-switch-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
}

.hsbc-switch-desc {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  margin-top: 2px;
}

.hsbc-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.hsbc-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.hsbc-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 24px;
}

.hsbc-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.hsbc-toggle-switch input:checked + .hsbc-switch-slider {
  background-color: var(--hsbc-primary-blue);
}

.hsbc-toggle-switch input:checked + .hsbc-switch-slider:before {
  transform: translateX(20px);
}

/* ==========================================================================
   7. Step 4: 股东董事仪表盘与卡片
   ========================================================================== */

.hsbc-officers-status-bar {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hsbc-osb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbc-osb-label {
  font-size: 12px;
  color: var(--hsbc-text-muted);
}

.hsbc-osb-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
}

.hsbc-osb-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

.badge-success {
  background: #dcfce7;
  color: #15803d;
}

.badge-warn {
  background: #fef3c7;
  color: #b45309;
}

.hsbc-osb-sep {
  width: 1px;
  height: 20px;
  background: var(--hsbc-border);
}

.hsbc-officer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.hsbc-oa-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
}

.hsbc-oa-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbc-officers-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hsbc-officer-card {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 20px;
  box-shadow: var(--hsbc-shadow-sm);
  position: relative;
}

.hsbc-oc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hsbc-border-subtle);
  gap: 12px;
  flex-wrap: wrap;
}

.hsbc-oc-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbc-oc-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-primary-blue);
  background: var(--hsbc-primary-light);
  padding: 3px 10px;
  border-radius: 6px;
}

.hsbc-oc-app-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
}

.hsbc-oc-entity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--hsbc-bg-subtle);
  border: 1px dashed var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  flex-wrap: wrap;
}

.hsbc-oc-entity-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbc-text-muted);
}

.hsbc-oc-entity-switch {
  display: inline-flex;
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.hsbc-oc-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--hsbc-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsbc-oc-switch-btn:hover {
  color: var(--hsbc-text-primary);
}

.hsbc-oc-switch-btn.active {
  background: var(--hsbc-primary-blue);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(29, 111, 242, 0.25);
}

.hsbc-oc-switch-btn.active svg {
  color: #ffffff;
}

.hsbc-oc-entity-hint {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  margin-left: auto;
}

.hsbc-oc-fixed-entity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbc-text-muted);
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  padding: 3px 8px;
  border-radius: 6px;
}

/* 法团机构法定授权代表专属区块 */
.hsbc-oc-rep-box {
  margin-top: 18px;
  padding: 16px;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  position: relative;
}

.hsbc-oc-rep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hsbc-border);
  flex-wrap: wrap;
  gap: 8px;
}

.hsbc-oc-rep-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
}

.hsbc-oc-rep-title svg {
  color: var(--hsbc-primary-blue);
}

.hsbc-oc-rep-desc {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 银行账户授权签署人勾选条 (Step 4 成员卡片内部) */
.hsbc-oc-signatory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  transition: all 0.2s ease;
}

.hsbc-oc-signatory-row:hover {
  border-color: rgba(29, 111, 242, 0.35);
}

.hsbc-oc-sig-check-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex: 1;
}

.hsbc-oc-sig-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hsbc-oc-sig-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hsbc-border);
  border-radius: 4px;
  background: var(--hsbc-bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.hsbc-oc-sig-checkbox:checked + .hsbc-oc-sig-check-box {
  background: var(--hsbc-primary-blue);
  border-color: var(--hsbc-primary-blue);
}

.hsbc-oc-sig-checkbox:checked + .hsbc-oc-sig-check-box::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.hsbc-oc-sig-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hsbc-oc-sig-text strong {
  font-size: 13px;
  color: var(--hsbc-text-primary);
  font-weight: 600;
}

.hsbc-oc-sig-desc {
  font-size: 11px;
  color: var(--hsbc-text-muted);
}

.hsbc-oc-sig-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.hsbc-oc-sig-badge.active {
  background: rgba(29, 111, 242, 0.1);
  color: var(--hsbc-primary-blue);
  border: 1px solid rgba(29, 111, 242, 0.25);
}

.hsbc-oc-sig-badge.inactive {
  background: var(--hsbc-bg-card);
  color: var(--hsbc-text-muted);
  border: 1px solid var(--hsbc-border);
}

.hsbc-oc-signatory-row.is-sole {
  background: rgba(29, 111, 242, 0.04);
  border-color: rgba(29, 111, 242, 0.18);
}

/* 银行账户签署权限安排大卡片 (Step 4 底部) */
.hsbc-signing-mandate-box {
  margin-top: 24px;
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 20px 24px;
  box-shadow: var(--hsbc-shadow-sm);
  transition: all 0.25s ease;
}

.hsbc-mandate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hsbc-border-subtle);
}

.hsbc-mandate-header-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hsbc-mandate-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(29, 111, 242, 0.1);
  color: var(--hsbc-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbc-mandate-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
  margin-bottom: 4px;
}

.hsbc-mandate-sub {
  font-size: 12px;
  color: var(--hsbc-text-muted);
  line-height: 1.5;
}

.hsbc-mandate-signatory-count {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: 8px;
  color: var(--hsbc-text-secondary);
  white-space: nowrap;
}

.hsbc-mandate-signatory-count.has-signatories {
  background: rgba(29, 111, 242, 0.08);
  color: var(--hsbc-primary-blue);
  border-color: rgba(29, 111, 242, 0.25);
}

.hsbc-mandate-modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .hsbc-mandate-modes-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-mandate-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hsbc-mandate-mode-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  background: var(--hsbc-bg-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsbc-mandate-mode-card:hover {
  border-color: rgba(29, 111, 242, 0.4);
  background: var(--hsbc-bg-card);
}

.hsbc-mandate-mode-card.active {
  border-color: var(--hsbc-primary-blue);
  background: rgba(29, 111, 242, 0.04);
  box-shadow: 0 4px 16px rgba(29, 111, 242, 0.08);
}

.hsbc-mandate-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hsbc-mandate-radio-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hsbc-border);
  border-radius: 50%;
  background: var(--hsbc-bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.2s ease;
}

.hsbc-mandate-mode-card.active .hsbc-mandate-radio-indicator {
  border-color: var(--hsbc-primary-blue);
}

.hsbc-mandate-mode-card.active .hsbc-mandate-radio-indicator::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hsbc-primary-blue);
}

.hsbc-mandate-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsbc-mandate-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbc-mandate-card-title {
  font-size: 13.5px;
  color: var(--hsbc-text-primary);
  font-weight: 700;
}

.hsbc-mandate-rec-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.hsbc-mandate-card-desc {
  font-size: 12px;
  color: var(--hsbc-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* 审阅页与签名徽章 */
.hsbc-rv-sig-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}

.hsbc-rv-sig-tag.active {
  background: rgba(29, 111, 242, 0.1);
  color: var(--hsbc-primary-blue);
  border: 1px solid rgba(29, 111, 242, 0.25);
}

.hsbc-rv-sig-tag.inactive {
  background: var(--hsbc-bg-card);
  color: var(--hsbc-text-muted);
  border: 1px solid var(--hsbc-border);
}

.hsbc-oss-mandate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 12px;
  background: rgba(29, 111, 242, 0.08);
  border: 1px solid rgba(29, 111, 242, 0.22);
  border-radius: 6px;
  font-size: 12px;
  color: var(--hsbc-primary-blue);
  font-weight: 600;
}

/* ==========================================================================
   8. Step 5: 材料清单与上传控件
   ========================================================================== */

.hsbc-docs-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

/* Step 5: 官方合规提醒横幅 (优先上传自备文件，无则查册) */
.hsbc-doc-tip-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--hsbc-radius-lg);
  padding: 16px 20px;
  margin-bottom: 4px;
}

.hsbc-dtb-icon {
  color: var(--hsbc-primary-blue, #1d6ff2);
  flex-shrink: 0;
  margin-top: 2px;
}

.hsbc-dtb-content {
  flex: 1;
}

.hsbc-dtb-title {
  font-size: 13px;
  font-weight: 500;
  color: #1e3a8a;
  margin-bottom: 4px;
}

.hsbc-dtb-desc {
  font-size: 12px;
  color: #2563eb;
  line-height: 1.55;
}

.dark .hsbc-doc-tip-banner {
  background: rgba(29, 111, 242, 0.1);
  border-color: rgba(56, 189, 248, 0.25);
}

.dark .hsbc-dtb-icon {
  color: #38bdf8;
}

.dark .hsbc-dtb-title {
  color: #93c5fd;
}

.dark .hsbc-dtb-desc {
  color: #bfdbfe;
}

/* Step 5: 一键全套法定档案直接付费调档卡片 */
.hsbc-dossier-package-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--hsbc-radius-lg);
  padding: 18px 22px;
  margin-top: 14px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px -2px rgba(29, 111, 242, 0.1);
}

.hsbc-dpc-main {
  flex: 1;
}

.hsbc-dpc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 4px;
}

.hsbc-dpc-bolt {
  color: #f59e0b;
  font-size: 15px;
}

.hsbc-dpc-desc {
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.55;
}

.hsbc-dpc-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 一键调档大按钮：恒定 #1d6ff2 皇家蓝 (Rule 3) */
.hsbc-btn-package-retrieve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border: 1px solid #1d6ff2 !important;
  border-radius: var(--hsbc-radius-md);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 111, 242, 0.3);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.hsbc-btn-package-retrieve:hover {
  background: #1558cc !important;
  border-color: #1558cc !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(29, 111, 242, 0.4);
}

.hsbc-btn-package-retrieve:active {
  background: #0e46a8 !important;
  transform: translateY(0);
}

.hsbc-dpc-btn-price {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12px;
}

.hsbc-dpc-subnote {
  font-size: 11px;
  color: #2563eb;
  font-weight: 600;
}

.dark .hsbc-dossier-package-card {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.18) 0%, rgba(30, 64, 175, 0.25) 100%);
  border-color: rgba(56, 189, 248, 0.3);
}

.dark .hsbc-dpc-badge {
  color: #93c5fd;
}

.dark .hsbc-dpc-desc {
  color: #cbd5e1;
}

.dark .hsbc-dpc-subnote {
  color: #93c5fd;
}

.dark .hsbc-btn-package-retrieve {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
}

.dark .hsbc-btn-package-retrieve:hover {
  background: #1558cc !important;
  border-color: #1558cc !important;
}

/* 未选法团友好提醒 */
.hsbc-company-unselected-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--hsbc-radius-md);
  padding: 16px 20px;
  font-size: 13px;
  color: #92400e;
}

.dark .hsbc-company-unselected-notice {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}

@media (max-width: 768px) {
  .hsbc-dossier-package-card {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .hsbc-btn-package-retrieve {
    width: 100%;
  }
  .hsbc-company-unselected-notice {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   8. 第五步：合规存盘证照与业务运营证明上传 (Step 5 Redesigned)
   遵循高规格私人银行与投行中台规范：紧凑高效、空间压缩、告别空洞大虚线框
   ========================================================================== */

/* 1. 顶部合规快速预审提示总控条 (Overview Banner) */
.hsbc-doc-overview-banner {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.05) 0%, rgba(5, 150, 105, 0.04) 100%);
  border: 1px solid rgba(29, 111, 242, 0.18);
  border-radius: var(--hsbc-radius-lg, 12px);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dark .hsbc-doc-overview-banner {
  background: rgba(15, 28, 46, 0.7);
  border-color: rgba(56, 189, 248, 0.25);
}

.hsbc-dob-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 260px;
}

.hsbc-dob-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--hsbc-primary-blue, #1d6ff2);
  border: 1px solid rgba(29, 111, 242, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.dark .hsbc-dob-icon {
  background: #101f33;
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.hsbc-dob-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hsbc-text-primary, #0f172a);
  letter-spacing: 0.2px;
}

.hsbc-dob-desc {
  font-size: 11.5px;
  color: var(--hsbc-text-secondary, #475569);
  margin-top: 2px;
  line-height: 1.45;
}

.dark .hsbc-dob-desc {
  color: #94a3b8;
}

.hsbc-dob-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsbc-dob-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  white-space: nowrap;
}

.dark .hsbc-dob-stat-badge {
  background: #101f33;
  border-color: #334155;
  color: #f1f5f9;
}

.hsbc-dob-stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}

.hsbc-dob-stat-dot.is-active {
  background: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}

/* 2. 模块外层容器 (Section Container) */
.hsbc-doc-section {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: var(--hsbc-radius-lg, 12px);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.dark .hsbc-doc-section {
  background: #0b1524;
  border-color: #1e293b;
}

.hsbc-ds-head {
  margin-bottom: 16px;
}

.hsbc-ds-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hsbc-ds-title-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 260px;
}

.hsbc-ds-badge-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--hsbc-primary-blue, #1d6ff2);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.hsbc-ds-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hsbc-text-primary, #0f172a);
  margin: 0;
  line-height: 1.35;
}

.hsbc-ds-desc {
  font-size: 11.5px;
  color: var(--hsbc-text-muted, #64748b);
  margin-top: 3px;
  line-height: 1.45;
}

/* 第一步未确认企业提示条 */
.hsbc-company-unselected-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--hsbc-radius-md, 8px);
  padding: 12px 16px;
  font-size: 12.5px;
  color: #92400e;
  margin-bottom: 12px;
}

.hsbc-cun-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.dark .hsbc-company-unselected-notice {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

/* 3. Section 3: 业务申报模式分段控制器 (Segmented Track Switcher) */
.hsbc-step5-track-segmented {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 5px;
  border-radius: 8px;
}

.dark .hsbc-step5-track-segmented {
  background: rgba(15, 23, 42, 0.6);
  border-color: #334155;
}

.hsbc-s5t-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbc-text-muted, #64748b);
  padding-left: 4px;
}

.hsbc-step5-track-pills {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.hsbc-s5-track-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--hsbc-text-secondary, #475569);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.hsbc-s5-track-btn:hover {
  background: #ffffff;
  color: #1d6ff2;
}

.dark .hsbc-s5-track-btn:hover {
  background: #1e293b;
  color: #38bdf8;
}

.hsbc-s5-track-btn.active {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(29, 111, 242, 0.25);
}

/* 4. Section 2: 董事/股东/实控人 KYC 容器与卡片 */
.hsbc-officer-kyc-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hsbc-officer-kyc-group {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--hsbc-radius-md, 8px);
  padding: 14px 16px;
}

.dark .hsbc-officer-kyc-group {
  background: #0f1c2e;
  border-color: #1e293b;
}

.hsbc-okg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}

.dark .hsbc-okg-head {
  border-bottom-color: #334155;
}

.hsbc-okg-head-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hsbc-okg-badge {
  font-size: 11px;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  padding: 2px 7px;
  border-radius: 4px;
}

.dark .hsbc-okg-badge {
  color: #93c5fd;
  background: rgba(30, 64, 175, 0.25);
}

.hsbc-okg-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hsbc-text-primary, #0f172a);
}

.hsbc-okg-idtype-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #047857;
  background: #ecfdf5;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsbc-okg-idtype-tag.is-mandatory {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}

.dark .hsbc-okg-idtype-tag {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.dark .hsbc-okg-idtype-tag.is-mandatory {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
}

/* 5. 证件与材料两列网格 */
.hsbc-doc-items-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .hsbc-doc-items-grid {
    grid-template-columns: 1fr;
  }
}

/* 6. 单项材料卡片 (Doc Card) */
.hsbc-doc-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border-subtle, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.18s ease;
  min-height: 190px;
  box-sizing: border-box;
}

.hsbc-doc-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.dark .hsbc-doc-card {
  background: #0d1829;
  border-color: #1e293b;
}

.dark .hsbc-doc-card:hover {
  border-color: #334155;
}

.hsbc-doc-card.is-uploaded {
  border-color: rgba(29, 111, 242, 0.3);
  background: rgba(29, 111, 242, 0.015);
}

.hsbc-doc-card.is-retrieved {
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.02);
}

.hsbc-dc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.hsbc-dc-title-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.hsbc-dc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hsbc-text-primary, #0f172a);
  line-height: 1.35;
}

.hsbc-dc-filing-date {
  font-size: 10.5px;
  color: var(--hsbc-text-muted, #64748b);
  font-weight: 500;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.dark .hsbc-dc-filing-date {
  background: #1e293b;
  color: #94a3b8;
}

.hsbc-dc-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 付费调阅副按钮 */
.hsbc-btn-header-retrieve {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f0f7ff !important;
  color: #1d6ff2 !important;
  border: 1px solid rgba(29, 111, 242, 0.3) !important;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  line-height: 1.3;
}

.hsbc-btn-header-retrieve:hover {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
  box-shadow: 0 1px 6px rgba(29, 111, 242, 0.25);
  transform: translateY(-1px);
}

.hsbc-btn-header-retrieve:hover .hsbc-bhr-price {
  color: #ffffff !important;
}

.hsbc-bhr-price {
  color: #1d6ff2;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.9;
  transition: color 0.18s ease;
}

.dark .hsbc-btn-header-retrieve {
  background: rgba(29, 111, 242, 0.12) !important;
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

.dark .hsbc-btn-header-retrieve .hsbc-bhr-price {
  color: #60a5fa !important;
}

.dark .hsbc-btn-header-retrieve:hover {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
}

.dark .hsbc-btn-header-retrieve:hover .hsbc-bhr-price {
  color: #ffffff !important;
}

/* 已调档徽章 */
.hsbc-badge-retrieved {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #059669;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.dark .hsbc-badge-retrieved {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

/* 状态徽章 */
.hsbc-dc-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2.5px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.2;
}

.badge-req {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.dark .badge-req {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.badge-opt {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.dark .badge-opt {
  background: rgba(30, 41, 59, 0.5);
  color: #94a3b8;
  border-color: #334155;
}

.badge-rec {
  background: rgba(29, 111, 242, 0.08);
  color: #1d6ff2;
  border: 1px solid rgba(29, 111, 242, 0.22);
}

.dark .badge-rec {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.badge-subsequent {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.dark .badge-subsequent {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.hsbc-dc-desc {
  font-size: 11.5px;
  color: var(--hsbc-text-muted, #64748b);
  line-height: 1.5;
  margin-top: -2px;
}

/* 7. 拖拽上传区 (大尺寸易拖入设计 · Generous Drop Target) */
.hsbc-dropzone,
.hsbc-portal-apply-mode .hsbc-dropzone {
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 22px 16px !important;
  text-align: center !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8fafc !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  min-height: 104px !important;
  box-sizing: border-box;
}

.hsbc-dropzone:hover,
.hsbc-portal-apply-mode .hsbc-dropzone:hover {
  border-color: #1d6ff2 !important;
  background: #f0f7ff !important;
}

.hsbc-dropzone input {
  display: none;
}

.hsbc-dz-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.hsbc-dz-icon {
  color: #94a3b8;
  transition: all 0.2s ease;
}

.hsbc-dropzone:hover .hsbc-dz-icon,
.hsbc-portal-apply-mode .hsbc-dropzone:hover .hsbc-dz-icon {
  color: #1d6ff2;
  transform: translateY(-2px);
}

.hsbc-dz-text {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.hsbc-dropzone:hover .hsbc-dz-text,
.hsbc-portal-apply-mode .hsbc-dropzone:hover .hsbc-dz-text {
  color: #1d6ff2;
}

.hsbc-dz-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
  line-height: 1.25;
}

.dark .hsbc-dropzone,
.dark .hsbc-portal-apply-mode .hsbc-dropzone {
  background: rgba(15, 23, 42, 0.4) !important;
  border-color: #334155 !important;
}

.dark .hsbc-dropzone:hover,
.dark .hsbc-portal-apply-mode .hsbc-dropzone:hover {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

.dark .hsbc-dz-icon {
  color: #64748b;
}

.dark .hsbc-dropzone:hover .hsbc-dz-icon,
.dark .hsbc-portal-apply-mode .hsbc-dropzone:hover .hsbc-dz-icon {
  color: #38bdf8;
}

.dark .hsbc-dz-text {
  color: #cbd5e1;
}

.dark .hsbc-dropzone:hover .hsbc-dz-text,
.dark .hsbc-portal-apply-mode .hsbc-dropzone:hover .hsbc-dz-text {
  color: #38bdf8;
}

.dark .hsbc-dz-hint {
  color: #94a3b8;
}

/* 8. 已上传 / 已调档胶囊条 (File Capsule) */
.hsbc-file-uploaded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f0f7ff;
  border: 1px solid rgba(29, 111, 242, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--hsbc-primary-blue, #1d6ff2);
  min-height: 52px;
  box-sizing: border-box;
  margin-top: auto;
}

.hsbc-file-uploaded.is-official-retrieved {
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, 0.3);
  color: #065f46;
}

.dark .hsbc-file-uploaded {
  background: rgba(29, 111, 242, 0.1);
  border-color: rgba(56, 189, 248, 0.25);
}

.dark .hsbc-file-uploaded.is-official-retrieved {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

.hsbc-fu-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.hsbc-fu-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d6ff2;
  flex-shrink: 0;
}

.hsbc-file-uploaded.is-official-retrieved .hsbc-fu-icon-svg {
  color: #059669;
}

.dark .hsbc-fu-icon-svg {
  color: #38bdf8;
}

.dark .hsbc-file-uploaded.is-official-retrieved .hsbc-fu-icon-svg {
  color: #34d399;
}

.hsbc-fu-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hsbc-fu-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--hsbc-text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.dark .hsbc-fu-name {
  color: #f8fafc;
}

.hsbc-fu-sub {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.hsbc-fu-dl-link {
  color: #059669;
  text-decoration: underline;
  margin-left: 6px;
  font-weight: 600;
}

.dark .hsbc-fu-dl-link {
  color: #34d399;
}

/* 9. 微信直传容错栏 (WeChat Upload Notice) */
.hsbc-wechat-upload-notice {
  background: rgba(5, 150, 105, 0.05);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: var(--hsbc-radius-lg, 12px);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dark .hsbc-wechat-upload-notice {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.hsbc-wun-icon {
  color: #059669;
  flex-shrink: 0;
  margin-top: 2px;
}

.dark .hsbc-wun-icon {
  color: #34d399;
}

.hsbc-wun-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #065f46;
}

.dark .hsbc-wun-title {
  color: #34d399;
}

.hsbc-wun-desc {
  font-size: 11.5px;
  color: #047857;
  margin-top: 2px;
  line-height: 1.45;
}

/* 业务资料追加功能栏 (Business Docs Add Toolbar) */
.hsbc-biz-add-box {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface-sub, #f8fafc);
  border: 1px dashed var(--border-subtle, #cbd5e1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.dark .hsbc-biz-add-box {
  background: rgba(16, 31, 51, 0.4);
  border-color: #334155;
}

.hsbc-bab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hsbc-bab-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 200px;
}

.hsbc-bab-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hsbc-bab-title svg {
  color: #1d6ff2;
}

.dark .hsbc-bab-title {
  color: #f1f5f9;
}

.dark .hsbc-bab-title svg {
  color: #38bdf8;
}

.hsbc-bab-desc {
  font-size: 11.5px;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.dark .hsbc-bab-desc {
  color: #94a3b8;
}

.hsbc-btn-add-biz-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #1d6ff2;
  border: 1px solid #1d6ff2;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(29, 111, 242, 0.2);
  white-space: nowrap;
}

.hsbc-btn-add-biz-slot:hover {
  background: #1558cc;
  border-color: #1558cc;
  transform: translateY(-1px);
}

.hsbc-btn-add-biz-slot:active {
  background: #0e46a8;
  transform: translateY(0);
}

.hsbc-bab-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
}

.dark .hsbc-bab-presets {
  border-top-color: #1e293b;
}

.hsbc-bab-plabel {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-right: 2px;
}

.hsbc-chip-preset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.hsbc-chip-preset:hover {
  color: #1d6ff2;
  border-color: #bfdbfe;
  background: #eff6ff;
  transform: translateY(-1px);
}

.dark .hsbc-chip-preset {
  background: #0f1d30;
  color: #cbd5e1;
  border-color: #1e293b;
}

.dark .hsbc-chip-preset:hover {
  color: #38bdf8;
  border-color: #0284c7;
  background: #1e293b;
}

/* 自定义追加卡片删除按钮 */
.hsbc-btn-del-custom-biz {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hsbc-btn-del-custom-biz:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}

.dark .hsbc-btn-del-custom-biz {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   9. Step 6: 审阅、条款与手写签名板
   ========================================================================== */

/* ==========================================================================
   9. 第六步：全景KYC合规预审卷宗与个人资料隐私条例 (Step 6 Redesigned)
   ========================================================================== */

/* ==========================================================================
   第 6 步：全景合规核验与法定签署 (Step 6 Institutional Review & Signature)
   遵循高规格私人银行与投行中台规范：主次分明、纯净三色、告别花花绿绿与视觉噪音
   ========================================================================== */

/* 1. 卷宗状态总控条 */
.hsbc-review-dossier-bar {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: var(--hsbc-radius-lg, 12px);
  padding: 16px 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.hsbc-rdb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbc-rdb-shield {
  width: 38px;
  height: 38px;
  border-radius: var(--hsbc-radius-md, 8px);
  background: rgba(29, 111, 242, 0.08);
  color: var(--hsbc-primary-blue, #1d6ff2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbc-rdb-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--hsbc-text-primary, #0f172a);
  letter-spacing: 0.2px;
}

.hsbc-rdb-sub {
  font-size: 11.5px;
  color: var(--hsbc-text-muted, #64748b);
  margin-top: 2px;
}

.hsbc-rdb-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbc-rdb-badge-ready {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(5, 150, 105, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hsbc-rdb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  animation: hsbc-pulse-dot 2s infinite ease-in-out;
}

/* 2. 第一阶段：申报资料全面核对卡片容器 (Unified Verification Docket Card)
   统一将申报资料整合为银行机构级核对总表，消除嵌套方框与视觉割裂 */
.hsbc-review-summary-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: var(--hsbc-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  margin-bottom: 24px;
}

/* 顶部核对指引说明条 */
.hsbc-rsc-intro-bar {
  background: #f8fafc;
  border-bottom: 1px solid var(--hsbc-border, #e2e8f0);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hsbc-rib-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-rib-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hsbc-primary-blue, #1d6ff2);
  letter-spacing: 0;
}

.hsbc-rib-desc {
  font-size: 12px;
  color: var(--hsbc-text-secondary, #475569);
  line-height: 1.5;
}

/* 各阶段核验板块（统一无外边框平铺） */
.hsbc-rsc-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* 板块标题栏 */
.hsbc-rsc-header {
  background: #f8fafc;
  border-top: 1px solid var(--hsbc-border, #e2e8f0);
  border-bottom: 1px solid var(--hsbc-border, #e2e8f0);
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.hsbc-rsc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbc-rsc-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbc-rsc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hsbc-text-primary, #0f172a);
  letter-spacing: 0;
}

/* 优雅紧凑的快捷修改按钮 */
.hsbc-rsc-edit-btn {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--hsbc-radius-sm, 6px);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsbc-rsc-edit-btn:hover {
  background: rgba(29, 111, 242, 0.05);
  border-color: var(--hsbc-primary-blue, #1d6ff2);
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-rsc-body {
  padding: 0;
  background: #ffffff;
}

/* ==========================================================================
   机构级核对表格体系 (Dossier Key-Value Table System)
   ========================================================================== */
.hsbc-dossier-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
  font-size: 13px;
}

.hsbc-dossier-table tr {
  border-bottom: 1px solid #f1f5f9;
}

.hsbc-dossier-table tr:last-child {
  border-bottom: none;
}

.hsbc-dt-label {
  width: 140px;
  min-width: 140px;
  max-width: 150px;
  background: #fafbfc;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 16px;
  border-right: 1px solid #f1f5f9;
  vertical-align: top;
  line-height: 1.5;
}

.hsbc-dt-value {
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 16px;
  line-height: 1.5;
  vertical-align: middle;
  word-break: break-word;
}

.hsbc-dt-value strong {
  color: #0f172a;
  font-weight: 700;
}

.hsbc-dt-muted {
  color: #64748b;
}

.hsbc-dt-flex-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hsbc-dt-main-title {
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
}

.hsbc-dt-sub {
  color: #64748b;
  font-size: 12.5px;
}

.hsbc-dt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.hsbc-dt-badge-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.hsbc-dt-badge-verify {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}

.hsbc-dt-lock-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
}

.hsbc-dt-addr-clean {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
}

/* 董事股东与材料清单内嵌网格表容器 */
.hsbc-dt-section-inner {
  padding: 12px 20px 16px 20px;
  background: #ffffff;
}

.hsbc-dt-overview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  font-size: 12.5px;
  color: #475569;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 12px;
}

.hsbc-dt-ob-item strong {
  color: #0f172a;
}

.hsbc-dt-ob-sep {
  color: #cbd5e1;
}

.hsbc-dt-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hsbc-dossier-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hsbc-dossier-grid-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.hsbc-dossier-grid-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #0f172a;
  line-height: 1.45;
}

.hsbc-dossier-grid-table tr:last-child td {
  border-bottom: none;
}

.hsbc-dt-role-tag {
  display: inline-block;
  padding: 2px 7px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.hsbc-dt-sig-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.hsbc-dt-sig-tag.tag-auth {
  background: rgba(29, 111, 242, 0.08);
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-dt-sig-tag.tag-none {
  background: #f1f5f9;
  color: #94a3b8;
}

.hsbc-dt-badge-official {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hsbc-dt-badge-pending {
  display: inline-block;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.hsbc-dt-doc-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.hsbc-dt-doc-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.hsbc-dt-doc-tag.badge-official {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

.hsbc-dt-doc-tag.badge-upload {
  background: rgba(29, 111, 242, 0.1);
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-dt-doc-filename {
  color: #334155;
  font-size: 12px;
}

.hsbc-dt-doc-default {
  font-size: 12px;
  color: #64748b;
}

.hsbc-dt-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 14px;
  background: rgba(5, 150, 105, 0.04);
  border: 1px solid rgba(5, 150, 105, 0.15);
  border-radius: 6px;
  color: #047857;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .hsbc-dossier-table,
  .hsbc-dossier-table tbody,
  .hsbc-dossier-table tr,
  .hsbc-dossier-table td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hsbc-dt-label {
    border-right: none;
    border-bottom: none;
    padding-bottom: 2px;
    background: transparent;
    font-weight: 700;
    color: #475569;
  }
  .hsbc-dt-value {
    padding-top: 2px;
    padding-bottom: 10px;
  }
}

/* ==========================================================================
   阶段承接过渡条 (Stage Transition Divider)
   从第一阶段「核对资料」无缝衔接至第二阶段「法定签署」
   ========================================================================== */
.hsbc-stage-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 20px 0;
}

.hsbc-sd-line {
  flex: 1;
  height: 1px;
  background: var(--hsbc-border, #e2e8f0);
}

.hsbc-sd-pill {
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 20px;
  padding: 6px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hsbc-sd-check-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbc-sd-pill-title {
  font-size: 13px;
  font-weight: 500;
  color: #059669;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   第二阶段：法定董事与股东电子签署中心 (Statutory Electronic Signatures)
   ========================================================================== */
.hsbc-officers-signature-section {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: var(--hsbc-radius-lg, 12px);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.hsbc-oss-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hsbc-border-subtle, #f1f5f9);
}

.hsbc-oss-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hsbc-oss-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--hsbc-text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbc-oss-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hsbc-primary-blue, #1d6ff2);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbc-oss-desc {
  font-size: 12px;
  color: var(--hsbc-text-muted, #64748b);
  line-height: 1.55;
  margin: 0;
}

.hsbc-oss-count-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--hsbc-bg-subtle, #f8fafc);
  color: var(--hsbc-text-secondary, #475569);
  border: 1px solid var(--hsbc-border, #cbd5e1);
  white-space: nowrap;
}

.hsbc-oss-count-badge.is-completed {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.3);
}

.hsbc-signatories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.hsbc-sig-officer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: var(--hsbc-radius-md, 8px);
  transition: all 0.2s ease;
}

.hsbc-sig-officer-card.is-signed {
  border-color: rgba(5, 150, 105, 0.3);
  background: rgba(240, 253, 244, 0.5);
}

.hsbc-soc-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.hsbc-soc-num {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hsbc-text-secondary, #475569);
  flex-shrink: 0;
}

.hsbc-soc-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hsbc-soc-name {
  font-size: 14px;
  color: var(--hsbc-text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbc-soc-role {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(29, 111, 242, 0.08);
  color: var(--hsbc-primary-blue, #1d6ff2);
}

/* 坚决剔除紫色，规范为清爽字体与翡翠绿/中性色 */
.hsbc-soc-share {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.hsbc-soc-meta {
  font-size: 12px;
  color: var(--hsbc-text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsbc-soc-app-tag {
  font-size: 11px;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.hsbc-soc-mid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbc-soc-preview-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid rgba(5, 150, 105, 0.3);
  border-radius: 6px;
}

.hsbc-soc-preview-img {
  max-height: 34px;
  max-width: 110px;
  object-fit: contain;
  display: block;
}

.hsbc-soc-signed-badge {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hsbc-soc-pending-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #d97706;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
}

.hsbc-soc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d97706;
}

.hsbc-btn-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* 遵循 GEMINI.md 规则：主行动按钮统一严格保持 #1d6ff2 皇家蓝背景、纯白字 */
.hsbc-btn-sign.hsbc-btn-primary-sm {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border: 1px solid #1d6ff2 !important;
  box-shadow: 0 2px 6px rgba(29, 111, 242, 0.25);
}

.hsbc-btn-sign.hsbc-btn-primary-sm:hover {
  background: #1558cc !important;
  border-color: #1558cc !important;
}

.hsbc-btn-sign.hsbc-btn-resign {
  background: var(--hsbc-bg-card, #ffffff);
  color: var(--hsbc-text-primary, #0f172a);
  border: 1px solid var(--hsbc-border, #e2e8f0);
}

.hsbc-btn-sign.hsbc-btn-resign:hover {
  border-color: #1d6ff2;
  color: #1d6ff2;
}

.hsbc-sig-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--hsbc-border-subtle, #e2e8f0);
  font-size: 11.5px;
  color: var(--hsbc-text-muted, #64748b);
}

.hsbc-sig-footnote-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 3. 个人资料隐私条例声明卡片 (置于签署下方，紧贴提交按钮) */
.hsbc-agreement-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: var(--hsbc-radius-lg, 12px);
  padding: 16px 22px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.hsbc-agreement-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hsbc-link-underline {
  color: var(--hsbc-primary-blue, #1d6ff2);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color 0.15s ease;
}

.hsbc-link-underline:hover {
  color: #1558cc;
}

/* ==========================================================================
   法定电子手写签署交互弹窗 (Modal & Tabs)
   ========================================================================== */

.hsbc-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.hsbc-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1 !important;
}

.hsbc-modal-dialog {
  position: relative !important;
  z-index: 2 !important;
  margin: auto !important;
}

.hsbc-sign-modal-dialog {
  max-width: 680px;
  width: 94%;
  background: var(--hsbc-bg-card, #ffffff);
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hsbc-border);
  overflow: hidden;
  margin: auto;
  animation: hsbcModalZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hsbcModalZoomIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dark .hsbc-sign-modal-dialog,
html.dark .hsbc-sign-modal-dialog {
  background: var(--hsbc-bg-card, #0f1a2e);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hsbc-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px 16px !important;
  border-bottom: 1px solid var(--hsbc-border);
  background: var(--hsbc-bg-card);
}

.hsbc-modal-close {
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--hsbc-text-muted) !important;
  cursor: pointer !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hsbc-modal-close:hover {
  background: var(--hsbc-bg-subtle) !important;
  border-color: var(--hsbc-border) !important;
  color: var(--hsbc-text-primary) !important;
}

.hsbc-modal-body {
  padding: 22px 24px !important;
  background: var(--hsbc-bg-card);
}

.hsbc-btn-sm {
  padding: 8px 18px !important;
  font-size: 13px !important;
  border-radius: var(--hsbc-radius-md) !important;
}

.hsbc-sm-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hsbc-sm-title {
  font-size: 16px;
  color: var(--hsbc-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbc-sm-subtitle {
  font-size: 12.5px;
  color: var(--hsbc-text-muted);
}

.hsbc-sm-tabs {
  display: flex;
  background: var(--hsbc-bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--hsbc-border);
  padding: 4px 16px 0;
  gap: 8px;
}

.hsbc-sm-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hsbc-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.18s ease;
}

.hsbc-sm-tab:hover {
  color: #1d6ff2;
}

.hsbc-sm-tab.active {
  color: #1d6ff2;
  border-bottom-color: #1d6ff2;
  font-weight: 700;
}

.hsbc-sm-canvas-wrap {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  overflow: hidden;
  height: 220px;
  touch-action: none;
  margin-bottom: 12px;
}

.hsbc-sm-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
  -ms-touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hsbc-sm-canvas-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
  font-weight: 600;
  text-align: center;
}

.hsbc-sm-canvas-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hsbc-sm-qr-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}

.hsbc-sm-qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hsbc-qr-mount-card {
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--hsbc-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 170px;
}

.hsbc-qr-mount-card img,
.hsbc-qr-mount-card canvas {
  display: block;
}

.hsbc-sm-qr-badge {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hsbc-sm-qr-info {
  flex: 1;
}

.hsbc-sm-qr-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.hsbc-sm-qr-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--hsbc-text-primary);
  line-height: 1.45;
}

.hsbc-sm-step-idx {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(29, 111, 242, 0.1);
  color: #1d6ff2;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.hsbc-sm-sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(29, 111, 242, 0.06);
  color: #1d6ff2;
  font-size: 12.5px;
  font-weight: 600;
}

.hsbc-sync-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d6ff2;
  animation: hsbcPulse 1.5s infinite;
}

@keyframes hsbcPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

@media (max-width: 640px) {
  .hsbc-modal {
    padding: 10px !important;
  }
  .hsbc-sign-modal-dialog {
    width: 100% !important;
    border-radius: 14px !important;
  }
  .hsbc-modal-header {
    padding: 14px 16px 12px !important;
  }
  .hsbc-modal-body {
    padding: 16px !important;
  }
  .hsbc-sm-canvas-wrap {
    height: 180px !important;
  }
  .hsbc-sig-officer-card {
    flex-direction: column;
    align-items: stretch;
  }
  .hsbc-soc-mid {
    justify-content: flex-start;
  }
  .hsbc-btn-sign {
    width: 100%;
  }
  .hsbc-sm-qr-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hsbc-sm-qr-step {
    text-align: left;
  }
}

.hsbc-signature-section {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hsbc-sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hsbc-sig-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbc-canvas-wrap {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-md);
  overflow: hidden;
  height: 180px;
  touch-action: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.hsbc-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
  -ms-touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hsbc-canvas-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
  font-weight: 600;
  text-align: center;
  padding: 0 16px;
}

.hsbc-sig-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  flex-wrap: wrap;
  gap: 8px;
}

.hsbc-sig-status {
  color: var(--hsbc-text-muted);
  font-weight: 600;
}

.hsbc-sig-law-chip {
  color: var(--hsbc-text-muted);
  font-size: 10.5px;
}

/* ==========================================================================
   响应式适配 (Mobile & Tablet)
   ========================================================================== */

@media (max-width: 992px) {
  .hsbc-rv-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbc-rv-docs-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hsbc-review-dossier-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .hsbc-rdb-right {
    width: 100%;
    justify-content: space-between;
  }
  .hsbc-rv-grid-4,
  .hsbc-rv-grid-3,
  .hsbc-rv-grid-2 {
    grid-template-columns: 1fr;
  }
  .hsbc-rv-addr-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .hsbc-rv-addr-tag {
    min-width: unset;
  }
}

/* ==========================================================================
   打印与 PDF 归档适配 (@media print)
   ========================================================================== */

@media print {
  header, footer, .hsbc-stepper-bar, .hsbc-wizard-nav-footer, .hsbc-faq-section, #hsbc-btn-print-dossier, .hsbc-rsc-edit-btn {
    display: none !important;
  }
  body, .hsbc-card-container, .hsbc-rsc-section, .hsbc-agreement-box, .hsbc-signature-section {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border-color: #cccccc !important;
  }
  .hsbc-ag-content {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   暗黑模式色彩隔离 (严格遵循 GEMINI.md 规则 3)
   ========================================================================== */

.dark .hsbc-review-dossier-bar,
[data-theme="dark"] .hsbc-review-dossier-bar {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.16) 0%, rgba(29, 111, 242, 0.04) 100%);
  border-color: rgba(29, 111, 242, 0.35);
}

.dark .badge-live,
[data-theme="dark"] .badge-live {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.dark .hsbc-rv-badge.badge-blue,
[data-theme="dark"] .hsbc-rv-badge.badge-blue {
  background: rgba(29, 111, 242, 0.25);
  color: #60a5fa;
}

.dark .hsbc-rv-badge.badge-purple,
[data-theme="dark"] .hsbc-rv-badge.badge-purple {
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
}

.dark .hsbc-rv-role-chip.chip-ind,
[data-theme="dark"] .hsbc-rv-role-chip.chip-ind {
  background: rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

.dark .hsbc-rv-role-chip.chip-corp,
[data-theme="dark"] .hsbc-rv-role-chip.chip-corp {
  background: rgba(217, 119, 6, 0.25);
  color: #fcd34d;
}

.dark .hsbc-ag-clause,
[data-theme="dark"] .hsbc-ag-clause {
  background: var(--hsbc-bg-card);
  border-color: var(--hsbc-border-subtle);
}

.dark .hsbc-canvas-wrap,
[data-theme="dark"] .hsbc-canvas-wrap {
  background: #ffffff;
}

/* ==========================================================================
   10. 底部导航栏与通用按钮标准 (严格遵循规则 3)
   ========================================================================== */

.hsbc-wizard-nav-footer {
  display: flex;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--hsbc-border-subtle);
}

.hsbc-wnf-spacer {
  flex: 1;
}

/* 主行动按钮 (Primary CTA): 恒定 #1d6ff2 皇家蓝背景、纯白字，暗黑模式背景恒定隔离 */
.hsbc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #1d6ff2 !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--hsbc-radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 111, 242, 0.3);
  transition: all 0.2s ease;
  text-decoration: none;
}

.hsbc-btn-primary:hover {
  background-color: #1558cc !important;
  box-shadow: 0 6px 18px rgba(29, 111, 242, 0.4);
  transform: translateY(-1px);
}

.hsbc-btn-primary:active {
  background-color: #0e46a8 !important;
  transform: translateY(0);
}

.hsbc-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 次要 / 幽灵按钮 */
.hsbc-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--hsbc-radius-md);
  border: 1px solid var(--hsbc-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsbc-btn-secondary:hover {
  background: var(--hsbc-bg-card);
  border-color: var(--hsbc-primary-blue);
  color: var(--hsbc-primary-blue);
}

.hsbc-btn-ghost-sm {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  color: var(--hsbc-text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--hsbc-radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.hsbc-btn-ghost-sm:hover {
  border-color: var(--hsbc-primary-blue);
  color: var(--hsbc-primary-blue);
}

.hsbc-btn-ghost-xs {
  background: none;
  border: 1px solid var(--hsbc-border);
  color: var(--hsbc-text-muted);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsbc-btn-ghost-dashed {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--hsbc-border);
  background: none;
  color: var(--hsbc-primary-blue);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--hsbc-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.hsbc-btn-ghost-dashed:hover {
  background: var(--hsbc-primary-light);
  border-color: var(--hsbc-primary-blue);
}

/* ==========================================================================
   11. 提交成功展示面板
   ========================================================================== */

.hsbc-success-view {
  padding: 40px 20px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.hsbc-sv-icon {
  margin-bottom: 16px;
}

.hsbc-sv-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin: 0 0 10px 0;
}

.hsbc-sv-order {
  font-size: 14px;
  color: var(--hsbc-text-secondary);
  margin: 0 0 16px 0;
}

.hsbc-sv-order strong {
  color: #1d6ff2;
  font-size: 16px;
}

.hsbc-sv-desc {
  font-size: 13px;
  color: var(--hsbc-text-muted);
  line-height: 1.7;
  margin: 0 0 28px 0;
}

.hsbc-timeline-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
}

.hsbc-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.hsbc-tl-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hsbc-bg-subtle);
  border: 2px solid var(--hsbc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbc-text-muted);
}

.hsbc-tl-step.done .hsbc-tl-dot {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.hsbc-tl-step.active .hsbc-tl-dot {
  background: var(--hsbc-primary-blue);
  border-color: var(--hsbc-primary-blue);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(29, 111, 242, 0.2);
}

.hsbc-tl-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
}

.hsbc-tl-line {
  flex: 1;
  height: 2px;
  background: var(--hsbc-border);
  margin: -16px 8px 0 8px;
}

.hsbc-tl-line.active {
  background: var(--hsbc-primary-blue);
}

.hsbc-sv-qr-wrap {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.hsbc-sv-qr-card {
  text-align: center;
}

.hsbc-qr-img {
  border-radius: 10px;
  box-shadow: var(--hsbc-shadow-md);
  margin-bottom: 8px;
  background: #ffffff;
  padding: 6px;
}

.hsbc-qr-hint {
  font-size: 11px;
  font-weight: 700;
  color: #166534;
}

/* ==========================================================================
   12. 常见问题 FAQ 区域
   ========================================================================== */

.hsbc-faq-section {
  padding: 40px 0 20px;
}

.hsbc-faq-header {
  text-align: center;
  margin-bottom: 32px;
}

.hsbc-faq-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin: 0 0 8px 0;
}

.hsbc-faq-subtitle {
  font-size: 13px;
  color: var(--hsbc-text-muted);
  margin: 0;
}

.hsbc-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hsbc-faq-item {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  padding: 22px;
  box-shadow: var(--hsbc-shadow-sm);
}

.hsbc-faq-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
  margin: 0 0 10px 0;
}

.hsbc-faq-a {
  font-size: 13px;
  color: var(--hsbc-text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   13. 移动端与自适应断点 Media Queries
   ========================================================================== */

@media (max-width: 1024px) {
  .hsbc-hero-card {
    padding: 28px 24px;
  }
  .hsbc-hero-metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .hsbc-industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .hsbc-co-brand-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hsbc-co-brand-partner-group {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hsbc-hero-title {
    font-size: 24px;
  }
  .hsbc-hero-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .hsbc-card-container {
    padding: 20px 16px;
  }
  .hsbc-stepper-bar {
    padding: 12px 14px;
  }
  .hsbc-step-info {
    display: none;
  }
  .hsbc-row-2,
  .hsbc-row-3,
  .hsbc-row-applicant-names,
  .hsbc-trade-box-wrap,
  .hsbc-doc-items-grid,
  .hsbc-faq-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-industry-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hsbc-cc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hsbc-sv-qr-wrap {
    flex-direction: column;
    gap: 16px;
  }
  .hsbc-tc-grid-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .hsbc-hero-card {
    padding: 20px 16px;
  }
  .hsbc-hero-title {
    font-size: 21px;
  }
  .hsbc-hero-metrics-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-partner-badge {
    padding: 4px 10px;
  }
  .hsbc-hc-logo-img {
    height: 18px;
  }
  .hsbc-trading-countries-block {
    padding: 14px 12px;
  }
  .hsbc-tc-grid-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   Step 2: 经办人登录拦截锁、微信绑定标识与邮箱验证码样式
   ========================================================================== */

/* 登录拦截卡片 */
.hsbc-login-gate-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: var(--hsbc-radius-lg);
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.06) 0%, rgba(29, 111, 242, 0.02) 100%);
  border: 1px solid rgba(29, 111, 242, 0.25);
  box-shadow: 0 2px 8px rgba(29, 111, 242, 0.05);
  transition: all 0.3s ease;
}

.dark .hsbc-login-gate-card,
[data-theme="dark"] .hsbc-login-gate-card,
html.dark .hsbc-login-gate-card {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.12) 0%, rgba(15, 26, 46, 0.6) 100%);
  border-color: rgba(29, 111, 242, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hsbc-lg-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--hsbc-primary-light);
  color: var(--hsbc-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dark .hsbc-lg-icon,
[data-theme="dark"] .hsbc-lg-icon,
html.dark .hsbc-lg-icon {
  background: rgba(29, 111, 242, 0.2);
  color: #38bdf8;
}

.hsbc-lg-content {
  flex: 1;
  min-width: 0;
}

.hsbc-lg-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hsbc-text-primary);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.hsbc-lg-desc {
  font-size: 13px;
  color: var(--hsbc-text-muted);
  margin: 0;
  line-height: 1.5;
}

.hsbc-btn-gate {
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 已登录身份状态横条 */
.hsbc-user-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 22px;
  border-radius: var(--hsbc-radius-md);
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.2);
  font-size: 13px;
}

.dark .hsbc-user-status-banner,
[data-theme="dark"] .hsbc-user-status-banner,
html.dark .hsbc-user-status-banner {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(52, 211, 153, 0.25);
}

.hsbc-usb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #047857;
}

.dark .hsbc-usb-left,
[data-theme="dark"] .hsbc-usb-left,
html.dark .hsbc-usb-left {
  color: #34d399;
}

.hsbc-usb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: hsbc-pulse-dot 2s infinite ease-in-out;
}

@keyframes hsbc-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.hsbc-usb-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hsbc-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
}

.hsbc-pill-tag.hsbc-tag-wx {
  background: rgba(7, 193, 96, 0.12);
  border: 1px solid rgba(7, 193, 96, 0.3);
  color: #047857;
}

.dark .hsbc-pill-tag.hsbc-tag-wx,
[data-theme="dark"] .hsbc-pill-tag.hsbc-tag-wx,
html.dark .hsbc-pill-tag.hsbc-tag-wx {
  background: rgba(7, 193, 96, 0.18);
  border-color: rgba(7, 193, 96, 0.4);
  color: #10b981;
}

.hsbc-pill-tag.hsbc-tag-email {
  background: rgba(29, 111, 242, 0.1);
  border: 1px solid rgba(29, 111, 242, 0.25);
  color: #1d6ff2;
}

.dark .hsbc-pill-tag.hsbc-tag-email,
[data-theme="dark"] .hsbc-pill-tag.hsbc-tag-email,
html.dark .hsbc-pill-tag.hsbc-tag-email {
  background: rgba(29, 111, 242, 0.18);
  border-color: rgba(29, 111, 242, 0.35);
  color: #38bdf8;
}

/* 标签行布局与状态徽章 */
.hsbc-field-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.hsbc-field-label-wrap .hsbc-field-label {
  margin-bottom: 0 !important;
}

.hsbc-sync-wechat-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #1d6ff2;
  user-select: none;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(29, 111, 242, 0.25);
  background: rgba(29, 111, 242, 0.05);
  transition: all 0.2s ease;
}

.hsbc-sync-wechat-label:hover {
  background: rgba(29, 111, 242, 0.12);
  border-color: #1d6ff2;
}

.hsbc-sync-checkbox {
  accent-color: #1d6ff2;
  cursor: pointer;
  width: 13px;
  height: 13px;
  margin: 0;
}

.hsbc-sync-checkbox-text {
  line-height: 1.2;
}

.dark .hsbc-sync-wechat-label,
[data-theme="dark"] .hsbc-sync-wechat-label,
html.dark .hsbc-sync-wechat-label {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

.dark .hsbc-sync-wechat-label:hover,
[data-theme="dark"] .hsbc-sync-wechat-label:hover,
html.dark .hsbc-sync-wechat-label:hover {
  background: rgba(56, 189, 248, 0.16);
  border-color: #38bdf8;
}

.hsbc-badge-bound {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(7, 193, 96, 0.1);
  border: 1px solid rgba(7, 193, 96, 0.3);
  color: #047857;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.dark .hsbc-badge-bound,
[data-theme="dark"] .hsbc-badge-bound,
html.dark .hsbc-badge-bound {
  background: rgba(7, 193, 96, 0.18);
  border-color: rgba(7, 193, 96, 0.4);
  color: #10b981;
}

.hsbc-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.dark .hsbc-badge-verified,
[data-theme="dark"] .hsbc-badge-verified,
html.dark .hsbc-badge-verified {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

/* 邮箱输入与验证码触发组 */
.hsbc-email-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.hsbc-email-input-group .hsbc-input {
  flex: 1;
  min-width: 0;
}

.hsbc-btn-email-otp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  min-width: 105px;
  height: 44px;
  border-radius: var(--hsbc-radius-md);
  font-size: 13px;
  font-weight: 700;
  background: var(--hsbc-primary-light);
  color: var(--hsbc-primary-blue);
  border: 1px solid rgba(29, 111, 242, 0.3);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.2s ease;
}

.hsbc-btn-email-otp:hover:not(:disabled) {
  background: var(--hsbc-primary-blue);
  color: #ffffff;
  border-color: var(--hsbc-primary-blue);
}

.hsbc-btn-email-otp:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--hsbc-bg-subtle);
  border-color: var(--hsbc-border);
  color: var(--hsbc-text-muted);
}

.dark .hsbc-btn-email-otp,
[data-theme="dark"] .hsbc-btn-email-otp,
html.dark .hsbc-btn-email-otp {
  background: rgba(29, 111, 242, 0.15);
  border-color: rgba(29, 111, 242, 0.35);
  color: #38bdf8;
}

.dark .hsbc-btn-email-otp:hover:not(:disabled),
[data-theme="dark"] .hsbc-btn-email-otp:hover:not(:disabled),
html.dark .hsbc-btn-email-otp:hover:not(:disabled) {
  background: var(--hsbc-primary-blue);
  color: #ffffff;
}

/* 邮箱 6 位验证码核验盒 */
.hsbc-email-otp-box {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--hsbc-radius-md);
  background: var(--hsbc-bg-subtle);
  border: 1px dashed var(--hsbc-border);
  animation: hsbc-fade-in 0.25s ease-out;
}

.dark .hsbc-email-otp-box,
[data-theme="dark"] .hsbc-email-otp-box,
html.dark .hsbc-email-otp-box {
  background: rgba(20, 34, 58, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
}

@keyframes hsbc-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hsbc-otp-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hsbc-otp-input-wrap {
  flex: 1;
  min-width: 0;
}

.hsbc-otp-row .hsbc-input {
  letter-spacing: 4px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  height: 40px;
  padding: 6px 12px;
}

.hsbc-btn-verify-otp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 40px;
  border-radius: var(--hsbc-radius-md);
  font-size: 13px;
  font-weight: 700;
  background: var(--hsbc-primary-blue);
  color: #ffffff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.2s ease;
}

.hsbc-btn-verify-otp:hover:not(:disabled) {
  background: var(--hsbc-primary-hover);
}

.hsbc-btn-verify-otp:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hsbc-otp-msg {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hsbc-login-gate-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
  .hsbc-btn-gate {
    width: 100%;
    justify-content: center;
  }
  .hsbc-user-status-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   TCSP 机构搜索与自然人秘书香港身份证隔离规范
   ========================================================================== */
/* TCSP 专属智能检索与直接导入控制台 */
.hsbc-tcsp-import-console {
  background: rgba(29, 111, 242, 0.04);
  border: 1.5px solid rgba(29, 111, 242, 0.2);
  border-radius: var(--hsbc-radius-md, 8px);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.dark .hsbc-tcsp-import-console,
[data-theme="dark"] .hsbc-tcsp-import-console,
html.dark .hsbc-tcsp-import-console {
  background: rgba(29, 111, 242, 0.1);
  border-color: rgba(29, 111, 242, 0.35);
}

.hsbc-tic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.hsbc-tic-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-tic-search-box {
  position: relative;
  width: 100%;
}

.hsbc-tic-input-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hsbc-tic-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: var(--hsbc-text-muted, #64748b);
  pointer-events: none;
}

.hsbc-tic-input {
  padding-left: 36px !important;
  background: var(--hsbc-bg-surface, #ffffff) !important;
  border: 1.5px solid var(--hsbc-border, #cbd5e1) !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.hsbc-tic-input:focus {
  border-color: var(--hsbc-primary-blue, #1d6ff2) !important;
  box-shadow: 0 0 0 3px rgba(29, 111, 242, 0.15) !important;
}

.hsbc-tcsp-imported-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  font-size: 12.5px;
}

.dark .hsbc-tcsp-imported-banner,
[data-theme="dark"] .hsbc-tcsp-imported-banner,
html.dark .hsbc-tcsp-imported-banner {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(52, 211, 153, 0.3);
}

.hsbc-tib-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hsbc-tib-badge-ok {
  color: #059669;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dark .hsbc-tib-badge-ok,
[data-theme="dark"] .hsbc-tib-badge-ok,
html.dark .hsbc-tib-badge-ok {
  color: #34d399;
}

.hsbc-tib-name {
  font-weight: 700;
  color: var(--hsbc-text-primary, #0f172a);
}

.hsbc-tib-en {
  color: var(--hsbc-text-muted, #64748b);
  font-size: 12px;
}

.hsbc-tcsp-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(29, 111, 242, 0.05);
  border: 1px solid rgba(29, 111, 242, 0.2);
  border-radius: var(--hsbc-radius-md, 8px);
  padding: 8px 12px;
  margin-bottom: 12px;
}

.hsbc-tcsp-search-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-tcsp-input-wrap {
  position: relative;
  width: 100%;
}

.hsbc-tcsp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--hsbc-bg-surface, #ffffff);
  border: 1.5px solid var(--hsbc-primary-blue, #1d6ff2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.hsbc-tcsp-dropdown.is-open {
  display: block;
}

.hsbc-tcsp-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--hsbc-border-subtle, #f1f5f9);
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.hsbc-tcsp-item:last-child {
  border-bottom: none;
}

.hsbc-tcsp-item:hover,
.hsbc-tcsp-item.is-active {
  background: rgba(29, 111, 242, 0.08);
}

.hsbc-tcsp-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hsbc-tcsp-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbc-text-primary, #0f172a);
}

.hsbc-tcsp-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.hsbc-tcsp-item-addr {
  font-size: 11.5px;
  color: var(--hsbc-text-muted, #64748b);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbc-tcsp-item-cr {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--hsbc-text-secondary, #334155);
}

.hsbc-tcsp-loading,
.hsbc-tcsp-empty {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--hsbc-text-muted, #64748b);
}

.hsbc-sec-id-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
}

/* ==========================================================================
   11. 官方在册档案直联调档提示弹窗 (HSBC Retrieve Prompt Modal)
   ========================================================================== */

.hsbc-retrieve-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.hsbc-rpm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hsbc-rpm-dialog {
  position: relative;
  z-index: 100001;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  max-width: 620px;
  width: 95vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: hsbcRpmSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hsbcRpmSlideIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dark .hsbc-rpm-dialog {
  background: #1e293b;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.hsbc-rpm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.dark .hsbc-rpm-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.hsbc-rpm-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsbc-rpm-icon {
  font-size: 20px;
  line-height: 1;
}

.hsbc-rpm-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #0f172a;
}

.dark .hsbc-rpm-title {
  color: #f8fafc;
}

.hsbc-rpm-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.hsbc-rpm-close-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.dark .hsbc-rpm-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.hsbc-rpm-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(88vh - 130px);
  overflow-y: auto;
}

/* 步骤指示标题 */
.hsbc-rpm-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hsbc-rpm-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  line-height: 1.2;
}

.hsbc-rpm-step-badge.badge-green {
  background: #dcfce7;
  color: #15803d;
}

.dark .hsbc-rpm-step-badge.badge-green {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.hsbc-rpm-step-badge.badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.dark .hsbc-rpm-step-badge.badge-blue {
  background: rgba(29, 111, 242, 0.2);
  color: #60a5fa;
}

.hsbc-rpm-step-badge.badge-amber {
  background: #fef3c7;
  color: #b45309;
}

.dark .hsbc-rpm-step-badge.badge-amber {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.hsbc-rpm-step-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
}

.dark .hsbc-rpm-step-title {
  color: #f1f5f9;
}

/* 提示优先自行上传的温和引导卡片 */
.hsbc-rpm-notice-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 16px;
}

.dark .hsbc-rpm-notice-card {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
}

.hsbc-rpm-nc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #166534;
  margin-bottom: 6px;
}

.dark .hsbc-rpm-nc-head {
  color: #6ee7b7;
}

.hsbc-rpm-nc-icon {
  font-size: 16px;
}

.hsbc-rpm-nc-desc {
  font-size: 12.5px;
  color: #15803d;
  line-height: 1.55;
  margin-bottom: 10px;
}

.dark .hsbc-rpm-nc-desc {
  color: #a7f3d0;
}

/* 自查渠道推荐 3 网格 */
.hsbc-rpm-nc-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

@media (max-width: 580px) {
  .hsbc-rpm-nc-sources {
    grid-template-columns: 1fr;
  }
}

.hsbc-rpm-nc-source-item {
  background: #ffffff;
  border: 1px solid rgba(22, 101, 52, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dark .hsbc-rpm-nc-source-item {
  background: #0f172a;
  border-color: rgba(34, 197, 94, 0.2);
}

.hsbc-rpm-ncs-title {
  font-size: 12px;
  font-weight: 700;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dark .hsbc-rpm-ncs-title {
  color: #86efac;
}

.hsbc-rpm-ncs-desc {
  font-size: 11px;
  color: #475569;
  line-height: 1.35;
}

.dark .hsbc-rpm-ncs-desc {
  color: #94a3b8;
}

.hsbc-rpm-nc-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed rgba(22, 101, 52, 0.2);
  flex-wrap: wrap;
  gap: 8px;
}

.dark .hsbc-rpm-nc-action-row {
  border-top-color: rgba(34, 197, 94, 0.2);
}

.hsbc-rpm-nc-action-tip {
  font-size: 11.5px;
  color: #166534;
  font-weight: 600;
}

.dark .hsbc-rpm-nc-action-tip {
  color: #86efac;
}

.hsbc-rpm-nc-fast-btn {
  background: #166534;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.hsbc-rpm-nc-fast-btn:hover {
  background: #14532d;
}

.dark .hsbc-rpm-nc-fast-btn {
  background: #059669;
  color: #ffffff;
}

.dark .hsbc-rpm-nc-fast-btn:hover {
  background: #047857;
}

/* 官方样板特征核对卡片 */
.hsbc-rpm-sample-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dark .hsbc-rpm-sample-card {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
}

.hsbc-rpm-sc-content {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

@media (max-width: 520px) {
  .hsbc-rpm-sc-content {
    flex-direction: column;
  }
}

.hsbc-rpm-sc-thumb-wrap {
  width: 105px;
  min-width: 105px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hsbc-rpm-sc-thumb-wrap:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dark .hsbc-rpm-sc-thumb-wrap {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.15);
}

.hsbc-rpm-sc-thumb {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 4px;
  background: #f1f5f9;
}

.dark .hsbc-rpm-sc-thumb {
  background: #0f172a;
}

.hsbc-rpm-sc-thumb-zoom {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
}

.hsbc-rpm-sc-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsbc-rpm-sc-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
}

.dark .hsbc-rpm-sc-title {
  color: #f8fafc;
}

.hsbc-rpm-sc-authority {
  font-size: 11px;
  color: #1d6ff2;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dark .hsbc-rpm-sc-authority {
  color: #38bdf8;
}

.hsbc-rpm-scf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.hsbc-rpm-scf-item {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.dark .hsbc-rpm-scf-item {
  color: #cbd5e1;
}

.hsbc-rpm-scf-icon {
  color: #059669;
  font-size: 11.5px;
  line-height: 1.2;
}

.dark .hsbc-rpm-scf-icon {
  color: #34d399;
}

.hsbc-rpm-sample-link-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #edf2f7;
}

.dark .hsbc-rpm-sample-link-bar {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.hsbc-rpm-sample-link {
  font-size: 12px;
  color: #1d6ff2;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.hsbc-rpm-sample-link:hover {
  color: #1558cc;
  text-decoration: underline;
}

.dark .hsbc-rpm-sample-link {
  color: #38bdf8;
}

.dark .hsbc-rpm-sample-link:hover {
  color: #7dd3fc;
}

/* 调档规费明细卡片 */
.hsbc-rpm-file-details {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dark .hsbc-rpm-file-details {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
}

.hsbc-rpm-fd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.hsbc-rpm-fd-label {
  color: #64748b;
}

.dark .hsbc-rpm-fd-label {
  color: #94a3b8;
}

.hsbc-rpm-fd-value {
  color: #0f172a;
}

.dark .hsbc-rpm-fd-value {
  color: #f8fafc;
}

.hsbc-rpm-barcode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid rgba(29, 111, 242, 0.25);
  color: #1d4ed8;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
}

.dark .hsbc-rpm-barcode-badge {
  background: rgba(29, 111, 242, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.hsbc-rpm-fd-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.dark .hsbc-rpm-fd-total {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.hsbc-rpm-fdt-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.dark .hsbc-rpm-fdt-label {
  color: #f8fafc;
}

.hsbc-rpm-fdt-price span {
  color: #1d6ff2;
  font-size: 18px;
  font-weight: 600;
}

.dark .hsbc-rpm-fdt-price span {
  color: #38bdf8;
}

.hsbc-rpm-fd-tip {
  font-size: 11px;
  color: #059669;
  margin-top: 4px;
  line-height: 1.4;
}

.dark .hsbc-rpm-fd-tip {
  color: #34d399;
}

/* 缺失条形码温馨提示卡片 */
.hsbc-rpm-missing-barcode-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dark .hsbc-rpm-missing-barcode-card {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}

.hsbc-rpm-mb-title {
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dark .hsbc-rpm-mb-title {
  color: #fbbf24;
}

.hsbc-rpm-mb-desc {
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}

.dark .hsbc-rpm-mb-desc {
  color: #fde68a;
}

.hsbc-rpm-btn-wecom-advisor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.hsbc-rpm-btn-wecom-advisor:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

/* 底部行动栏 */
.hsbc-rpm-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.dark .hsbc-rpm-footer {
  background: rgba(15, 23, 42, 0.6);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.hsbc-rpm-btn-ghost {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hsbc-rpm-btn-ghost:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.dark .hsbc-rpm-btn-ghost {
  background: #1e293b;
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .hsbc-rpm-btn-ghost:hover {
  background: #334155;
  color: #ffffff;
}

/* 弹窗主支付按钮 (严格遵循 Rule 3: 皇家蓝 #1d6ff2) */
.hsbc-rpm-btn-pay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border: 1px solid #1d6ff2 !important;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(29, 111, 242, 0.3);
}

.hsbc-rpm-btn-pay:hover {
  background: #1558cc !important;
  border-color: #1558cc !important;
  box-shadow: 0 4px 12px rgba(29, 111, 242, 0.4);
  transform: translateY(-1px);
}

.hsbc-rpm-btn-pay:active {
  background: #0e46a8 !important;
  border-color: #0e46a8 !important;
  transform: translateY(0);
}

.dark .hsbc-rpm-btn-pay {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
}

.dark .hsbc-rpm-btn-pay:hover {
  background: #1558cc !important;
  border-color: #1558cc !important;
}

body.hsbc-rpm-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .hsbc-dc-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hsbc-dc-actions {
    width: 100%;
    justify-content: space-between;
  }
  .hsbc-rpm-footer {
    flex-direction: column-reverse;
  }
  .hsbc-rpm-btn-ghost,
  .hsbc-rpm-btn-pay {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}



/* ==========================================================================
   20. 双页面分离架构与落地页专属样式体系 (HSBC Landing & Distraction-Free Portal)
   ========================================================================== */

/* 20.1 资料申报中台专属顶栏 (Distraction-Free Application Header) */
.hsbc-apply-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: var(--hsbc-radius-lg);
  margin-bottom: 16px;
  box-shadow: var(--hsbc-shadow-sm);
}

.hsbc-apply-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hsbc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--hsbc-text-secondary);
  padding: 6px 12px;
  border-radius: var(--hsbc-radius-sm);
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  transition: all 0.2s ease;
}

.hsbc-back-link:hover {
  color: var(--hsbc-primary-blue);
  border-color: var(--hsbc-primary-blue);
}

.hsbc-apply-portal-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbc-app-badge {
  font-size: 11px;
  font-weight: 700;
  color: #db0011;
  background: rgba(219, 0, 17, 0.08);
  border: 1px solid rgba(219, 0, 17, 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.hsbc-app-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
}

.hsbc-apply-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbc-safe-shield-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hsbc-text-muted);
}

.hsbc-btn-wecom-xs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hsbc-btn-wecom-xs:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

/* 20.2 汇丰官方旗舰金融风范落地页设计体系 (HSBC Official Flagship Edition)
   ==========================================================================
   核心设计哲学：
   1. 汇丰官方红黑经典：严谨使用官方汇丰红 (#db0011)、权威石板黑 (#111827)、纯白留白与纤细发丝线；
   2. 摒弃任何花哨霓虹、渐变光晕与五彩 SaaS 杂色，回归国际百年大行沉稳、严谨、内敛的商業金融质感；
   3. 严格遵循 GEMINI.md 核心规范：
      - 实心主行动按钮明暗模式恒定一律为 #1d6ff2 皇家蓝（纯白文字），严禁篡改为浅天蓝；
      - 明亮模式严禁出现任何大块黑色/深夜蓝底框，100% 保持机构级浅色纯洁基调；
      - 暗黑模式 100% 显式封装在 html.dark / [data-theme="dark"] / .dark 作用域内；
   4. 1240px 对称容器标尺，完全响应式断点适配。
   ========================================================================== */

/* 20.2.1 整体门户与通用间距 */
.hsbc-official-portal {
  background-color: var(--hsbc-bg-canvas, #f4f7fb);
  color: var(--hsbc-text-primary, #0d192b);
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04";
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hsbc-official-portal .hsbc-section {
  padding: 40px 0;
}

.hsbc-section-container-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.hsbc-sec-heading-group {
  margin-bottom: 28px;
}

.hsbc-sec-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--hsbc-primary-text, #1558cc);
  background: var(--hsbc-primary-light, #eff6ff);
  border: 1px solid var(--hsbc-primary-border, #bfdbfe);
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hsbc-sec-title {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin: 0 0 8px 0;
  line-height: 1.35;
  letter-spacing: 0 !important;
}

html[lang="en"] .hsbc-sec-title {
  letter-spacing: 0 !important;
}

.hsbc-sec-desc {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  line-height: 1.6;
  margin: 0;
  max-width: 820px;
}

/* 20.2.1 汇丰银行官方门户二级导航栏 (.hsbc-banking-subnav) */
.hsbc-banking-subnav {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 12px;
  padding: 10px 18px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: block;
}

.hbs-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
}

.hbs-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hbs-brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hbs-badge-svg {
  height: 20px;
  width: auto;
  display: block;
}

.hbs-tag {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  background: #fff1f2;
  color: #db0011;
  border: 1px solid #fecdd3;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hbs-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hbs-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.hbs-links li {
  flex-shrink: 0;
}

.hbs-links li a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--hsbc-text-secondary, #273e56);
  text-decoration: none;
  padding: 4px 6px;
  position: relative;
  transition: color 0.18s ease;
  white-space: nowrap !important;
  display: inline-block;
}

.hbs-links li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--hsbc-primary-blue, #1d6ff2);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.hbs-links li a:hover {
  color: var(--hsbc-primary-blue, #1d6ff2);
}

.hbs-links li a:hover::after {
  transform: scaleX(1);
}

.hbs-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hbs-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.hbs-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.25);
  display: inline-block;
  animation: hsbcStatusPulse 2s infinite ease-in-out;
}

@media (max-width: 1024px) {
  .hbs-center {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
  }
  .hbs-center::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .hbs-center {
    display: none;
  }
}

/* 20.2.2 顶部 Hero：汇丰商业理财官方旗舰展台 (.hsbc-official-hero) */
.hsbc-official-hero {
  padding-top: 4px;
  padding-bottom: 24px;
}

.hsbc-official-hero-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 18px;
  padding: 44px 40px 40px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
}

.hsbc-hero-top-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #db0011;
  z-index: 2;
}

.hsbc-official-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}

/* 恒诚持牌资质 × 汇丰商业理财 顶级联名条 (居中对称旗舰印章) */
.hsbc-co-brand-master-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hsbc-border-subtle, #f1f5f9);
}

.hcmb-brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hcmb-meta-cluster {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hcmb-partner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hcmb-hc-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
}

.hcmb-logo-light {
  display: block !important;
}

.hcmb-logo-dark {
  display: none !important;
}

.hcmb-tcsp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--hsbc-text-primary, #0d192b);
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  padding: 4px 11px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.hcmb-tcsp-pill svg {
  color: var(--hsbc-accent-emerald, #059669);
}

.hcmb-cross {
  font-size: 15px;
  font-weight: 500;
  color: #94a3b8;
  user-select: none;
  line-height: 1;
  padding: 0 4px;
}

.hcmb-hsbc-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hcmb-hsbc-svg {
  display: block;
  height: 30px;
  width: auto;
}

.hcmb-bank-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  border-left: 1px solid var(--hsbc-border, #e2e8f0);
  padding-left: 10px;
  margin-left: 2px;
}

.hcmb-bank-zh {
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--hsbc-text-primary, #0d192b);
  letter-spacing: 0;
}

.hcmb-bank-unit {
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--hsbc-text-muted, #475569);
  letter-spacing: 0;
}

.hcmb-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

.hcmb-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
  display: inline-block;
  animation: hsbcStatusPulse 2s infinite ease-in-out;
}

@keyframes hsbcStatusPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.1); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.3); }
}

/* 官方标题体系 (居中对称金融旗舰大展台) */
.hsbc-official-typography {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 30px auto;
}

.hsbc-kicker-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hsbc-kicker-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hsbc-primary-text, #1558cc);
  background: var(--hsbc-primary-light, #eff6ff);
  border: 1px solid var(--hsbc-primary-border, #bfdbfe);
  padding: 3px 8px;
  border-radius: 4px;
}

.hsbc-kicker-text {
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--hsbc-text-secondary, #273e56);
}

.hsbc-official-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  line-height: 1.28 !important;
  margin: 0 0 16px 0;
  letter-spacing: 0 !important;
}

html[lang="en"] .hsbc-official-title {
  letter-spacing: 0 !important;
}

/* 4大核心特性标牌带 (对齐 OCBC 规范) */
.hsbc-master-feature-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hmfs-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--hsbc-text-secondary, #273e56);
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  padding: 4px 12px;
  border-radius: 999px;
}

.hmfs-item svg {
  color: #059669;
}

.hmfs-item.hmfs-highlight {
  background: var(--hsbc-bg-subtle, #f8fafc);
  border-color: var(--hsbc-border, #e2e8f0);
  color: var(--hsbc-text-secondary, #273e56);
  font-weight: 500;
}

.hmfs-item.hmfs-highlight svg {
  color: #059669;
}

.hsbc-official-sub-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hsbc-official-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.8vw, 15.5px);
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  line-height: 1.68;
  margin: 0 auto;
  max-width: 860px;
  text-align: center;
}

.hsbc-proof-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hsbc-proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--hsbc-primary-text, #1558cc) !important;
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  padding: 4px 12px;
  border-radius: 9999px;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.hsbc-proof-chip:hover {
  background: var(--hsbc-primary-light, #eff6ff);
  border-color: var(--hsbc-primary-border, #bfdbfe);
  color: var(--hsbc-primary-hover, #1558cc) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(29, 111, 242, 0.12);
}

/* 4 大核心金融公信力指标卡 (HSBC Institutional Metric Deck) */
.hsbc-official-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 28px 0 28px;
}

.hom-card {
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
}

.hom-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hsbc-border, #e2e8f0);
  transition: background 0.2s ease;
}

.hom-card:hover {
  background: var(--hsbc-bg-card, #ffffff);
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px -2px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

.hom-card:hover::before {
  background: #db0011;
}

.hom-top {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
  color: var(--hsbc-text-primary, #0d192b);
}

.hom-num {
  font-size: 32px;
  font-weight: 600 !important;
  color: var(--hsbc-text-primary, #0d192b) !important;
  line-height: 1;
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0;
}

.hom-unit {
  font-size: 14px;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  color: var(--hsbc-text-primary, #0d192b) !important;
  letter-spacing: 0;
}

.hom-plus {
  font-size: 20px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b) !important;
  font-family: var(--font-sans) !important;
}

.hom-label {
  font-size: 13.5px;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin-bottom: 4px;
}

.hom-note {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-sans) !important;
  color: var(--hsbc-text-muted, #475569);
  line-height: 1.45;
}

/* 核心超级行动召唤 (Dual Action Row · GEMINI.md 恒定 #1d6ff2 + 企微官方绿) */
.hsbc-official-cta-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.hsbc-cta-btns-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hsbc-cta-btns-row .hsbc-official-main-cta,
.hsbc-cta-btns-row .hsbc-btn-wecom {
  width: auto !important;
}

.hsbc-official-main-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1d6ff2 !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  padding: 13px 32px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(29, 111, 242, 0.25) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.hsbc-official-main-cta:hover {
  background: #1558cc !important;
  box-shadow: 0 6px 20px rgba(29, 111, 242, 0.35) !important;
  transform: translateY(-2px);
}

.hsbc-official-main-cta:active {
  background: #0e46a8 !important;
  transform: translateY(0);
}

.hsbc-btn-wecom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  padding: 13px 28px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.hsbc-btn-wecom:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
}

.hsbc-btn-wecom:active {
  transform: translateY(0);
}

.hsbc-official-footnote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--hsbc-text-muted, #64748b);
  line-height: 1.5;
  text-align: center;
  max-width: 860px;
}

.hsbc-official-footnote svg {
  color: #059669;
  flex-shrink: 0;
}

/* 20.2.3 核心 6 步开户申报全景旅程线 (Interactive 6-Step Onboarding Pipeline) */
.hsbc-pipe-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.hsbc-pipe-card {
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: 12px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hsbc-pipe-card:hover {
  background: var(--hsbc-bg-card, #ffffff);
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

.hpc-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hpc-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--hsbc-primary-light, #eff6ff);
  color: var(--hsbc-primary-text, #1558cc);
  border: 1px solid var(--hsbc-primary-border, #bfdbfe);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hsbc-pipe-step-1 .hpc-step-badge {
  background: var(--hsbc-primary-blue, #1d6ff2);
  color: #ffffff;
  border-color: var(--hsbc-primary-blue, #1d6ff2);
}

.hsbc-pipe-step-6 .hpc-step-badge {
  background: var(--hsbc-text-primary, #0d192b);
  color: #ffffff;
  border-color: var(--hsbc-text-primary, #0d192b);
}

.hpc-time-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--hsbc-text-muted, #475569);
  background: rgba(148, 163, 184, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.hpc-tag-highlight {
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.hpc-heading {
  font-size: 14.5px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin: 0 0 5px 0;
  line-height: 1.35;
}

.hpc-summary {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  line-height: 1.45;
  margin: 0;
  flex-grow: 1;
}

.hpc-arrow {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbc-primary-blue, #1d6ff2);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.hsbc-pipe-card:hover .hpc-arrow {
  opacity: 1;
  transform: translateX(0);
}

.hsbc-pipe-summary-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 22px;
  margin-top: 22px;
}

.hpss-trust-deck {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hpss-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hsbc-text-primary, #0d192b);
}

.hpss-item svg {
  color: #059669;
  flex-shrink: 0;
}

.hsbc-pipe-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1d6ff2;
  color: #ffffff !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 13.5px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.hsbc-pipe-action-btn:hover {
  background: #1558cc;
  transform: translateY(-1px);
}

/* 20.2.4 汇丰商业公户核心优势：经典金融 Bento Grid */
.hsbc-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hsbc-adv-span-2 {
  grid-column: span 2;
}

.hsbc-adv-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.hsbc-adv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hsbc-border, #e5e7eb);
  transition: background 0.2s ease;
}

.hsbc-adv-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
  transform: translateY(-3px);
}

.hsbc-adv-card:hover::before {
  background: #db0011;
}

.hac-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hac-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hsbc-text-primary, #111827);
}

.hac-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbc-primary-text, #1558cc);
  background: var(--hsbc-primary-light, #eff6ff);
  border: 1px solid var(--hsbc-primary-border, #bfdbfe);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.hac-title {
  font-size: 17.5px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.hac-desc {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  line-height: 1.65;
  margin: 0;
  flex-grow: 1;
}

.hsbc-phone-link {
  color: var(--hsbc-text-primary, #0d192b) !important;
  font-weight: 600;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hac-currency-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hsbc-border-subtle, #f1f5f9);
}

.hac-curr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--hsbc-text-secondary, #273e56);
}

.hac-curr-chip strong {
  color: var(--hsbc-text-primary, #0d192b);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 20.2.5 开户必备材料清单：智能指引矩阵 (Statutory Dossier Matrix) */
.hsbc-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.hsbc-doc-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.hdoc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hsbc-border-subtle, #f1f5f9);
}

.hdoc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--hsbc-text-primary, #0d192b);
  color: #ffffff;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hdoc-title {
  font-size: 16px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin: 0 0 2px 0;
  line-height: 1.35;
}

.hdoc-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--hsbc-text-muted, #475569);
  display: block;
}

.hdoc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.hdoc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hdoc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--hsbc-accent-emerald, #059669);
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.hdoc-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbc-text-primary, #0d192b);
  margin-bottom: 2px;
}

.hdoc-info span {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  line-height: 1.45;
}

.hdoc-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--hsbc-bg-subtle, #f8fafc);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--hsbc-text-secondary, #475569);
  margin-top: 18px;
  line-height: 1.45;
}

.hdoc-tip svg {
  color: var(--hsbc-primary-text, #1558cc);
  flex-shrink: 0;
  margin-top: 2px;
}

/* 20.2.6 两种面签方式横向决策看板 (Decision Comparison Board) */
.hsbc-modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.hsbc-mode-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.hsbc-mode-card-inperson .hmc-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--hsbc-primary-blue, #1d6ff2);
}

.hmc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hsbc-border-subtle, #f1f5f9);
}

.hmc-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.hmc-title {
  font-size: 17.5px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin: 0;
}

.hmc-flag-red {
  background: var(--hsbc-primary-light, #eff6ff);
  color: var(--hsbc-primary-text, #1558cc);
  border: 1px solid var(--hsbc-primary-border, #bfdbfe);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.hmc-flag-slate {
  background: var(--hsbc-bg-subtle, #f1f5f9);
  color: var(--hsbc-text-secondary, #273e56);
  border: 1px solid var(--hsbc-border, #e2e8f0);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
}

.hmc-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--hsbc-text-muted, #475569);
  margin: 0;
  line-height: 1.5;
}

.hmc-highlight-time {
  text-align: right;
  flex-shrink: 0;
}

.hht-label {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--hsbc-text-muted, #475569);
  margin-bottom: 2px;
}

.hht-val {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--hsbc-text-primary, #0d192b);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.hht-red {
  color: var(--hsbc-primary-text, #1558cc) !important;
}

.hmc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  flex-grow: 1;
}

.hmc-feature-row {
  display: flex;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid var(--hsbc-border-subtle, #f8fafc);
}

.hmc-label {
  color: var(--hsbc-text-muted, #475569);
  font-weight: 500;
  flex-shrink: 0;
  width: 90px;
}

.hmc-val {
  color: var(--hsbc-text-primary, #0d192b);
  font-weight: 400;
}

.hsbc-btn-block {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  padding: 13px 20px !important;
  box-sizing: border-box !important;
  font-size: 14.5px !important;
  border-radius: 8px !important;
}

/* 幽灵次要按钮 (Secondary / Ghost · 符合 GEMINI.md) */
.hsbc-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hsbc-bg-subtle, #f5f8fb) !important;
  color: var(--hsbc-text-primary, #0d192b) !important;
  border: 1px solid var(--hsbc-border, #cbd5e1) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-family: var(--font-sans);
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.hsbc-btn-ghost:hover {
  background: #ffffff !important;
  border-color: #1d6ff2 !important;
  color: #1d6ff2 !important;
}

/* 20.2.7 权威 FAQ 交互手风琴 (Smart Accordion FAQ) */
.hsbc-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hsbc-faq-collapse {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hsbc-faq-collapse[open] {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.hfc-question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  user-select: none;
  list-style: none;
}

.hfc-question::-webkit-details-marker {
  display: none;
}

.hfc-q-num {
  font-size: 12px;
  font-weight: 600;
  background: var(--hsbc-primary-light, #eff6ff);
  color: var(--hsbc-primary-text, #1558cc);
  border: 1px solid var(--hsbc-primary-border, #bfdbfe);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.hfc-q-text {
  flex-grow: 1;
}

.hfc-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.hsbc-faq-collapse[open] .hfc-arrow {
  transform: rotate(-135deg);
  border-color: var(--hsbc-primary-blue, #1d6ff2);
}

.hfc-answer {
  padding: 0 20px 20px 48px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  line-height: 1.7;
}

/* 20.2.8 底部终极转化卡片 (Ultimate Conversion Anchor) */
.hsbc-official-cta-card {
  background: var(--hsbc-bg-card, #ffffff);
  border: 1px solid var(--hsbc-border, #e5e7eb);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

.hcc-red-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--hsbc-primary-blue, #1d6ff2);
}

.hcc-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hsbc-primary-text, #1558cc);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.hcc-heading {
  font-size: 24px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary, #0d192b);
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.hcc-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--hsbc-text-secondary, #273e56);
  margin: 0;
  max-width: 650px;
  line-height: 1.6;
}

.hcc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hsbc-btn-lg {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans);
  padding: 14px 32px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px rgba(29, 111, 242, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.hsbc-btn-lg:hover {
  background: #1558cc !important;
  box-shadow: 0 8px 24px rgba(29, 111, 242, 0.35) !important;
  transform: translateY(-2px);
}

.hsbc-btn-wecom.hsbc-btn-lg {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25) !important;
}

.hsbc-btn-wecom.hsbc-btn-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important;
}

/* 20.2.9 移动端吸底悬浮条 (Mobile Sticky Action Bar) */
.hsbc-mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hsbc-border, #e2e8f0);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

.hsbc-msb-inner {
  max-width: var(--container-max-width, 1240px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsbc-msb-apply {
  flex: 1;
  text-align: center !important;
  justify-content: center !important;
  padding: 12px !important;
  font-size: 14.5px !important;
}

.hsbc-msb-wecom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans);
  padding: 12px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  white-space: nowrap;
}

/* 20.2.10 暗黑模式 100% 显式封装隔离 (Strict GEMINI.md Rule 3 Dark Mode) */
html.dark .hsbc-banking-subnav,
[data-theme="dark"] .hsbc-banking-subnav,
.dark .hsbc-banking-subnav {
  background: #0b1220 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark .hbs-tag,
[data-theme="dark"] .hbs-tag,
.dark .hbs-tag {
  background: rgba(219, 0, 17, 0.15) !important;
  border-color: rgba(219, 0, 17, 0.35) !important;
  color: #f87171 !important;
}

html.dark .hbs-links li a,
[data-theme="dark"] .hbs-links li a,
.dark .hbs-links li a {
  color: #cbd5e1 !important;
}

html.dark .hbs-links li a:hover,
[data-theme="dark"] .hbs-links li a:hover,
.dark .hbs-links li a:hover {
  color: #f87171 !important;
}

html.dark .hbs-status-indicator,
[data-theme="dark"] .hbs-status-indicator,
.dark .hbs-status-indicator {
  background: rgba(5, 150, 105, 0.15) !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
  color: #34d399 !important;
}

html.dark .hbs-badge-svg .hsbc-wordmark-path,
[data-theme="dark"] .hbs-badge-svg .hsbc-wordmark-path,
.dark .hbs-badge-svg .hsbc-wordmark-path {
  fill: #f8fafc !important;
}

html.dark .hmfs-item,
[data-theme="dark"] .hmfs-item,
.dark .hmfs-item {
  background: #0f182c !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

html.dark .hsbc-sec-kicker,
[data-theme="dark"] .hsbc-sec-kicker,
.dark .hsbc-sec-kicker,
html.dark .hsbc-kicker-tag,
[data-theme="dark"] .hsbc-kicker-tag,
.dark .hsbc-kicker-tag,
html.dark .hpc-step-badge,
[data-theme="dark"] .hpc-step-badge,
.dark .hpc-step-badge,
html.dark .hac-badge,
[data-theme="dark"] .hac-badge,
.dark .hac-badge,
html.dark .hmc-flag-red,
[data-theme="dark"] .hmc-flag-red,
.dark .hmc-flag-red,
html.dark .hfc-q-num,
[data-theme="dark"] .hfc-q-num,
.dark .hfc-q-num,
html.dark .hcc-tag,
[data-theme="dark"] .hcc-tag,
.dark .hcc-tag {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
}

html.dark .hht-red,
[data-theme="dark"] .hht-red,
.dark .hht-red {
  color: #38bdf8 !important;
}

html.dark .hom-top,
[data-theme="dark"] .hom-top,
.dark .hom-top,
html.dark .hom-num,
[data-theme="dark"] .hom-num,
.dark .hom-num,
html.dark .hom-unit,
[data-theme="dark"] .hom-unit,
.dark .hom-unit,
html.dark .hom-plus,
[data-theme="dark"] .hom-plus,
.dark .hom-plus {
  color: #f8fafc !important;
}

html.dark .hom-note,
[data-theme="dark"] .hom-note,
.dark .hom-note {
  color: #94a3b8 !important;
}
html.dark .hsbc-official-portal,
[data-theme="dark"] .hsbc-official-portal,
.dark .hsbc-official-portal {
  background-color: #070c17 !important;
  color: #f8fafc !important;
}

html.dark .hsbc-official-hero-card,
[data-theme="dark"] .hsbc-official-hero-card,
.dark .hsbc-official-hero-card,
html.dark .hsbc-section-container-card,
[data-theme="dark"] .hsbc-section-container-card,
.dark .hsbc-section-container-card,
html.dark .hsbc-adv-card,
[data-theme="dark"] .hsbc-adv-card,
.dark .hsbc-adv-card,
html.dark .hsbc-doc-card,
[data-theme="dark"] .hsbc-doc-card,
.dark .hsbc-doc-card,
html.dark .hsbc-mode-card,
[data-theme="dark"] .hsbc-mode-card,
.dark .hsbc-mode-card,
html.dark .hsbc-faq-collapse,
[data-theme="dark"] .hsbc-faq-collapse,
.dark .hsbc-faq-collapse,
html.dark .hsbc-official-cta-card,
[data-theme="dark"] .hsbc-official-cta-card,
.dark .hsbc-official-cta-card {
  background: #0b1220 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html.dark .hom-card,
[data-theme="dark"] .hom-card,
.dark .hom-card,
html.dark .hsbc-pipe-card,
[data-theme="dark"] .hsbc-pipe-card,
.dark .hsbc-pipe-card,
html.dark .hsbc-pipe-summary-strip,
[data-theme="dark"] .hsbc-pipe-summary-strip,
.dark .hsbc-pipe-summary-strip,
html.dark .hac-icon-wrap,
[data-theme="dark"] .hac-icon-wrap,
.dark .hac-icon-wrap,
html.dark .hac-curr-chip,
[data-theme="dark"] .hac-curr-chip,
.dark .hac-curr-chip,
html.dark .hdoc-tip,
[data-theme="dark"] .hdoc-tip,
.dark .hdoc-tip {
  background: #0f182c !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .hsbc-wordmark-path,
[data-theme="dark"] .hsbc-wordmark-path,
.dark .hsbc-wordmark-path {
  fill: #ffffff !important;
}

html.dark .hcmb-bank-zh,
[data-theme="dark"] .hcmb-bank-zh,
.dark .hcmb-bank-zh,
html.dark .hsbc-sec-title,
[data-theme="dark"] .hsbc-sec-title,
.dark .hsbc-sec-title,
html.dark .hsbc-official-title,
[data-theme="dark"] .hsbc-official-title,
.dark .hsbc-official-title,
html.dark .hpc-heading,
[data-theme="dark"] .hpc-heading,
.dark .hpc-heading,
html.dark .hac-title,
[data-theme="dark"] .hac-title,
.dark .hac-title,
html.dark .hdoc-title,
[data-theme="dark"] .hdoc-title,
.dark .hdoc-title,
html.dark .hmc-title,
[data-theme="dark"] .hmc-title,
.dark .hmc-title,
html.dark .hfc-question,
[data-theme="dark"] .hfc-question,
.dark .hfc-question,
html.dark .hcc-heading,
[data-theme="dark"] .hcc-heading,
.dark .hcc-heading,
html.dark .hom-num,
[data-theme="dark"] .hom-num,
.dark .hom-num,
html.dark .hom-label,
[data-theme="dark"] .hom-label,
.dark .hom-label,
html.dark .hpss-item,
[data-theme="dark"] .hpss-item,
.dark .hpss-item {
  color: #f8fafc !important;
}

html.dark .hsbc-official-subtitle,
[data-theme="dark"] .hsbc-official-subtitle,
.dark .hsbc-official-subtitle,
html.dark .hsbc-sec-desc,
[data-theme="dark"] .hsbc-sec-desc,
.dark .hsbc-sec-desc,
html.dark .hpc-summary,
[data-theme="dark"] .hpc-summary,
.dark .hpc-summary,
html.dark .hac-desc,
[data-theme="dark"] .hac-desc,
.dark .hac-desc,
html.dark .hdoc-info span,
[data-theme="dark"] .hdoc-info span,
.dark .hdoc-info span,
html.dark .hfc-answer,
[data-theme="dark"] .hfc-answer,
.dark .hfc-answer,
html.dark .hcc-desc,
[data-theme="dark"] .hcc-desc,
.dark .hcc-desc,
html.dark .hmc-val,
[data-theme="dark"] .hmc-val,
.dark .hmc-val {
  color: #cbd5e1 !important;
}

html.dark .hdoc-info strong,
[data-theme="dark"] .hdoc-info strong,
.dark .hdoc-info strong {
  color: #f1f5f9 !important;
}

html.dark .hcmb-logo-light,
[data-theme="dark"] .hcmb-logo-light,
.dark .hcmb-logo-light {
  display: none !important;
}

html.dark .hcmb-logo-dark,
[data-theme="dark"] .hcmb-logo-dark,
.dark .hcmb-logo-dark {
  display: block !important;
}

html.dark .hcmb-tcsp-pill,
[data-theme="dark"] .hcmb-tcsp-pill,
.dark .hcmb-tcsp-pill {
  background: #0f182c !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

html.dark .hsbc-proof-chip,
[data-theme="dark"] .hsbc-proof-chip,
.dark .hsbc-proof-chip {
  background: #0f182c !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
  color: #38bdf8 !important;
}

html.dark .hsbc-proof-chip:hover,
[data-theme="dark"] .hsbc-proof-chip:hover,
.dark .hsbc-proof-chip:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #7dd3fc !important;
}

html.dark .hsbc-btn-ghost,
[data-theme="dark"] .hsbc-btn-ghost,
.dark .hsbc-btn-ghost {
  background: #101f33 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark .hsbc-btn-ghost:hover,
[data-theme="dark"] .hsbc-btn-ghost:hover,
.dark .hsbc-btn-ghost:hover {
  background: #142844 !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

html.dark .hsbc-mobile-sticky-bar,
[data-theme="dark"] .hsbc-mobile-sticky-bar,
.dark .hsbc-mobile-sticky-bar {
  background: rgba(7, 12, 23, 0.96) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* 20.2.11 响应式与自适应断点 Media Queries */
@media (max-width: 1080px) {
  .hsbc-pipe-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hsbc-adv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbc-adv-span-2 {
    grid-column: span 2;
  }
  .hsbc-docs-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-official-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hsbc-official-hero-card {
    padding: 32px 20px 24px;
    border-radius: 14px;
  }
  .hsbc-co-brand-master-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hcmb-brand-cluster {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }
  .hcmb-meta-cluster {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }
  .hsbc-section-container-card {
    padding: 24px 18px;
    border-radius: 14px;
  }
  .hsbc-official-title {
    font-size: 24px !important;
  }
  .hsbc-pipe-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .hsbc-pipe-summary-strip {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .hsbc-pipe-action-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  .hsbc-adv-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-adv-span-2 {
    grid-column: span 1;
  }
  .hsbc-modes-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-official-cta-card {
    flex-direction: column;
    align-items: stretch;
    padding: 28px 20px;
  }
  .hsbc-btn-lg {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .hsbc-official-portal .hsbc-mobile-sticky-bar {
    display: block !important;
  }
  .hsbc-official-portal {
    padding-bottom: 76px;
  }
}

@media (max-width: 480px) {
  .hsbc-pipe-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-official-metrics-grid {
    grid-template-columns: 1fr;
  }
  .hfc-answer {
    padding: 0 16px 16px 20px;
  }
}

/* ==============================================================
   4A 金融申报极简合规微底栏 (Minimal Compliance Footer) - 开户向导专属隔离
   ============================================================== */
.hk-minimal-compliance-footer {
  background: var(--hsbc-bg-subtle, #f8fafc);
  border-top: 1px solid var(--hsbc-border, #dde3ec);
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--hsbc-text-muted, #475569);
  font-size: 12px;
}
.hk-min-footer-container {
  max-width: var(--container-max-width, 1240px);
  margin: 0 auto;
  padding: 0 calc(var(--container-padding-x, 24px) + env(safe-area-inset-right, 0px)) 0 calc(var(--container-padding-x, 24px) + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hk-min-footer-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hsbc-border, #dde3ec);
}
.hk-min-trust-left,
.hk-min-trust-right {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.hk-min-trust-badge,
.hk-min-trust-chip,
.hk-min-sec-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hsbc-text-muted, #475569);
}
.hk-min-trust-badge {
  color: var(--hsbc-text, #0d192b);
  font-weight: 600;
}
.hk-min-trust-badge svg {
  color: var(--blue, #1d6ff2);
}
.hk-min-trust-chip a {
  color: var(--blue-text, #1558cc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hk-min-trust-chip a:hover {
  color: var(--blue, #1d6ff2);
}
.hk-min-sep {
  color: var(--hsbc-border, #cbd5e1);
  font-size: 11px;
}
.hk-min-sec-item {
  font-weight: 500;
}
.hk-min-footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.hk-min-copyright {
  font-size: 12px;
  color: var(--hsbc-text-muted, #64748b);
  font-weight: 500;
}
.hk-min-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hk-min-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.hk-min-legal-links a {
  color: var(--hsbc-text-muted, #64748b);
  text-decoration: none;
  transition: color 0.15s;
}
.hk-min-legal-links a:hover {
  color: var(--blue, #1d6ff2);
  text-decoration: underline;
}

/* 暗黑模式适配 */
.dark .hk-minimal-compliance-footer {
  background: #060b13 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}
.dark .hk-min-footer-trust-row {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .hk-min-trust-badge {
  color: #f1f5f9 !important;
}
.dark .hk-min-trust-badge svg {
  color: #38bdf8 !important;
}
.dark .hk-min-trust-chip a {
  color: #38bdf8 !important;
}
.dark .hk-min-trust-chip,
.dark .hk-min-sec-item,
.dark .hk-min-copyright,
.dark .hk-min-legal-links a {
  color: #94a3b8 !important;
}
.dark .hk-min-legal-links a:hover {
  color: #38bdf8 !important;
}
.dark .hk-min-sep {
  color: rgba(255, 255, 255, 0.15) !important;
}

/* 强制隐藏全站大页脚外链矩阵与冗长免责 */
body.has-minimal-footer .footer-main-container .footer-grid-wrapper,
body.has-minimal-footer .footer-disclaimer,
body.hsbc-portal-apply-mode-active .footer-main-container .footer-grid-wrapper,
body.hsbc-portal-apply-mode-active .footer-disclaimer {
  display: none !important;
}


@media (max-width: 768px) {
  .hk-min-footer-trust-row,
  .hk-min-footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hk-min-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   30. 4A 资深总监级开户中台专属视觉设计系统 (HSBC Apply Portal Executive Edition)
   设计总监核心哲学：
   - 秩序之美：精密网格对齐、呼吸感留白、信息层级清晰分明
   - 品牌势能：汇丰银行经典深红与恒诚商务皇家蓝交融呼应，极尽内敛奢华
   - 机构权威：香港持牌机构 TCSP: TC006431 与官方在册档案的司法严肃感
   - 交互灵动：微光脉冲、柔和毛玻璃、触控反馈、无缝动效
   - 规则铁律：恒定主行动按钮 #1d6ff2 背景、官方企微绿渐变直联、暗黑模式绝对隔离
   ========================================================================== */

/* 30.1 门户整体环境光与网格氛围 */
.hsbc-portal-apply-mode {
  background-color: var(--hsbc-bg-canvas);
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04";
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: 
    radial-gradient(circle at 10% 8%, rgba(29, 111, 242, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 12%, rgba(219, 0, 17, 0.04) 0%, transparent 35%),
    radial-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  background-position: 0 0, 0 0, 0 0;
  min-height: 100vh;
  padding-top: 14px !important;
  padding-bottom: 70px !important;
}

/* 30.2 申报中台顶控条 (Executive Onboarding Console Header) */
.hsbc-portal-apply-mode .hsbc-apply-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hsbc-portal-apply-mode .hsbc-apply-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hsbc-portal-apply-mode .hsbc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--hsbc-text-secondary);
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.4;
}

.hsbc-portal-apply-mode .hsbc-back-link:hover {
  color: #1d6ff2;
  border-color: rgba(29, 111, 242, 0.35);
  background: rgba(29, 111, 242, 0.06);
  transform: translateX(-2px);
}

.hsbc-portal-apply-mode .hsbc-apply-portal-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hsbc-portal-apply-mode .hsbc-app-co-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(219, 0, 17, 0.05);
  border: 1px solid rgba(219, 0, 17, 0.18);
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}

.hsbc-portal-apply-mode .hsbc-logo-hexagon-sm {
  width: 20px;
  height: 10px;
  display: block;
}

.hsbc-portal-apply-mode .hsbc-app-badge-text {
  font-size: 11px;
  font-weight: 600;
  color: #db0011;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.hsbc-portal-apply-mode .hsbc-app-title {
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--hsbc-text-primary);
  letter-spacing: 0;
}

.hsbc-portal-apply-mode .hsbc-apply-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hsbc-portal-apply-mode .hsbc-safe-shield-tip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbc-text-secondary);
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.2);
  padding: 5px 12px;
  border-radius: 9999px;
  line-height: 1.3;
}

.hsbc-portal-apply-mode .hsbc-safe-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: hsbcPulseLive 2.2s infinite;
  display: inline-block;
  flex-shrink: 0;
}

.hsbc-portal-apply-mode .hsbc-btn-wecom-xs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.3;
}

.hsbc-portal-apply-mode .hsbc-btn-wecom-xs:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

/* 30.3 6步开户看板：航空母舰级流程中枢 (Stepper Pipeline) */
.hsbc-portal-apply-mode .hsbc-stepper-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hsbc-border);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 6px 24px -4px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hsbc-portal-apply-mode .hsbc-stepper-bar::-webkit-scrollbar {
  display: none;
}

.hsbc-portal-apply-mode .hsbc-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.65;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  flex-shrink: 0;
}

.hsbc-portal-apply-mode .hsbc-step-item:hover {
  opacity: 0.95;
  background: var(--hsbc-bg-subtle);
}

.hsbc-portal-apply-mode .hsbc-step-item.active {
  opacity: 1;
  background: rgba(29, 111, 242, 0.05);
}

.hsbc-portal-apply-mode .hsbc-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hsbc-bg-subtle);
  border: 2px solid var(--hsbc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--hsbc-text-muted);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.hsbc-portal-apply-mode .hsbc-step-item.active .hsbc-step-dot {
  background: #1d6ff2 !important;
  border-color: #1d6ff2 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(29, 111, 242, 0.18), 0 4px 14px rgba(29, 111, 242, 0.35);
  transform: scale(1.05);
}

.hsbc-portal-apply-mode .hsbc-step-item.completed .hsbc-step-dot {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.hsbc-portal-apply-mode .hsbc-step-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
  line-height: 1.3;
  letter-spacing: 0;
}

.hsbc-portal-apply-mode .hsbc-step-item.active .hsbc-step-title {
  color: #1d6ff2;
}

.hsbc-portal-apply-mode .hsbc-step-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--hsbc-text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

.hsbc-portal-apply-mode .hsbc-step-line {
  flex: 1;
  height: 2px;
  background: var(--hsbc-border);
  margin: 0 10px;
  min-width: 20px;
  border-radius: 9999px;
  transition: background 0.3s ease;
}

.hsbc-portal-apply-mode .hsbc-step-line.completed {
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
}

/* 30.4 申报主卡片：旗舰级金融工单架构台 (Master Console Frame) */
.hsbc-portal-apply-mode .hsbc-card-container {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: 20px;
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  padding: 38px 46px;
  position: relative;
  overflow: hidden;
}

.hsbc-portal-apply-mode .hsbc-card-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1d6ff2 0%, #8b5cf6 50%, #db0011 100%);
  z-index: 2;
  border-radius: 20px 20px 0 0;
}

.hsbc-portal-apply-mode .hsbc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hsbc-border-subtle);
}

.hsbc-portal-apply-mode .hsbc-draft-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 550;
  color: var(--hsbc-text-muted);
}

.hsbc-portal-apply-mode .hsbc-draft-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: hsbcPulseLive 2.4s infinite;
  display: inline-block;
  flex-shrink: 0;
}

.hsbc-portal-apply-mode .hsbc-step-counter {
  font-size: 12px;
  font-weight: 600;
  color: #1d6ff2;
  background: rgba(29, 111, 242, 0.08);
  border: 1px solid rgba(29, 111, 242, 0.18);
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* 30.5 标题排版与分段呼吸感 */
.hsbc-portal-apply-mode .hsbc-pane-head {
  margin-bottom: 28px;
}

.hsbc-portal-apply-mode .hsbc-pane-title {
  font-size: 21px;
  font-weight: 500 !important;
  color: var(--hsbc-text-primary);
  margin: 0 0 8px 0;
  letter-spacing: 0 !important;
  line-height: 1.35;
}

.hsbc-portal-apply-mode .hsbc-pane-subtitle {
  font-size: 13.5px;
  color: var(--hsbc-text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 920px;
}

.hsbc-portal-apply-mode .hsbc-field-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin: 28px 0 16px 0;
  padding: 2px 0 8px 12px;
  border-left: 3px solid #1d6ff2;
  border-bottom: 1px dashed var(--hsbc-border-subtle);
  letter-spacing: 0.2px;
  text-transform: none;
}

/* 30.6 表单控件精密打磨 */
.hsbc-portal-apply-mode .hsbc-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin-bottom: 7px;
  letter-spacing: 0;
}

.hsbc-portal-apply-mode .hsbc-input,
.hsbc-portal-apply-mode .hsbc-select,
.hsbc-portal-apply-mode .hsbc-textarea {
  border-radius: 10px;
  border: 1px solid var(--hsbc-border);
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-primary);
  font-size: 13.5px;
  font-family: var(--font-sans);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hsbc-portal-apply-mode .hsbc-input {
  height: 44px;
  padding: 0 14px;
}

.hsbc-portal-apply-mode .hsbc-select {
  height: 44px;
  padding: 0 14px;
}

.hsbc-portal-apply-mode .hsbc-textarea {
  padding: 12px 14px;
  line-height: 1.6;
}

.hsbc-portal-apply-mode .hsbc-input:focus,
.hsbc-portal-apply-mode .hsbc-select:focus,
.hsbc-portal-apply-mode .hsbc-textarea:focus {
  background: var(--hsbc-bg-card);
  border-color: #1d6ff2;
  box-shadow: 0 0 0 3.5px rgba(29, 111, 242, 0.16);
  outline: none;
}

/* 30.7 Step 1 检索与法团证书卡片 */
.hsbc-portal-apply-mode .hsbc-search-input-group .hsbc-input {
  height: 50px;
  padding-left: 46px;
  font-size: 14px;
  border-radius: 12px;
}

.hsbc-portal-apply-mode .hsbc-search-icon {
  left: 16px;
}

.hsbc-portal-apply-mode #hsbc-btn-search-company {
  right: 8px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: 8px;
  background-color: #1d6ff2 !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 2px 8px rgba(29, 111, 242, 0.3);
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode #hsbc-btn-search-company:hover {
  background-color: #1558cc !important;
  box-shadow: 0 4px 12px rgba(29, 111, 242, 0.4);
}

.hsbc-portal-apply-mode .hsbc-company-card {
  background: 
    linear-gradient(var(--hsbc-bg-card), var(--hsbc-bg-card)) padding-box,
    linear-gradient(90deg, rgba(29, 111, 242, 0.45) 0%, rgba(139, 92, 246, 0.35) 50%, rgba(219, 0, 17, 0.45) 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: 0 4px 20px -2px rgba(29, 111, 242, 0.08), 0 2px 8px -2px rgba(219, 0, 17, 0.05);
  margin-bottom: 22px;
}

.hsbc-portal-apply-mode .hsbc-cc-name-zh {
  font-size: 17px;
  font-weight: 600;
  color: var(--hsbc-text-primary);
  letter-spacing: 0;
}

.hsbc-portal-apply-mode .hsbc-cc-name-en {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--hsbc-text-secondary);
  text-transform: uppercase;
}

/* 30.8 Step 2 经办人身份卡片与登录网关 */
.hsbc-portal-apply-mode .hsbc-login-gate-card {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 1.5px solid rgba(29, 111, 242, 0.22);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 22px;
}

.hsbc-portal-apply-mode .hsbc-btn-gate {
  background-color: #1d6ff2 !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(29, 111, 242, 0.3);
}

.hsbc-portal-apply-mode .hsbc-user-status-banner {
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.22);
  border-radius: 10px;
  padding: 11px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hsbc-portal-apply-mode .hsbc-usb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* 30.9 Step 3 商业运营 6 大行业卡片精致重构 */
.hsbc-portal-apply-mode .hsbc-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.hsbc-portal-apply-mode .hsbc-ind-card {
  background: var(--hsbc-bg-subtle);
  border: 1.5px solid var(--hsbc-border);
  border-radius: 12px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

.hsbc-portal-apply-mode .hsbc-ind-card:hover {
  border-color: rgba(29, 111, 242, 0.45);
  background: var(--hsbc-bg-card);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.hsbc-portal-apply-mode .hsbc-ind-card.active {
  background: rgba(29, 111, 242, 0.04) !important;
  border-color: #1d6ff2 !important;
  box-shadow: 0 0 0 1px #1d6ff2, 0 8px 24px -4px rgba(29, 111, 242, 0.18) !important;
  transform: translateY(-2px);
}

.hsbc-portal-apply-mode .hsbc-ind-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: #1d6ff2;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.hsbc-portal-apply-mode .hsbc-ind-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hsbc-text-primary);
  margin-bottom: 6px;
  line-height: 1.35;
}

.hsbc-portal-apply-mode .hsbc-ind-desc {
  font-size: 11px;
  color: var(--hsbc-text-muted);
  line-height: 1.45;
  margin-top: auto;
}

.hsbc-portal-apply-mode .hsbc-sub-chip-btn {
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.18s ease;
}

.hsbc-portal-apply-mode .hsbc-sub-chip-btn:hover,
.hsbc-portal-apply-mode .hsbc-sub-chip-btn.active {
  background: #1d6ff2;
  color: #ffffff;
  border-color: #1d6ff2;
}

/* 30.10 多币种与跨境资金往来 4-Col 模块 */
.hsbc-portal-apply-mode .hsbc-currency-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hsbc-portal-apply-mode .hsbc-chip-check span {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 9999px;
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  font-size: 12.5px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--hsbc-text-secondary);
  transition: all 0.18s ease;
}

.hsbc-portal-apply-mode .hsbc-chip-check:hover span {
  border-color: rgba(29, 111, 242, 0.4);
  color: #1d6ff2;
}

.hsbc-portal-apply-mode .hsbc-chip-check input:checked + span {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
  box-shadow: 0 2px 8px rgba(29, 111, 242, 0.3);
}

.hsbc-portal-apply-mode .hsbc-trading-countries-block {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: 14px;
  padding: 20px 22px;
}

.hsbc-portal-apply-mode .hsbc-tc-grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.hsbc-portal-apply-mode .hsbc-tc-col-card {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--hsbc-border);
  background: var(--hsbc-bg-card);
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode .hsbc-tc-col-card:focus-within {
  border-color: #1d6ff2;
  box-shadow: 0 0 0 2.5px rgba(29, 111, 242, 0.16);
}

/* 30.11 Step 4 股东董事仪表盘与卡片 */
.hsbc-portal-apply-mode .hsbc-officers-status-bar {
  background: var(--hsbc-bg-subtle);
  border: 1px solid var(--hsbc-border);
  border-radius: 14px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.hsbc-portal-apply-mode .hsbc-officer-card {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  position: relative;
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode .hsbc-officer-card:hover {
  border-color: rgba(29, 111, 242, 0.35);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.hsbc-portal-apply-mode .hsbc-oc-signatory-row {
  background: rgba(29, 111, 242, 0.03);
  border: 1px solid rgba(29, 111, 242, 0.16);
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode .hsbc-oc-signatory-row:hover {
  background: rgba(29, 111, 242, 0.06);
  border-color: rgba(29, 111, 242, 0.3);
}

.hsbc-portal-apply-mode .hsbc-signing-mandate-box {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* 30.12 Step 5 合规材料中心与一键调档大横幅 */
.hsbc-portal-apply-mode .hsbc-dossier-package-card {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 1.5px solid rgba(29, 111, 242, 0.25);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 4px 16px -2px rgba(29, 111, 242, 0.1);
}

.hsbc-portal-apply-mode .hsbc-doc-card {
  background: var(--hsbc-bg-card);
  border: 1px solid var(--hsbc-border-subtle);
  border-radius: 12px;
  padding: 18px;
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode .hsbc-doc-card:hover {
  border-color: rgba(29, 111, 242, 0.3);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.hsbc-portal-apply-mode .hsbc-doc-card {
  padding: 12px 14px;
}

/* 30.13 Step 6 全景审阅与法定电子签名中枢 */
.hsbc-portal-apply-mode .hsbc-review-dossier-bar {
  background: linear-gradient(135deg, rgba(29, 111, 242, 0.08) 0%, rgba(29, 111, 242, 0.02) 100%);
  border: 1px solid rgba(29, 111, 242, 0.2);
  border-radius: 14px;
  padding: 18px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.hsbc-portal-apply-mode .hsbc-rsc-section {
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.hsbc-portal-apply-mode .hsbc-officers-signature-section {
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.hsbc-portal-apply-mode .hsbc-sig-officer-card {
  padding: 18px 22px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode .hsbc-sig-officer-card.is-signed {
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.04);
}

/* 30.14 底部操作栏与 Rule 3 按钮红线严格贯彻 */
.hsbc-portal-apply-mode .hsbc-wizard-nav-footer {
  display: flex;
  align-items: center;
  padding-top: 24px;
  margin-top: 28px;
  border-top: 1px solid var(--hsbc-border-subtle);
}

.hsbc-portal-apply-mode .hsbc-btn-primary,
.hsbc-portal-apply-mode .hsbc-btn-submit,
.hsbc-portal-apply-mode #hsbc-btn-next,
.hsbc-portal-apply-mode #hsbc-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #1d6ff2 !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 111, 242, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.hsbc-portal-apply-mode .hsbc-btn-primary:hover,
.hsbc-portal-apply-mode .hsbc-btn-submit:hover,
.hsbc-portal-apply-mode #hsbc-btn-next:hover,
.hsbc-portal-apply-mode #hsbc-btn-submit:hover {
  background-color: #1558cc !important;
  box-shadow: 0 6px 18px rgba(29, 111, 242, 0.4);
  transform: translateY(-1px);
}

.hsbc-portal-apply-mode .hsbc-btn-primary:active,
.hsbc-portal-apply-mode .hsbc-btn-submit:active,
.hsbc-portal-apply-mode #hsbc-btn-next:active,
.hsbc-portal-apply-mode #hsbc-btn-submit:active {
  background-color: #0e46a8 !important;
  transform: translateY(0);
}

.hsbc-portal-apply-mode .hsbc-btn-secondary,
.hsbc-portal-apply-mode #hsbc-btn-prev,
.hsbc-portal-apply-mode #hsbc-btn-save-draft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hsbc-bg-subtle);
  color: var(--hsbc-text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid var(--hsbc-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsbc-portal-apply-mode .hsbc-btn-secondary:hover,
.hsbc-portal-apply-mode #hsbc-btn-prev:hover,
.hsbc-portal-apply-mode #hsbc-btn-save-draft:hover {
  background: var(--hsbc-bg-card);
  border-color: rgba(29, 111, 242, 0.4);
  color: #1d6ff2;
}

/* 30.15 全套暗黑模式适配 (严格保持实心主按钮 #1d6ff2 背景不变) */
.dark .hsbc-portal-apply-mode,
[data-theme="dark"] .hsbc-portal-apply-mode,
html.dark .hsbc-portal-apply-mode,
body.dark-theme .hsbc-portal-apply-mode {
  --hsbc-bg-canvas: #090f1d;
  --hsbc-bg-card: #0f1a2e;
  --hsbc-bg-subtle: #14223a;
  --hsbc-border: rgba(255, 255, 255, 0.12);
  --hsbc-border-subtle: rgba(255, 255, 255, 0.07);
  --hsbc-text-primary: #f8fafc;
  --hsbc-text-secondary: #cbd5e1;
  --hsbc-text-muted: #8ea4bc;
  background-color: #090f1d;
  background-image: 
    radial-gradient(circle at 10% 8%, rgba(29, 111, 242, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 12%, rgba(219, 0, 17, 0.08) 0%, transparent 35%),
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.dark .hsbc-portal-apply-mode .hsbc-apply-topbar {
  background: rgba(15, 26, 46, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.dark .hsbc-portal-apply-mode .hsbc-stepper-bar {
  background: rgba(15, 26, 46, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.dark .hsbc-portal-apply-mode .hsbc-card-container {
  background: #0f1a2e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

.dark .hsbc-portal-apply-mode .hsbc-step-item.active .hsbc-step-dot {
  background: #1d6ff2 !important;
  color: #ffffff !important;
  border-color: #1d6ff2 !important;
  box-shadow: 0 0 0 4px rgba(29, 111, 242, 0.25), 0 4px 14px rgba(29, 111, 242, 0.5);
}

.dark .hsbc-portal-apply-mode .hsbc-step-item.active .hsbc-step-title {
  color: #38bdf8;
}

.dark .hsbc-portal-apply-mode .hsbc-step-counter {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

.dark .hsbc-portal-apply-mode .hsbc-btn-primary,
.dark .hsbc-portal-apply-mode .hsbc-btn-submit,
.dark .hsbc-portal-apply-mode #hsbc-btn-next,
.dark .hsbc-portal-apply-mode #hsbc-btn-submit {
  background-color: #1d6ff2 !important;
  color: #ffffff !important;
}

.dark .hsbc-portal-apply-mode .hsbc-btn-primary:hover,
.dark .hsbc-portal-apply-mode .hsbc-btn-submit:hover,
.dark .hsbc-portal-apply-mode #hsbc-btn-next:hover,
.dark .hsbc-portal-apply-mode #hsbc-btn-submit:hover {
  background-color: #1558cc !important;
}

/* 30.16 响应式与自适应断点 */
@media (max-width: 992px) {
  .hsbc-portal-apply-mode .hsbc-industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbc-portal-apply-mode .hsbc-tc-grid-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbc-track-selector-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hsbc-portal-apply-mode .hsbc-apply-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .hsbc-portal-apply-mode .hsbc-apply-topbar-left,
  .hsbc-portal-apply-mode .hsbc-apply-topbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .hsbc-portal-apply-mode .hsbc-stepper-bar {
    padding: 14px 16px;
    gap: 6px;
  }
  .hsbc-portal-apply-mode .hsbc-card-container {
    padding: 24px 16px;
    border-radius: 16px;
  }
  .hsbc-portal-apply-mode .hsbc-row-2,
  .hsbc-portal-apply-mode .hsbc-row-3,
  .hsbc-portal-apply-mode .hsbc-row-applicant-names {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hsbc-portal-apply-mode .hsbc-industry-grid {
    grid-template-columns: 1fr;
  }
  .hsbc-portal-apply-mode .hsbc-tc-grid-row {
    grid-template-columns: 1fr;
  }
  .hsbc-portal-apply-mode .hsbc-phone-input-group {
    flex-direction: column;
  }
  .hsbc-portal-apply-mode .hsbc-select-prefix {
    width: 100%;
  }
}