
: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;}

.vhf-runtime-results{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:12px; margin-top:10px;}
.vhf-result-card{border:1px solid var(--vhf-border); background:rgba(255,255,255,.03); padding:16px 18px; border-radius:16px;}
.vhf-result-label{color:var(--vhf-muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em;}
.vhf-result-value{color:var(--vhf-text); font-size:30px; font-weight:800; margin-top:8px; line-height:1.1;}
.vhf-result-value-sm{font-size:22px;}
.vhf-result-muted{color:var(--vhf-muted); font-size:14px; margin-top:10px; line-height:1.5;}
.vhf-tier-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-top:10px;}
.vhf-tier-name{color:var(--vhf-text); font-weight:800; font-size:16px;}
.vhf-tier-pct{color:var(--vhf-text); font-size:14px;}
.vhf-tier-bar{height:10px; border:1px solid var(--vhf-border); background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:10px;}
.vhf-tier-fill{display:block; height:100%; background:var(--vhf-primary); width:0; border-radius:999px;}
.vhf-result-list{margin:10px 0 0 18px; color:var(--vhf-text);}
.vhf-result-list li{margin:0; line-height:1.5;}


/* --- VHPR dashboard refresh --- */
.vhpr-wrap,
.vhpr-wrap *{box-sizing:border-box;}
.vhpr-wrap.vhpr-dashboard{
  --vhpr-bg:#f4f7fb;
  --vhpr-surface:#ffffff;
  --vhpr-surface-soft:#f8fafc;
  --vhpr-text:#0f172a;
  --vhpr-muted:#5b6474;
  --vhpr-border:#e5eaf1;
  --vhpr-shadow:0 20px 45px rgba(15,23,42,.08);
  --vhpr-shadow-soft:0 10px 28px rgba(15,23,42,.05);
  --vhpr-primary:#0f3d91;
  --vhpr-accent:#d0a932;
  margin:0 auto;
  padding:28px 16px 40px;
  color:var(--vhpr-text);
  background:transparent;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vhpr-dashboard-shell{max-width:1180px;margin:0 auto;}
.vhpr-surface,
.vhpr-card{
  background:var(--vhpr-surface);
  border:1px solid var(--vhpr-border);
  border-radius:24px;
  box-shadow:var(--vhpr-shadow-soft);
}
.vhpr-dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr);
  gap:18px;
  align-items:stretch;
  margin-bottom:18px;
}
.vhpr-dashboard-hero-main{
  padding:28px 30px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#f6f7fb 100%);
  box-shadow:var(--vhpr-shadow);
}
.vhpr-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--vhpr-primary);
}
.vhpr-dashboard-title{
  margin:12px 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--vhpr-text);
}
.vhpr-dashboard-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:1rem;
  color:var(--vhpr-muted);
}
.vhpr-meta-dot{opacity:.45;}
.vhpr-dashboard-intro{
  margin:16px 0 0;
  max-width:66ch;
  font-size:15px;
  line-height:1.7;
  color:var(--vhpr-muted);
}
.vhpr-dashboard-hero-side{
  padding:24px;
  display:grid;
  gap:16px;
  align-content:start;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
}
.vhpr-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  width:max-content;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vhpr-status-pill.is-unlocked{background:#ecfdf3;border-color:#b7efcc;color:#166534;}
.vhpr-status-pill.is-locked{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.vhpr-side-meta{display:grid;gap:4px;}
.vhpr-side-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7b8797;
}
.vhpr-side-meta strong{font-size:15px;line-height:1.5;color:var(--vhpr-text);}

.vhpr-locked-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,1.1fr);
  gap:22px;
  padding:24px 26px;
  margin-bottom:18px;
}
.vhpr-locked-title{margin:10px 0 10px;font-size:26px;line-height:1.15;letter-spacing:-.03em;}
.vhpr-locked-text{margin:0;color:var(--vhpr-muted);line-height:1.7;}
.vhpr-locked-text span{color:var(--vhpr-text);font-weight:600;}
.vhpr-lock-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end;}
.vhpr-form-field{display:grid;gap:6px;}
.vhpr-form-field label{font-size:12px;font-weight:700;color:#637083;text-transform:uppercase;letter-spacing:.08em;}
.vhpr-form-field input{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--vhpr-border);
  background:#fff;
  color:var(--vhpr-text);
  padding:0 14px;
  font-size:15px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
.vhpr-form-field input:focus{outline:none;border-color:#9db7ea;box-shadow:0 0 0 4px rgba(15,61,145,.12);}
.vhpr-form-help{font-size:12px;color:var(--vhpr-muted);}
.vhpr-form-actions{display:flex;align-items:end;}
.vhpr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:14px;border:0;text-decoration:none;font-weight:800;cursor:pointer;}
.vhpr-btn-primary{background:linear-gradient(180deg,#103d92 0%,#0c3278 100%);color:#fff;box-shadow:0 12px 24px rgba(15,61,145,.22);}
.vhpr-manual-msg{grid-column:1/-1;font-size:13px;color:var(--vhpr-muted);}

.vhpr-dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:stretch;}
.vhpr-card{padding:22px 22px 20px;min-height:168px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;}
.vhpr-col-span-3{grid-column:span 3;}
.vhpr-col-span-4{grid-column:span 4;}
.vhpr-col-span-5{grid-column:span 5;}
.vhpr-col-span-6{grid-column:span 6;}
.vhpr-col-span-7{grid-column:span 7;}
.vhpr-col-span-8{grid-column:span 8;}
.vhpr-col-span-9{grid-column:span 9;}
.vhpr-col-span-10{grid-column:span 10;}
.vhpr-col-span-11{grid-column:span 11;}
.vhpr-col-span-12{grid-column:span 12;}
.vhpr-card-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b7789;
}
.vhpr-card-value{
  margin-top:14px;
  font-size:clamp(1.7rem,2.8vw,2.7rem);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--vhpr-text);
}
.vhpr-card-value--compact{font-size:clamp(1.35rem,2vw,1.85rem);letter-spacing:-.03em;}
.vhpr-card-body{margin-top:14px;font-size:14px;line-height:1.75;color:var(--vhpr-muted);}
.vhpr-card-body p{margin:10px 0 0;}
.vhpr-card--headline{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);box-shadow:var(--vhpr-shadow);}
.vhpr-card--confidence .vhpr-card-value{margin-top:10px;}
.vhpr-card--metric{background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);}
.vhpr-card--compact-rich{min-height:150px;}
.vhpr-card--compact-rich .vhpr-card-value{font-size:clamp(1.45rem,2.25vw,2.15rem);line-height:1.12;}
.vhpr-card--compact-rich .vhpr-card-body{margin-top:10px;}
.vhpr-inline-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid #d8e5ff;
  color:var(--vhpr-primary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vhpr-card-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px;}
