:root{
  --vhf-bg:#0b0b10;
  --vhf-card:#11121a;
  --vhf-text:#f3f4f6;
  --vhf-muted:#b6bccb;
  --vhf-border:rgba(255,255,255,.10);
  --vhf-primary:#e11d48;
  --vhf-ghost:rgba(255,255,255,.08);
  --vhf-input:#0f1018;
}

.vhf-wrap[data-vhf-theme="light"]{
  --vhf-bg:#f7f7fb;
  --vhf-card:#ffffff;
  --vhf-text:#111827;
  --vhf-muted:#6b7280;
  --vhf-border:rgba(17,24,39,.12);
  --vhf-primary:#e11d48;
  --vhf-ghost:rgba(17,24,39,.06);
  --vhf-input:#ffffff;
}

@media (prefers-color-scheme: light){
  .vhf-wrap[data-vhf-theme="auto"]{
    --vhf-bg:#f7f7fb;
    --vhf-card:#ffffff;
    --vhf-text:#111827;
    --vhf-muted:#6b7280;
    --vhf-border:rgba(17,24,39,.12);
    --vhf-primary:#e11d48;
    --vhf-ghost:rgba(17,24,39,.06);
    --vhf-input:#ffffff;
  }
}
@media (prefers-color-scheme: dark){
  .vhf-wrap[data-vhf-theme="auto"]{
    --vhf-bg:#0b0b10;
    --vhf-card:#11121a;
    --vhf-text:#f3f4f6;
    --vhf-muted:#b6bccb;
    --vhf-border:rgba(255,255,255,.10);
    --vhf-primary:#e11d48;
    --vhf-ghost:rgba(255,255,255,.08);
    --vhf-input:#0f1018;
  }
}

.vhf-wrap{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--vhf-bg); padding: 28px; border-radius: 18px;}
.vhf-card{max-width: 900px; margin: 0 auto; background: var(--vhf-card); border: 1px solid var(--vhf-border); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);}
.vhf-header{padding: 22px 22px 14px;}
.vhf-kicker{font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--vhf-muted);}
.vhf-title{margin: 6px 0 0; font-size: 28px; color: var(--vhf-text); line-height: 1.1;}
.vhf-progress{display:flex; align-items:center; gap: 12px; margin-top: 14px;}
.vhf-progress-bar{flex:1; height: 10px; background: rgba(255,255,255,.06); border-radius: 999px; overflow:hidden; border: 1px solid var(--vhf-border);}
.vhf-progress-fill{display:block; height:100%; width:0%; background: var(--vhf-primary);}
.vhf-progress-meta{color: var(--vhf-muted); font-size: 13px; min-width: 56px; text-align:right;}
.vhf-body{padding: 12px 22px 22px;}
.vhf-footer{display:flex; justify-content:space-between; gap: 12px; padding: 16px 22px 22px;}
.vhf-q h3{margin: 0 0 10px; color: var(--vhf-text); font-size: 20px;}
.vhf-help{margin: 0 0 14px; color: var(--vhf-muted); font-size: 14px;}
.vhf-options{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;}
@media (max-width: 720px){ .vhf-options{grid-template-columns: repeat(1, minmax(0,1fr));} }

.vhf-opt{position:relative; padding: 18px; border-radius: 14px; border: 1px solid var(--vhf-border); background: rgba(255,255,255,.04); cursor:pointer; color: var(--vhf-text); font-weight: 600; text-align:center; user-select:none;}
.vhf-opt:hover{border-color: rgba(225,29,72,.55);}
.vhf-opt[aria-checked="true"]{border-color: var(--vhf-primary); box-shadow: 0 0 0 3px rgba(225,29,72,.18) inset;}
.vhf-opt .vhf-check{position:absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--vhf-border); display:flex; align-items:center; justify-content:center; font-size: 12px; color: var(--vhf-text); background: rgba(0,0,0,.15);}
.vhf-opt[aria-checked="true"] .vhf-check{border-color: var(--vhf-primary); background: rgba(225,29,72,.25);}

.vhf-field label{display:block; margin-bottom: 6px; color: var(--vhf-muted); font-size: 13px;}
.vhf-field input{width:100%; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--vhf-border); background: var(--vhf-input); color: var(--vhf-text);}
.vhf-required{color: var(--vhf-primary); font-weight: 700;}
.vhf-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;}
.vhf-field-wide{grid-column: span 2;}
@media (max-width: 720px){ .vhf-grid{grid-template-columns: 1fr;} .vhf-field-wide{grid-column: span 1;} }

.vhf-btn{border: 1px solid transparent; border-radius: 999px; padding: 12px 18px; font-weight: 700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap: 8px;}
.vhf-btn:disabled{opacity: .5; cursor:not-allowed;}
.vhf-btn-primary{background: var(--vhf-primary); color: #fff;}
.vhf-btn-ghost{background: var(--vhf-ghost); color: var(--vhf-text); border-color: var(--vhf-border);}
.vhf-actions{display:flex; gap: 10px; margin-top: 14px; flex-wrap:wrap;}
.vhf-estimate-box{border: 1px solid var(--vhf-border); background: rgba(255,255,255,.03); padding: 18px; border-radius: 16px; margin-top: 10px;}
.vhf-estimate-label{color: var(--vhf-muted); font-size: 13px; text-transform: uppercase; letter-spacing:.08em;}
.vhf-estimate-value{color: var(--vhf-text); font-size: 28px; font-weight: 800; margin-top: 8px;}
.vhf-subtitle{color: var(--vhf-text); margin: 18px 0 10px; font-size: 18px;}
.vhf-summary{border-top: 1px solid var(--vhf-border);}
.vhf-row{display:flex; justify-content:space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--vhf-border);}
.vhf-row .q{color: var(--vhf-muted); font-size: 14px;}
.vhf-row .a{color: var(--vhf-text); font-weight: 700; font-size: 14px; text-align:right;}
.vhf-muted{color: var(--vhf-muted); font-size: 14px;}
.vhf-form-msg{margin-top: 10px; color: var(--vhf-text);}
.vhf-error{padding: 12px 14px; border: 1px solid #fca5a5; background: #fee2e2; color: #991b1b; border-radius: 10px;}