.vip-page { min-height:100vh; background:#f8fafc; color:#0f172a; }
.vip-hero { padding:56px 0; background:linear-gradient(135deg,#0d7ec0 0%,#168fd4 50%,#1ba0e8 100%); color:#fff; border-radius:12px; text-align:center; }
.vip-hero h1 { margin:0 0 8px; font-size:32px; font-weight:700; letter-spacing:-.5px; }
.vip-hero p { max-width:560px; margin:0 auto; color:rgba(255,255,255,.8); font-size:14px; line-height:1.5; }

.vip-body { padding:24px 0 48px; }
.vip-body .body-container { max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:flex-start; }

.plans-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.plan-card { position:relative; background:#fff; border:1px solid #E2E8F0; border-radius:16px; padding:24px; cursor:pointer; transition:all .25s ease; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04); }
.plan-card:hover { border-color:#2563eb; transform:translateY(-3px); box-shadow:0 8px 32px rgba(37,99,235,.35); }
.plan-card.active { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25),0 8px 32px rgba(37,99,235,.35); }
.plan-card.best { border:2px solid transparent; background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#3b82f6,#2563eb); background-origin:border-box; background-clip:padding-box,border-box; box-shadow:0 4px 20px rgba(37,99,235,.25); }
.best-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:0 0 12px 12px; white-space:nowrap; box-shadow:0 4px 20px rgba(37,99,235,.25); }
.plan-top { margin-bottom:16px; }
.plan-top .plan-name { font-size:18px; font-weight:700; color:#0f172a; margin:0 0 6px; }
.plan-top .plan-desc { font-size:12px; color:#94a3b8; line-height:1.4; margin:0; }
.plan-price { display:flex; align-items:baseline; gap:2px; margin-bottom:20px; }
.plan-price .currency { font-size:20px; font-weight:700; color:#2563eb; }
.plan-price .amount { font-size:42px; font-weight:800; color:#2563eb; line-height:1; }
.plan-price .period { font-size:14px; color:#475569; }
.plan-features { list-style:none; padding:0; margin:0; flex:1; }
.plan-features li { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#475569; margin-bottom:10px; line-height:1.5; }
.plan-features li .feature-icon { color:#2563eb; margin-top:1px; flex-shrink:0; }

.checkout-panel { background:#fff; border:1px solid #E2E8F0; border-radius:16px; padding:28px 24px; position:sticky; top:84px; box-shadow:0 8px 30px rgba(15,23,42,.1); }
.checkout-panel .checkout-title { font-size:18px; font-weight:700; color:#0f172a; margin:0 0 20px; padding:0 0 14px 14px; border-bottom:1px solid #E2E8F0; position:relative; }
.checkout-panel .checkout-title:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:18px; border-radius:2px; background:linear-gradient(135deg,#3b82f6,#2563eb); }
.checkout-summary-box { background:linear-gradient(135deg,#f0f7ff,#e0ecff); border-radius:12px; padding:20px; margin-bottom:20px; }
.summary-row { display:flex; justify-content:space-between; align-items:center; }
.summary-label { font-size:13px; color:#64748b; }
.summary-value { font-size:15px; font-weight:600; color:#0f172a; }
.summary-divider { height:1px; background:rgba(37,99,235,.15); margin:14px 0; }
.summary-amount .summary-price { font-size:28px; font-weight:800; color:#2563eb; }
.pay-section { margin-bottom:20px; }
.pay-section-label { display:block; font-size:13px; color:#64748b; margin-bottom:12px; }
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pay-method { display:flex; align-items:center; gap:8px; padding:14px 12px; border-radius:12px; border:1.5px solid #E2E8F0; cursor:pointer; transition:all .2s ease; font-size:14px; font-weight:500; color:#475569; background:#fff; position:relative; }
.pay-method:hover { border-color:#93c5fd; }
.pay-method.active { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
.pay-radio { width:16px; height:16px; border-radius:50%; border:2px solid #cbd5e1; flex-shrink:0; transition:all .2s ease; position:relative; }
.pay-method.active .pay-radio { border-color:#2563eb; }
.pay-method.active .pay-radio:after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:#2563eb; }
.pay-btn { width:100%; margin-top:4px; background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border:none; padding:14px 28px; border-radius:12px; font-weight:600; cursor:pointer; transition:all .3s ease; box-shadow:0 4px 20px rgba(37,99,235,.3); font-size:16px; display:flex; align-items:center; justify-content:center; gap:8px; }
.pay-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(37,99,235,.4); }
.pay-btn:disabled { opacity:.7; cursor:not-allowed; }
.pay-security { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; font-size:12px; color:#94a3b8; }
.pay-security svg { color:#22c55e; }
.checkout-agreement { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#94a3b8; margin-top:16px; line-height:1.6; }
.agree-check { display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; margin-top:1px; }
.agree-check input { display:none; }
.agree-check span { width:16px; height:16px; border-radius:4px; border:1.5px solid #cbd5e1; display:inline-block; transition:all .2s ease; position:relative; }
.agree-check input:checked + span { background:#2563eb; border-color:#2563eb; }
.agree-check input:checked + span:after { content:""; position:absolute; top:2px; left:5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.checkout-agreement .agreement-link { color:#2563eb; cursor:pointer; text-decoration:none; }
.checkout-agreement .agreement-link:hover { text-decoration:underline; }

.benefits-section { padding:48px 0 80px; background:linear-gradient(180deg,#f8fafc 0%,#eff6ff 100%); }
.benefits-section .benefits-container { max-width:1200px; margin:0 auto; padding:0 24px; }
.benefits-section .benefits-title { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:700; color:#0f172a; margin:0 0 28px; }
.benefits-section .benefits-title-bar { display:inline-block; width:5px; height:24px; border-radius:3px; background:linear-gradient(135deg,#3b82f6,#2563eb); }
.benefits-section .benefits-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.benefits-section .benefit-card { background:#fff; border:1px solid #E2E8F0; border-radius:16px; padding:28px 24px; display:flex; gap:18px; box-shadow:0 2px 8px rgba(15,23,42,.06); transition:all .3s ease; }
.benefits-section .benefit-card:hover { border-color:#2563eb; transform:translateY(-4px); box-shadow:0 12px 32px rgba(37,99,235,.18); }
.benefits-section .benefit-card .benefit-icon { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#eff6ff,#dbeafe); display:flex; align-items:center; justify-content:center; color:#2563eb; flex-shrink:0; }
.benefits-section .benefit-card .benefit-content h3 { font-size:16px; font-weight:700; color:#0f172a; margin:0 0 8px; }
.benefits-section .benefit-card .benefit-content p { font-size:13px; color:#64748b; line-height:1.6; margin:0; }

.agreement-overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:9999; }
.agreement-modal { width:600px; max-width:92vw; max-height:80vh; background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.agreement-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid #f0f0f0; background:linear-gradient(135deg,#2d8cf0,#1a6fd4); color:#fff; }
.agreement-title { font-size:18px; font-weight:600; }
.agreement-close { cursor:pointer; color:rgba(255,255,255,.8); transition:color .2s; font-size:22px; background:none; border:none; }
.agreement-close:hover { color:#fff; }
.agreement-body { flex:1; overflow-y:auto; padding:24px; }
.agreement-content { font-size:14px; line-height:1.8; color:#333; }
.agreement-content h1, .agreement-content h2, .agreement-content h3 { margin-top:16px; margin-bottom:8px; }
.agreement-content p { margin-bottom:10px; }
.agreement-content ul, .agreement-content ol { padding-left:20px; margin-bottom:10px; }

.vip-checkout-modal { max-width:480px; }
.vip-checkout-form { display:grid; gap:14px; padding:0 28px 28px; }
.vip-checkout-form label { font-size:13px; color:var(--muted); }
.vip-checkout-form input, .vip-checkout-form select { width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.vip-checkout-form input:focus, .vip-checkout-form select:focus { outline:none; border-color:var(--gold); }
.vip-checkout-summary { background:#f6fbff; border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
.vip-checkout-summary strong { font-size:24px; color:var(--gold); font-weight:700; }

@media (max-width:900px) {
  .vip-body .body-container { grid-template-columns:1fr; }
  .plans-panel { grid-template-columns:1fr 1fr; }
  .checkout-panel { position:static; }

}
@media (max-width:600px) {
  .plans-panel { grid-template-columns:1fr; }
  .benefits-section .benefits-grid { grid-template-columns:1fr; }
}