:root {
  --bg-primary: #F2F8F6;
  --bg-card: rgba(255,255,255,0.95);
  --bg-card-selected: rgba(245,158,11,0.08);
  --border-default: rgba(0,0,0,0.08);
  --border-selected: rgba(245,158,11,0.5);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --red-500: #ef4444;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.022em;
}
body::before {
  content:''; position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(ellipse at 30% 20%,rgba(245,158,11,0.05) 0%,transparent 50%),
              radial-gradient(ellipse at 70% 80%,rgba(59,130,246,0.04) 0%,transparent 50%);
  pointer-events:none; z-index:0;
}
#app { position:relative; z-index:1; max-width:480px; margin:0 auto; padding:0 20px 40px; }
.header { text-align:center; padding:32px 0 12px; }
.logo { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px; }
.logo-icon {
  height:72px; object-fit:contain;
}
.logo-text {
  font-size:30px; font-weight:800; letter-spacing:-0.5px;
  color:#1e293b;
}
.header-subtitle { color:var(--text-muted); font-size:14px; font-weight:500; }
.user-info { text-align:center; margin-bottom:12px; }
.user-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:100px; padding:8px 16px; font-size:13px; color:var(--text-secondary);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.tier-tabs { display:flex; gap:8px; margin-bottom:12px; }
.tier-tab {
  flex:1; padding:14px; border:2px solid var(--border-default); border-radius:16px;
  background:var(--bg-card); color:var(--text-secondary); font-size:15px; font-weight:700;
  cursor:pointer; transition:all 0.25s; display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.tier-tab:active { transform:scale(0.97); }
.tier-tab.active[data-tier="Silver"] {
  background:linear-gradient(135deg,rgba(148,163,184,0.12),rgba(100,116,139,0.08));
  border-color:rgba(100,116,139,0.4); color:#475569;
  box-shadow:0 2px 8px rgba(100,116,139,0.12);
}
.tier-tab.active[data-tier="Gold"] {
  background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(217,119,6,0.06));
  border-color:rgba(245,158,11,0.5); color:var(--amber-600);
  box-shadow:0 2px 8px rgba(245,158,11,0.12);
}
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.feature-item { text-align:center; padding:8px 4px; }
.feature-icon {
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 6px;
}
.feature-icon svg { width:24px; height:24px; }
.feature-label { font-size:11px; font-weight:700; color:var(--text-secondary); line-height:1.3; }
/* badge 圆形背景色 */
.feature-icon.bg-blue { background:rgba(59,130,246,0.1); color:#3b82f6; }
.feature-icon.bg-orange { background:rgba(249,115,22,0.1); color:#f97316; }
.feature-icon.bg-indigo { background:rgba(99,102,241,0.1); color:#6366f1; }
.feature-icon.bg-emerald { background:rgba(16,185,129,0.1); color:#10b981; }
html.force-dark .feature-icon.bg-blue { background:rgba(59,130,246,0.2); }
html.force-dark .feature-icon.bg-orange { background:rgba(249,115,22,0.2); }
html.force-dark .feature-icon.bg-indigo { background:rgba(99,102,241,0.2); }
html.force-dark .feature-icon.bg-emerald { background:rgba(16,185,129,0.2); }
@media (prefers-color-scheme: dark) {
  .feature-icon.bg-blue { background:rgba(59,130,246,0.2); }
  .feature-icon.bg-orange { background:rgba(249,115,22,0.2); }
  .feature-icon.bg-indigo { background:rgba(99,102,241,0.2); }
  .feature-icon.bg-emerald { background:rgba(16,185,129,0.2); }
}
/* 货币切换 Tab */
.currency-tabs { display:flex; gap:8px; margin-bottom:12px; }
.currency-tab {
  flex:1; padding:10px 8px; border:2px solid var(--border-default); border-radius:12px;
  background:var(--bg-card); color:var(--text-secondary); font-size:14px; font-weight:600;
  cursor:pointer; transition:all 0.25s;
  display:flex; align-items:flex-start; gap:4px;
}
.tab-prefix { flex-shrink:0; white-space:nowrap; }
.tab-methods { text-align:left; line-height:1.4; }
.currency-tab:active { transform:scale(0.97); }
.currency-tab.active[data-currency="cny"] {
  background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(5,150,105,0.06));
  border-color:rgba(16,185,129,0.5); color:#059669;
  box-shadow:0 2px 6px rgba(16,185,129,0.12);
}
.currency-tab.active[data-currency="usd"] {
  background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(37,99,235,0.06));
  border-color:rgba(59,130,246,0.5); color:#2563eb;
  box-shadow:0 2px 6px rgba(59,130,246,0.12);
}
.plans-container { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.plan-card {
  position:relative; padding:12px 16px; border:2px solid var(--border-default);
  border-radius:14px; background:var(--bg-card); cursor:pointer; transition:all 0.25s;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.plan-card:active { transform:scale(0.98); }
.plan-card.selected {
  border-color:var(--border-selected); background:var(--bg-card-selected);
  box-shadow:0 4px 16px rgba(245,158,11,0.1);
}
.plan-duration { font-size:18px; font-weight:700; }
.plan-daily { font-size:12px; color:var(--text-muted); font-weight:500; }
.plan-right { display:flex; align-items:center; gap:12px; }
.plan-price { font-size:28px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); }
.plan-card.selected .plan-price { color:var(--amber-600); }
.plan-check { width:24px; height:24px; border-radius:50%; border:2px solid #cbd5e1; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; }
.plan-card.selected .plan-check { background:var(--blue-500); border-color:var(--blue-500); }
.plan-check-icon { display:none; color:white; font-size:14px; font-weight:700; }
.plan-card.selected .plan-check-icon { display:block; }
.plan-badge { position:absolute; top:-10px; left:16px; background:linear-gradient(135deg,var(--amber-500),var(--amber-600)); color:white; font-size:10px; font-weight:700; padding:3px 10px; border-radius:100px; box-shadow:0 2px 8px rgba(245,158,11,0.25); }
.plan-discount { position:absolute; top:0; right:0; width:56px; height:56px; overflow:hidden; border-radius:0 14px 0 0; }
.plan-discount-inner { position:absolute; top:6px; right:-12px; width:64px; text-align:center; font-size:9px; font-weight:700; padding:2px 0; transform:rotate(35deg); background:var(--red-500); color:white; }
.pay-button {
  width:100%; padding:16px 24px; border:none; border-radius:980px;
  background:#0071E3;
  color:white; font-size:17px; font-weight:600; letter-spacing:-0.01em; cursor:pointer;
  transition: background-color 0.2s, transform 0.2s;
  margin-top:24px; margin-bottom:24px;
}
.pay-button:hover { background:#0077ED; transform:scale(1.01); }
.pay-btn-main { font-size:17px; font-weight:800; letter-spacing:0.3px; }
.pay-btn-sub { font-size:12px; font-weight:500; opacity:0.85; margin-top:2px; }
.pay-button:active { transform:scale(0.98); }
.pay-button:disabled { background:#94a3b8; cursor:not-allowed; box-shadow:none; }
.footer { text-align:center; padding:64px 0 200px; color:var(--text-muted); font-size:12px; line-height:2; }
.footer-links a { color:var(--text-muted); text-decoration:underline; }
.footer-company { margin-top:8px; font-size:11px; color:rgba(148,163,184,0.8); }
.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:rgba(239,68,68,0.95); color:white; padding:12px 24px; border-radius:12px; font-size:14px; font-weight:600; z-index:1000; animation:toast-in 0.3s ease; box-shadow:0 4px 12px rgba(239,68,68,0.3); }
@keyframes toast-in { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.loading-overlay { position:fixed; inset:0; background:rgba(242,248,246,0.9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:999; color:var(--text-primary); font-size:15px; font-weight:600; }
.loading-spinner { width:40px; height:40px; border:3px solid rgba(0,0,0,0.08); border-top-color:var(--blue-500); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.result-page { position:fixed; inset:0; background:var(--bg-primary); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; z-index:100; }
.result-icon { font-size:64px; margin-bottom:24px; }
.result-page h1 { font-size:24px; font-weight:700; margin-bottom:12px; color:var(--text-primary); }
.result-message { color:var(--text-secondary); font-size:15px; text-align:center; line-height:1.6; }
.result-hint { color:var(--text-muted); font-size:13px; margin-top:8px; }
.retry-button { margin-top:32px; padding:14px 40px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--blue-500),var(--blue-600)); color:white; font-size:15px; font-weight:700; cursor:pointer; }
/* 测试卡号提示条 */
.test-card-hint {
  background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(217,119,6,0.06));
  border:1px solid rgba(245,158,11,0.3); border-radius:10px;
  padding:8px 12px; margin-bottom:12px; font-size:12px; font-weight:600;
  color:var(--amber-600); text-align:center; letter-spacing:0.5px;
}
/* PayPal 独立按钮 */
.paypal-btn-wrapper { margin-top:20px; }
.paypal-divider { display:flex; align-items:center; gap:12px; margin:20px 0; }
.paypal-divider-line { flex:1; height:1px; background:var(--border, #e2e8f0); }
.paypal-divider-text { font-size:13px; color:var(--text-secondary, #94a3b8); white-space:nowrap; }
/* Apple Pay 独立按钮 */
.apple-pay-section { margin-top:4px; margin-bottom:16px; }
.paypal-standalone-btn {
  width:100%; padding:14px; border:2px solid #0070ba; border-radius:12px;
  background:linear-gradient(135deg,#0070ba,#003087); color:white;
  font-size:15px; font-weight:700; cursor:pointer; transition:all 0.25s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.paypal-standalone-btn:hover { opacity:0.9; transform:scale(0.99); }
.paypal-standalone-btn:active { transform:scale(0.97); }
.paypal-standalone-btn svg { width:20px; height:20px; fill:white; }
.hidden { display:none !important; }

/* ==================== Dark Mode（跟随系统）==================== */
@media (prefers-color-scheme: dark) {
  .logo-text { color:#f1f5f9; }
  :root {
    --bg-primary: #0B1121;
    --bg-card: rgba(255,255,255,0.06);
    --bg-card-selected: rgba(245,158,11,0.12);
    --border-default: rgba(255,255,255,0.08);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
  }
  body::before {
    background: radial-gradient(ellipse at 30% 20%,rgba(245,158,11,0.08) 0%,transparent 50%),
                radial-gradient(ellipse at 70% 80%,rgba(59,130,246,0.06) 0%,transparent 50%);
  }
  .logo-text { color:#f1f5f9; }
  .tier-tab.active[data-tier="Silver"] {
    background:linear-gradient(135deg,rgba(148,163,184,0.2),rgba(100,116,139,0.15));
    border-color:rgba(148,163,184,0.5); color:#cbd5e1;
    box-shadow:0 4px 16px rgba(148,163,184,0.15);
  }
  .tier-tab.active[data-tier="Gold"] {
    background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(217,119,6,0.15));
    border-color:rgba(245,158,11,0.5); color:var(--amber-500);
    box-shadow:0 4px 16px rgba(245,158,11,0.15);
  }
  .plan-card { box-shadow:none; }
  .plan-card.selected { box-shadow:0 4px 20px rgba(245,158,11,0.1); }
  .plan-price { color:var(--text-primary); }
  .plan-card.selected .plan-price { color:var(--amber-500); }
  .plan-check { border-color:var(--text-muted); }
  .pay-button { box-shadow:0 6px 24px rgba(59,130,246,0.3); }
  .pay-button:disabled { background:#4b5563; }
  .footer-company { color:rgba(100,116,139,0.6); }
  .toast { background:rgba(239,68,68,0.9); box-shadow:none; }
  .loading-overlay { background:rgba(11,17,33,0.85); }
  .loading-spinner { border-color:rgba(255,255,255,0.1); border-top-color:var(--amber-500); }
}

/* ==================== 强制主题（URL ?theme=dark|light）==================== */
/* force-dark：无论系统设置，强制 dark */
html.force-dark .logo-text { color:#f1f5f9; }
html.force-dark {
  --bg-primary: #0B1121;
  --bg-card: rgba(255,255,255,0.06);
  --bg-card-selected: rgba(245,158,11,0.12);
  --border-default: rgba(255,255,255,0.08);
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
}
html.force-dark body::before {
  background: radial-gradient(ellipse at 30% 20%,rgba(245,158,11,0.08) 0%,transparent 50%),
              radial-gradient(ellipse at 70% 80%,rgba(59,130,246,0.06) 0%,transparent 50%);
}
html.force-dark .logo-text { color:#f1f5f9; }
html.force-dark .tier-tab.active[data-tier="Silver"] {
  background:linear-gradient(135deg,rgba(148,163,184,0.2),rgba(100,116,139,0.15));
  border-color:rgba(148,163,184,0.5); color:#cbd5e1;
}
html.force-dark .tier-tab.active[data-tier="Gold"] {
  background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(217,119,6,0.15));
  border-color:rgba(245,158,11,0.5); color:var(--amber-500);
}
html.force-dark .plan-card { box-shadow:none; }
html.force-dark .plan-card.selected .plan-price { color:var(--amber-500); }
html.force-dark .plan-check { border-color:var(--text-muted); }
html.force-dark .pay-button:disabled { background:#4b5563; }
html.force-dark .loading-overlay { background:rgba(11,17,33,0.85); }
html.force-dark .loading-spinner { border-color:rgba(255,255,255,0.1); border-top-color:var(--amber-500); }

/* force-light：无论系统设置，强制 light（覆盖 dark media query） */
html.force-light {
  --bg-primary: #F2F8F6;
  --bg-card: rgba(255,255,255,0.95);
  --bg-card-selected: rgba(245,158,11,0.08);
  --border-default: rgba(0,0,0,0.08);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
}
html.force-light .logo-text { color:#1e293b; }
html.force-light .loading-overlay { background:rgba(242,248,246,0.9); }
html.force-light .loading-spinner { border-color:rgba(0,0,0,0.08); border-top-color:var(--blue-500); }

/* ==================== 倒计时动画（支付成功页） ==================== */
.countdown-container { text-align:center; margin-top:24px; }
.countdown-circle { position:relative; width:60px; height:60px; margin:0 auto 8px; }
.countdown-svg { width:60px; height:60px; transform:rotate(-90deg); }
.countdown-bg { fill:none; stroke:var(--border-default); stroke-width:3; }
.countdown-progress {
  fill:none; stroke:var(--blue-500); stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:163.36; /* 2 * PI * 26 */
  stroke-dashoffset:0;
  animation:countdown-ring 3s linear forwards;
}
@keyframes countdown-ring {
  from { stroke-dashoffset:0; }
  to { stroke-dashoffset:163.36; }
}
.countdown-number {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:22px; font-weight:800; color:var(--text-primary);
}
.countdown-label { font-size:13px; color:var(--text-muted); font-weight:500; }

/* ==================== Payment Element（嵌入式支付表单） ==================== */
.payment-section { margin-bottom:64px; }
.payment-header { margin-bottom:20px; }
.back-btn {
  background:none; border:none; color:var(--blue-500); font-size:15px; font-weight:600;
  cursor:pointer; padding:8px 0; display:flex; align-items:center; gap:4px;
}
.back-btn:active { opacity:0.7; }
.payment-summary {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:12px; padding:14px 18px; margin-top:12px;
  font-size:15px; font-weight:600;
}
.summary-tier { display:flex; align-items:center; gap:6px; }
.summary-detail { color:var(--amber-600); font-weight:700; }
.payment-element-container {
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:16px; padding:20px; margin-bottom:16px;
  min-height:120px;
}
.payment-message {
  color:var(--red-500); font-size:14px; font-weight:600;
  text-align:center; margin-bottom:12px; padding:10px;
  background:rgba(239,68,68,0.08); border-radius:10px;
}
.submit-button {
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-spinner {
  width:20px; height:20px; border:2px solid rgba(255,255,255,0.3);
  border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite;
}

/* Dark mode 覆盖 — Payment Element 外层容器 */
html.force-dark .payment-element-container,
html.force-dark .payment-summary { border-color:rgba(255,255,255,0.1); }
html.force-dark .summary-detail { color:var(--amber-500); }
html.force-dark .payment-message { background:rgba(239,68,68,0.15); }
@media (prefers-color-scheme: dark) {
  .payment-element-container, .payment-summary { border-color:rgba(255,255,255,0.1); }
  .summary-detail { color:var(--amber-500); }
  .payment-message { background:rgba(239,68,68,0.15); }
}


/* ==================== 网页登录购买 ==================== */
#app.login-mode #tier-tabs,
#app.login-mode #features,
#app.login-mode #plans,
#app.login-mode #currency-tabs,
#app.login-mode #pay-btn,
#app.login-mode #payment-section { display: none !important; }

.web-login {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 18px;
  padding: 28px 22px;
  margin: 18px 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.wl-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 6px;
}
.wl-sub {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin: 0 0 20px;
}
.wl-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s;
}
.wl-input:focus { border-color: #3b82f6; }
.wl-input::placeholder { color: var(--text-muted); }
.wl-error {
  color: #ef4444;
  font-size: 13px;
  text-align: center;
  margin: 2px 0 12px;
  line-height: 1.5;
}
.web-login .pay-button { margin-top: 6px; }

/* ==================== Light Mode 强制覆盖(对抗系统 prefers-color-scheme:dark) ==================== */
html.force-light {
  --bg-primary: #F2F8F6;
  --bg-card: rgba(255,255,255,0.95);
  --bg-card-selected: rgba(245,158,11,0.08);
  --border-default: rgba(0,0,0,0.08);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
}
html.force-light .logo-text { color:#1e293b; }

/* ==================== 右上角语言/主题切换 ==================== */
.pay-toggles {
  position: fixed; top: 16px; right: 16px; z-index: 100;
  display: flex; gap: 10px;
}
.pay-toggles .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: transform 0.2s, background 0.2s;
}
.pay-toggles .icon-btn:hover { transform: scale(1.05); }
.pay-toggles .icon-btn svg { width: 18px; height: 18px; }
.pay-toggles .icon-btn .icon-sun { display: block; }
.pay-toggles .icon-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not(.force-light) .pay-toggles .icon-btn .icon-sun { display: none; }
  html:not(.force-light) .pay-toggles .icon-btn .icon-moon { display: block; }
}
html.force-dark .pay-toggles .icon-btn .icon-sun { display: none; }
html.force-dark .pay-toggles .icon-btn .icon-moon { display: block; }

/* ============================================
   Dual logo swap — pay page (uses html.force-dark/light, not data-theme)
   ============================================ */
.logo-icon-dark { display: none; }
.logo-icon-light { display: inline-block; }
@media (prefers-color-scheme: dark) {
  html:not(.force-light) .logo-icon-light { display: none; }
  html:not(.force-light) .logo-icon-dark { display: inline-block; }
}
html.force-dark .logo-icon-light { display: none; }
html.force-dark .logo-icon-dark { display: inline-block; }
html.force-light .logo-icon-light { display: inline-block; }
html.force-light .logo-icon-dark { display: none; }

/* ============================================
   Hub 入口（PC/Mac/iOS 纯 web 直访）— Manus 风格：极简卡片，单 icon + 单标题
   ============================================ */
.web-hub {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 20px 20px 40px;
  text-align: center;
}
.wh-welcome {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main, #1d1d1f);
  margin: 32px 0 10px;
}
.wh-sub {
  font-size: 14px;
  color: var(--text-muted, #6e6e73);
  margin: 0 0 32px;
}

.hub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  margin-top: 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hub-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,113,227,0.10);
  border-color: rgba(0,113,227,0.35);
}
.hub-btn-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-main, #1d1d1f); }
.hub-btn-title { font-size: 15.5px; font-weight: 500; color: var(--text-main, #1d1d1f); }

.hub-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  color: var(--text-muted, #6e6e73);
  font-size: 12px;
}
.hub-divider::before, .hub-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, rgba(0,0,0,0.10));
}

.hub-foot {
  margin: 28px 0 0;
  font-size: 12px;
  color: var(--text-muted, #6e6e73);
  line-height: 1.6;
}

html.force-dark .hub-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); box-shadow: none; }
html.force-dark .hub-btn-icon, html.force-dark .hub-btn-title, html.force-dark .wh-welcome { color: #f1f5f9; }
@media (prefers-color-scheme: dark) {
  html:not(.force-light) .hub-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); box-shadow: none; }
  html:not(.force-light) .hub-btn-icon,
  html:not(.force-light) .hub-btn-title,
  html:not(.force-light) .wh-welcome { color: #f1f5f9; }
}

.hub-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  padding: 6px 10px 6px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #6e6e73);
  font-size: 14px;
  font: inherit;
}
.hub-back-btn:hover { color: var(--text-main, #1d1d1f); }
html.force-dark .hub-back-btn:hover { color: #f1f5f9; }