/* ═══════════ VisaPass 统一导航栏样式 v4.1.0 ═══════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:64px;
  background:rgba(10,22,40,0.95);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px
}
.navbar .brand{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:700;color:#60A5FA;text-decoration:none;flex-shrink:0
}
.navbar .brand img{width:28px;height:28px;border-radius:6px;object-fit:contain}
.navbar .nav-links{
  display:flex;align-items:center;gap:2px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-shrink:1;min-width:0
}
.navbar .nav-links::-webkit-scrollbar{display:none}
.navbar .nav-links a{
  text-decoration:none;color:#94A3B8;font-size:13px;
  padding:6px 10px;border-radius:6px;white-space:nowrap;flex-shrink:0;transition:.15s
}
.navbar .nav-links a:hover{color:#fff;background:rgba(255,255,255,0.05)}
.navbar .nav-links a.active{color:#60A5FA;background:rgba(96,165,250,0.08)}
.navbar .nav-links a.cta{
  background:linear-gradient(135deg,#3B82F6,#6366F1)!important;color:#fff!important;font-weight:600
}

.auth-area{display:flex;align-items:center;flex-shrink:0}
.btn-login,.btn-user{
  font-weight:600;cursor:pointer;border:none;font-size:13px;
  padding:6px 14px;border-radius:8px;background:#3B82F6;color:#fff;white-space:nowrap
}
.btn-user-wrap{position:relative}
.dropdown{
  display:none;position:absolute;top:100%;right:0;margin-top:6px;
  background:#1E293B;border:1px solid rgba(255,255,255,0.06);border-radius:10px;
  min-width:130px;box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:999;overflow:hidden
}
.dropdown a{
  display:block!important;padding:10px 16px!important;
  color:#CBD5E1!important;text-decoration:none;font-size:13px;border-radius:0!important
}
.dropdown a:hover{background:rgba(255,255,255,0.06)!important}

@media(max-width:1100px){.navbar .brand span.company{display:none}}
@media(max-width:900px){.nav-link-desktop{display:none}}

/* ═══════════ 页脚 ═══════════ */
#vp-footer{border-top:1px solid rgba(255,255,255,0.06);padding:28px 20px;text-align:center}
#vp-footer .links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
#vp-footer .links a{color:#94A3B8;text-decoration:none;font-size:12px}
#vp-footer .copy{font-size:13px;color:#94A3B8}
#vp-footer .icp{font-size:11px;color:#64748B;padding:8px 0}