.vhpr-card-list li{position:relative;padding-left:18px;color:var(--vhpr-muted);line-height:1.65;}
.vhpr-card-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:999px;background:#9db7ea;}

.vhpr-tier{display:grid;gap:14px;}
.vhpr-tier-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.vhpr-tier-name{font-size:18px;font-weight:800;color:var(--vhpr-text);}
.vhpr-tier-pct{font-size:38px;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--vhpr-text);}
.vhpr-tier-bar{height:12px;border-radius:999px;background:#edf2f8;overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.06);}
.vhpr-tier-fill{display:block;height:100%;border-radius:999px;box-shadow:0 4px 10px rgba(15,23,42,.12);}

@media (max-width: 1024px){
  .vhpr-dashboard-hero,
  .vhpr-locked-panel{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .vhpr-col-span-3,.vhpr-col-span-4,.vhpr-col-span-5,.vhpr-col-span-6,.vhpr-col-span-7,.vhpr-col-span-8,.vhpr-col-span-9,.vhpr-col-span-10,.vhpr-col-span-11,.vhpr-col-span-12{grid-column:span 12;}
  .vhpr-dashboard-grid{gap:14px;}
  .vhpr-card{min-height:auto;}
}
@media (max-width: 640px){
  .vhpr-wrap.vhpr-dashboard{padding:18px 12px 28px;}
  .vhpr-dashboard-hero-main,
  .vhpr-dashboard-hero-side,
  .vhpr-locked-panel,
  .vhpr-card{padding:18px; border-radius:20px;}
  .vhpr-lock-form{grid-template-columns:1fr;}
  .vhpr-card-value{font-size:1.8rem;}
  .vhpr-tier-pct{font-size:28px;}
}
