:root {
  --bg-primary: #f8f9fc;
  --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: 'Inter',-apple-system,sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
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:48px 0 24px; }
.logo { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.logo-img {
  height:48px; object-fit:contain;
}
.logo-text {
  font-size:26px; font-weight:800; letter-spacing:-0.5px;
  background:linear-gradient(135deg,#1e293b,#475569);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.header-subtitle { color:var(--text-muted); font-size:14px; font-weight:500; }
.user-info { text-align:center; margin-bottom:20px; }
.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:20px; }
.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:20px; }
.feature-item { text-align:center; padding:12px 4px; }
.feature-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:20px; }
.feature-label { font-size:11px; font-weight:600; color:var(--text-secondary); line-height:1.3; }
.plans-container { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.plan-card {
  position:relative; padding:16px 18px; border:2px solid var(--border-default);
  border-radius:16px; 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:18px; border:none; border-radius:16px;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
  color:white; font-size:17px; font-weight:700; cursor:pointer; transition:all 0.25s;
  box-shadow:0 4px 16px rgba(59,130,246,0.25); margin-bottom:24px;
}
.pay-button:active { transform:scale(0.98); }
.pay-button:disabled { background:#94a3b8; cursor:not-allowed; box-shadow:none; }
.footer { text-align:center; padding:16px 0; 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(248,249,252,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; }
.hidden { display:none !important; }

/* ==================== Dark Mode（跟随系统）==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f0f1a;
    --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 {
    background:linear-gradient(135deg,#f1f5f9,#94a3b8);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .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(15,15,26,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 {
  --bg-primary: #0f0f1a;
  --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 {
  background:linear-gradient(135deg,#f1f5f9,#94a3b8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
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(15,15,26,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: #f8f9fc;
  --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 {
  background:linear-gradient(135deg,#1e293b,#475569);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
html.force-light .loading-overlay { background:rgba(248,249,252,0.9); }
html.force-light .loading-spinner { border-color:rgba(0,0,0,0.08); border-top-color:var(--blue-500); }