/* ═══════════ 弹窗（登录/注册） ═══════════ */
.vp-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.6);z-index:999;
  display:flex;align-items:center;justify-content:center
}
.vp-dlg{
  background:linear-gradient(160deg,#0F1A30,#132240);
  border:1px solid rgba(255,255,255,0.06);border-radius:16px;
  padding:28px 24px;max-width:440px;width:90%;
  color:#fff;box-shadow:0 20px 60px rgba(0,0,0,0.4)
}
.vp-dlg h3{font-size:18px;margin-bottom:16px;color:#F1F5F9}
.vp-fld{margin:12px 0}
.vp-fld label{display:block;font-size:12px;color:#64748B;margin-bottom:4px}
.vp-fld input{
  width:100%;padding:10px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.04);color:#fff;font-size:14px;outline:none
}
.vp-fld input:focus{border-color:#3B82F6}
.vp-btns{display:flex;gap:8px;margin-top:18px}
.vp-btns button{flex:1;padding:12px;border-radius:10px;border:none;font-weight:600;font-size:15px;cursor:pointer}
.vp-btn-primary{background:linear-gradient(135deg,#3B82F6,#6366F1);color:#fff}
.vp-btn-cancel{background:rgba(255,255,255,0.06);color:#94A3B8}

/* ═══════════ Assess 页面 ═══════════ */
:root{--bg:#0A1628;--tx:#94A3B8;--ac:#3B82F6;--or:#F97316;--g:#10B981;--r:#F87171;--bor:rgba(255,255,255,0.06)}
body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  background:linear-gradient(160deg,var(--bg) 0%,#132240 40%,var(--bg) 100%);
  min-height:100vh;color:#fff;padding-top:80px;margin:0
}
.wrap{max-width:800px;margin:0 auto;padding:20px}
*{box-sizing:border-box}

.card{
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;padding:32px;margin-bottom:24px
}
.card h2{font-size:22px;font-weight:700;margin-bottom:8px;color:#E2E8F0}
.hint{font-size:14px;color:var(--tx);margin-bottom:20px;line-height:1.6}

.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.sel{
  padding:16px 14px;border-radius:12px;border:1px solid var(--bor);cursor:pointer;
  transition:.15s;text-align:center;background:rgba(255,255,255,0.01)
}
.sel:hover{border-color:var(--ac);background:rgba(59,130,246,0.05)}
.sel.picked{border-color:var(--ac);background:rgba(59,130,246,0.1)}
.sel .n{font-size:14px;font-weight:600;color:#CBD5E1;display:block;margin-bottom:4px}
.sel .m{font-size:12px;color:var(--tx)}

.actions{display:flex;gap:12px;margin-top:24px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:14px 32px;
  border-radius:14px;border:none;font-size:16px;font-weight:700;cursor:pointer;
  text-decoration:none;color:#fff;transition:.15s
}
.btn:disabled{opacity:0.35;cursor:not-allowed}
.btn-p{background:linear-gradient(135deg,var(--ac),#6366F1)}
.btn-o{background:rgba(255,255,255,0.04);border:1px solid var(--bor);color:var(--tx)}
.btn-lg{font-size:17px;padding:14px 40px}
.btn:hover:not(:disabled){opacity:0.92;transform:translateY(-1px)}

.back-row{margin-bottom:16px}
.back-link{color:var(--ac);cursor:pointer;font-size:14px}

.dim-block{margin-top:16px}
.dim-block h3{font-size:15px;font-weight:600;color:#CBD5E1;margin-bottom:8px}
.radio-row{display:flex;flex-wrap:wrap;gap:8px}
.radio-btn{
  padding:8px 16px;border-radius:10px;border:1px solid var(--bor);
  color:var(--tx);font-size:13px;cursor:pointer;transition:.15s;
  background:rgba(255,255,255,0.02)
}
.radio-btn:hover{border-color:var(--ac);color:#fff}
.radio-btn.picked{border-color:var(--ac);background:rgba(59,130,246,0.12);color:#fff}

.progress{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px}
.progress .dot{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;border:2px solid rgba(255,255,255,0.08);color:var(--tx)
}
.progress .dot.active{border-color:var(--ac);color:var(--ac);background:rgba(59,130,246,0.1)}
.progress .dot.done{border-color:var(--g);color:var(--g);background:rgba(16,185,129,0.1)}
.progress .line{width:48px;height:2px;background:rgba(255,255,255,0.06)}
.progress .line.done{background:var(--g)}

.note{font-size:13px;color:var(--tx);margin-top:8px}

/* 评估结果 */
.score-circle{
  width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;margin:0 auto 16px;
  background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(99,102,241,0.1));
  border:3px solid var(--ac)
}
.score-circle .num{font-size:40px;font-weight:800;color:#fff}
.score-circle .txt{font-size:13px;color:var(--tx)}
.risk-bar{display:flex;gap:8px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.risk-item{
  padding:6px 16px;border-radius:10px;font-size:13px;font-weight:600
}
.risk-high{background:rgba(248,113,113,0.12);color:#F87171}
.risk-medium{background:rgba(251,191,36,0.12);color:#FBBF24}
.risk-low{background:rgba(16,185,129,0.1);color:#10B981}

/* 付费卡片 */
.tier-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:16px 0}
.tier-card{
  padding:24px;border-radius:16px;border:1px solid var(--bor);
  background:rgba(255,255,255,0.02);cursor:pointer;transition:.15s;text-align:center
}
.tier-card:hover{border-color:var(--ac);transform:translateY(-2px)}
.tier-card .tier-badge{
  display:inline-block;padding:4px 14px;border-radius:12px;font-size:12px;font-weight:700;margin-bottom:12px
}
.tier-card .tier-price{font-size:28px;font-weight:800;margin:8px 0 4px}
.tier-card .tier-name{font-size:15px;font-weight:600;color:#CBD5E1}
.tier-card .tier-desc{font-size:12px;color:var(--tx);margin-top:6px}

/* Toast */
#toast{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  padding:14px 32px;border-radius:12px;background:rgba(0,0,0,0.92);
  font-size:15px;z-index:9999;font-weight:600;transition:all .3s
}

/* Modal (发送邮件等) */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.6);z-index:999;
  display:flex;align-items:center;justify-content:center
}
.modal-dlg{
  background:linear-gradient(160deg,#0F1A30,#132240);
  border:1px solid var(--bor);border-radius:16px;
  padding:28px 24px;max-width:440px;width:90%;color:#fff
}
.modal-dlg h3{font-size:18px;margin-bottom:16px;color:#F1F5F9}
.modal-dlg .field{margin:12px 0}
.modal-dlg .field label{display:block;font-size:12px;color:#64748B;margin-bottom:4px}
.modal-dlg .field input{
  width:100%;padding:10px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.04);color:#fff;font-size:14px;outline:none
}
.modal-dlg .field input:focus{border-color:var(--ac)}
.modal-dlg .btn-row{display:flex;gap:8px;margin-top:18px}
.modal-dlg .btn-row button{flex:1;padding:12px;border-radius:10px;border:none;font-weight:600;font-size:15px;cursor:pointer}
.btn-send{background:linear-gradient(135deg,var(--ac),#6366F1);color:#fff}
.btn-cancel{background:rgba(255,255,255,0.06);color:var(--tx)}

/* ═══════════ 微信支付二维码弹窗 ═══════════ */
.pay-modal{
  background:linear-gradient(160deg,#0F1A30,#132240);
  border:1px solid rgba(255,255,255,0.08);border-radius:20px;
  padding:32px 28px;max-width:380px;width:90%;text-align:center;color:#fff
}
.pay-modal h3{font-size:20px;margin-bottom:4px;color:#F1F5F9}
.qr-wrap{
  display:inline-block;padding:16px;background:#fff;border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3)
}
.qr-wrap img{display:block}
.pay-btns{display:flex;gap:10px;margin-top:20px;justify-content:center}
.pay-btn-check{
  flex:1;padding:12px 20px;border-radius:10px;border:none;
  background:linear-gradient(135deg,#10B981,#059669);color:#fff;
  font-size:14px;font-weight:600;cursor:pointer
}
.pay-btn-close{
  flex:1;padding:12px 20px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);color:#94A3B8;
  font-size:14px;font-weight:600;cursor:pointer
}

/* ═══════════ 评估结果页 v4.1.0 ═══════════ */
.result-hero {
  position: relative;
  overflow: hidden;
}
.result-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
}

.result-score-circle {
  box-shadow: 0 0 40px rgba(59,130,246,0.08);
}

.risk-stats-bar .stat-chip {
  transition: transform .2s;
}
.risk-stats-bar .stat-chip:hover {
  transform: translateY(-2px);
}

.risk-card-new:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.collapse-trigger:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Loading spinner */
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(59,130,246,0.2);
  border-top-color: #3B82F6;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button pulse */
.btn-pulse {
  transition: all .2s;
}
.btn-pulse:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.btn-pulse:active {
  transform: scale(0.98);
}

/* ═══════════ Paywall / 付费方案卡片 v4.1.0 ═══════════ */
.pw-section {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 32px;
}
.pw-section-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.pw-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.15), transparent);
}
.pw-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pw-section-sub {
  text-align: center;
  font-size: 13px;
  color: #64748B;
  margin-bottom: 24px;
}

/* Alert banner */
.pw-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.pw-alert-danger {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.12);
}
.pw-alert-warn {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.12);
}
.pw-alert-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.pw-alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pw-alert-body strong {
  font-size: 13px;
}
.pw-alert-danger .pw-alert-body strong { color: #F87171; }
.pw-alert-warn .pw-alert-body strong { color: #FBBF24; }
.pw-alert-body span {
  font-size: 12px;
  color: #94A3B8;
}

/* ═══ Tier Cards Grid ═══ */
.pw-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Individual tier card */
.pw-tier {
  position: relative;
  border-radius: 20px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  transition: all .3s ease;
}
.pw-tier:hover {
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.pw-tier-inner {
  padding: 28px 24px 24px;
}

/* Featured tier (L2 recommended) */
.pw-tier-featured {
  border-color: rgba(59,130,246,0.2);
  background: linear-gradient(180deg, rgba(59,130,246,0.04), rgba(255,255,255,0.01));
}
.pw-tier-featured:hover {
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(59,130,246,0.08);
}

/* Danger tier (L3) */
.pw-tier-danger {
  border-color: rgba(239,68,68,0.12);
  background: linear-gradient(180deg, rgba(239,68,68,0.03), rgba(255,255,255,0.01));
}

/* Ribbon */
.pw-tier-ribbon {
  position: absolute;
  top: 16px;
  right: -32px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 36px;
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  color: #fff;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
.pw-ribbon-danger {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

/* Tier icon */
.pw-tier-icon {
  font-size: 32px;
  margin-bottom: 12px;
  line-height: 1;
}

/* Tier name */
.pw-tier-name {
  font-size: 19px;
  font-weight: 700;
  color: #F1F5F9;
  margin-bottom: 4px;
}
.pw-tier-desc {
  font-size: 13px;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 16px;
  min-height: 36px;
}

/* Price */
.pw-tier-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 8px;
}
.pw-tier-currency {
  font-size: 18px;
  font-weight: 700;
  color: #60A5FA;
}
.pw-tier-amount {
  font-size: 42px;
  font-weight: 900;
  color: #60A5FA;
  line-height: 1;
  letter-spacing: -1px;
}
.pw-tier-unit {
  font-size: 13px;
  color: #64748B;
  margin-left: 2px;
}
.pw-tier-featured .pw-tier-amount { color: #60A5FA; }
.pw-tier-danger .pw-tier-amount { color: #F87171; }

.pw-tier-save {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(16,185,129,0.1);
  color: #10B981;
  margin-bottom: 14px;
}

/* Feature list */
.pw-tier-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.pw-tier-features li {
  font-size: 13px;
  color: #94A3B8;
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.pw-check {
  font-size: 11px;
  font-weight: 700;
  color: #10B981;
  flex-shrink: 0;
}
.pw-check-danger { color: #F87171; }

/* CTA Buttons */
.pw-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
  letter-spacing: 0.3px;
}
.pw-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.pw-btn:active {
  transform: scale(0.98);
}
.pw-btn-primary {
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  color: #fff;
  box-shadow: 0 4px 16px rgba(59,130,246,0.2);
}
.pw-btn-primary:hover {
  box-shadow: 0 8px 28px rgba(59,130,246,0.35);
}
.pw-btn-danger {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
  box-shadow: 0 4px 16px rgba(239,68,68,0.2);
}
.pw-btn-outline {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94A3B8;
}
.pw-btn-outline:hover {
  background: rgba(255,255,255,0.05);
  color: #CBD5E1;
  border-color: rgba(255,255,255,0.15);
}
.pw-btn-arrow {
  font-size: 16px;
  transition: transform .2s;
}
.pw-btn:hover .pw-btn-arrow {
  transform: translateX(3px);
}

/* Tier note */
.pw-tier-note {
  text-align: center;
  font-size: 11px;
  color: #475569;
  margin-top: 12px;
}
.pw-tier-note strong {
  color: #60A5FA;
  font-weight: 600;
}

/* Guarantee bar */
.pw-guarantee {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.03);
}
.pw-guarantee-item {
  font-size: 12px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pw-guarantee-item span {
  font-size: 14px;
}

/* ═══ Responsive ═══ */
@media (max-width: 640px) {
  .pw-tiers {
    grid-template-columns: 1fr;
  }
  .pw-tier-inner {
    padding: 24px 20px 20px;
  }
  .pw-tier-amount {
    font-size: 36px;
  }
  .pw-tier-ribbon {
    right: -36px;
    font-size: 9px;
  }
  .pw-guarantee {
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }
}