:root{ --hvfp-accent:#0b4a6f; --hvfp-grad: linear-gradient(135deg, rgba(11,74,111,.92), rgba(11,74,111,.75)); }
.hvfp-wrap.hvfp-root { max-width: 1100px; margin: 34px auto; background:#ffffff; padding:0; border:1px solid #dce2ea; border-radius:22px; box-shadow: 0 24px 56px rgba(2,6,23,.06); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; overflow:hidden;}
.hvfp-hero{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; background: var(--hvfp-grad); position:relative; }
.hvfp-hero:after{ content:''; position:absolute; inset:auto -30px -30px auto; width:180px; height:180px; background: radial-gradient(rgba(255,255,255,.25), transparent 60%); filter: blur(6px); border-radius:50%; }
.hvfp-hero .h-left{ display:flex; align-items:center; gap:14px; color:#fff; }
.hvfp-logo{ height:46px; width:auto; border-radius:6px; background:#fff; padding:6px; }
.hvfp-hero h3{ margin:0; font-size:26px; letter-spacing:.2px; }
.hvfp-subtitle{ color:#e2edf5; font-size:13px; margin-top:4px; }
.hvfp-hero .h-right{ display:flex; gap:14px; }
.hvfp-hero .stat{ background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:8px 12px; border-radius:12px; color:#fff; text-align:center; }
.hvfp-hero .stat .k{ font-size:11px; opacity:.9; }
.hvfp-hero .stat .v{ font-weight:800; letter-spacing:.3px; }
.hvfp-root > .hvfp-steps, .hvfp-root > .hvfp-form, .hvfp-root > .hvfp-card, .hvfp-root > .hvfp-options-grid, .hvfp-root > .hvfp-success, .hvfp-root > .hvfp-error, .hvfp-root > .hvfp-warning, .hvfp-root > .hvfp-receipt { padding: 20px 26px; }
.hvfp-steps { position:relative; display:flex; align-items:center; gap:12px; margin:12px 0 22px; }
.hvfp-steps .bar{ position: absolute; left:26px; right:26px; height:6px; background:#eef2f7; border-radius:99px; }
.hvfp-steps .bar span{ display:block; height:100%; background: var(--hvfp-accent); border-radius:99px; box-shadow: 0 2px 8px rgba(11,74,111,.35); }
.hvfp-steps .dot{ position:relative; z-index:2; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#e0e7ef; font-weight:700; font-size:12px; color:#0b1220; border:1px solid #d0d7e2;}
.hvfp-steps .dot.active{ background: var(--hvfp-accent); color:#fff; border-color:transparent; }
.hvfp-form p { margin-bottom: 12px; }
.hvfp-form input[type=text], .hvfp-form input[type=email], .hvfp-form select { width:100%; padding:13px; border:1px solid #cfd8e3; border-radius:12px; outline:none; font-size:14px; background:#fff; }
.hvfp-form .button{ background:var(--hvfp-accent); border:none; color:#fff; padding:12px 17px; border-radius:12px; cursor:pointer; font-weight:700; box-shadow: 0 4px 12px rgba(11,74,111,.25); }
.hvfp-form .button:hover{ filter: brightness(1.05); }
.hvfp-card { background:#f7fafc; border:1px solid #dee7f0; padding:20px; border-radius:16px; margin:16px 0; }
.hvfp-card-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px){ .hvfp-card-grid{ grid-template-columns:1fr 1fr; } }
.hvfp-error { background:#fff5f5; border:1px solid #fecaca; padding:14px; border-radius:14px; }
.hvfp-warning { background:#fffbeb; border:1px solid #fde68a; padding:14px; border-radius:14px; }
.hvfp-success { background:#f0fdf4; border:1px solid #bbf7d0; padding:14px; border-radius:14px; }
.hvfp-receipt { position:relative; background:#fff; border:1px dashed #cbd5e1; padding:20px; border-radius:14px; margin-top:16px; }
.hvfp-receive-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.hvfp-receive-head .badge{ border:2px solid #ef4444; color:#ef4444; font-weight:900; border-radius:10px; padding:4px 10px; display:inline-block; }
.hvfp-receive-head .sub{ font-size:12px; color:#6b7280; }
.hvfp-receipt ul { list-style: none; padding-left:0; }
.hvfp-receipt li { margin-bottom:8px; font-size:14px; }
.hvfp-sign{ position:relative; margin-top:14px; text-align:right; }
.hvfp-sign img{ max-height:56px; display:inline-block; margin-bottom:4px; }
.hvfp-sign .line{ border-top:1px solid #9aa7b6; height:0; width:240px; display:inline-block; }
.hvfp-sign .name{ font-size:12px; color:#4b5563; }
.hvfp-options-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin:14px 0; }
@media (min-width:880px){ .hvfp-options-grid{ grid-template-columns: repeat(3, 1fr);} }
.hvfp-option{ border:1px solid #d7e0ea; border-radius:16px; padding:16px; background:#fff; transition:.2s box-shadow, .2s border-color; }
.hvfp-option.active{ box-shadow:0 10px 26px rgba(2,6,23,.06); border-color:var(--hvfp-accent); }
.hvfp-option-title{ font-weight:800; margin-bottom:10px; font-size:16px; color:#0b1220;}
.hvfp-qr{ max-width:180px; height:auto; border:1px solid #e5e7eb; padding:6px; border-radius:10px; background:#fff; }
.hvfp-instructions{ margin-top:12px; background:#fff; border:1px dashed #cfd8e3; border-radius:12px; padding:10px; }
.hvfp-instructions .t{ font-weight:800; font-size:13px; margin-bottom:6px; color:#0b1220; }
.hvfp-instructions .c{ font-size:13px; color:#334155; white-space:pre-wrap; }