.vhf-section{
  --bg-deep:#11262A;
  --surface:#0C0D0E;
  --text-light:#F7F7F7;
  --accent:#57B0D9;
  --border:rgba(87,176,217,.2);
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text-light);
  background:var(--bg-deep);
  line-height:1.5;
  position:relative;
  left:50%; right:50%;
  width:100vw;
  margin-left:-50vw; margin-right:-50vw;
}
.vhf-section *{ box-sizing:border-box; }
.vhf-wrapper{ max-width:760px; margin:0 auto; padding:64px 24px 80px; }

.vhf-header{ text-align:center; margin-bottom:44px; }
.vhf-label{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--accent); background:rgba(87,176,217,.12); padding:6px 20px; border-radius:60px; margin-bottom:18px; }
.vhf-title{ font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-1px; line-height:1.25; color:#fff; margin:0 0 14px; }
.vhf-title em{ font-style:normal; color:var(--accent); }
.vhf-section .vhf-sub{ font-size:16px; color:#C2CCCF !important; opacity:1 !important; max-width:520px; margin:0 auto 20px; }
.vhf-section .vhf-instructions{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#CAE8F5 !important; opacity:1 !important; background:rgba(87,176,217,.1); border:1px solid var(--border); padding:7px 16px; border-radius:60px; }

.vhf-flow{ display:flex; flex-direction:column; }
.vhf-step{ background:var(--surface); border:1px solid var(--border); border-radius:20px; cursor:pointer; transition:border-color .2s ease, opacity .3s ease; overflow:hidden; }
.vhf-step:hover{ border-color:rgba(87,176,217,.5); }
.vhf-step.vhf-open{ border-color:var(--accent); }
.vhf-node{ display:flex; align-items:center; gap:16px; padding:18px 22px; }
.vhf-node-icon{ width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; background:rgba(87,176,217,.12); border:1px solid rgba(87,176,217,.25); }
.vhf-node-body{ flex:1; min-width:0; }
.vhf-node-title{ font-size:16px; font-weight:700; color:#fff; margin:0 0 2px; }
.vhf-section .vhf-node-tag{ font-size:13px; color:#9FB0B3 !important; opacity:1 !important; margin:0; }
.vhf-node-arrow{ font-size:22px; color:var(--accent); flex:0 0 auto; transition:transform .2s ease; }
.vhf-step.vhf-open .vhf-node-arrow{ transform:rotate(90deg); }
.vhf-node-detail{ display:none; padding:0 22px 20px 82px; }
.vhf-section .vhf-node-detail p{ font-size:14px; color:#D2DBDD !important; opacity:1 !important; margin:0 0 14px; line-height:1.6; }

.vhf-step-reactions{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.vhf-step-reaction-btn{ display:inline-flex; align-items:center; gap:5px; background:var(--bg-deep); border:1px solid var(--border); color:var(--text-light); font-size:12px; padding:5px 11px; border-radius:60px; cursor:pointer; transition:border-color .15s ease, transform .1s ease; }
.vhf-step-reaction-btn:hover{ border-color:rgba(87,176,217,.5); }
.vhf-step-reaction-btn:active{ transform:scale(.95); }
.vhf-step-reaction-btn.vhf-active{ border-color:var(--accent); background:rgba(87,176,217,.15); }

.vhf-step-comment-prompt{ background:var(--bg-deep); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-top:4px; }
.vhf-section .vhf-step-comment-hint{ font-size:12px; color:#9FB0B3 !important; opacity:1 !important; margin:0 0 8px; display:flex; justify-content:space-between; align-items:center; }
.vhf-step-comment-close{ background:none; border:none; color:#6A868B; cursor:pointer; font-size:12px; padding:0; }
.vhf-step-comment-text, .vhf-step-comment-name{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--text-light); font-family:inherit; font-size:13px; margin-bottom:8px; resize:vertical; }
.vhf-step-comment-text:focus, .vhf-step-comment-name:focus{ outline:none; border-color:var(--accent); }
.vhf-step-comment-error{ font-size:11px; color:#E28080; margin:0 0 8px; }
.vhf-step-comment-submit{ background:var(--accent); color:#fff; border:none; font-size:12px; font-weight:700; padding:7px 18px; border-radius:60px; cursor:pointer; }
.vhf-step-comment-submit:hover{ background:#6FC4EB; }
.vhf-section .vhf-step-comment-thanks{ font-size:12px; color:var(--accent) !important; opacity:1 !important; margin:0; }

.vhf-comment-item-step{ display:inline-block; font-size:11px; font-weight:700; color:var(--accent); background:rgba(87,176,217,.12); padding:2px 10px; border-radius:60px; margin-bottom:6px; }
.vhf-connector{ width:2px; height:22px; margin:0 auto; background:rgba(87,176,217,.15); transition:background .3s ease; }
.vhf-connector.vhf-filled{ background:var(--accent); }
.vhf-step.vhf-locked{ cursor:default; opacity:.35; }
.vhf-step.vhf-locked .vhf-node-icon{ filter:grayscale(1); }
.vhf-step.vhf-locked .vhf-node-arrow{ opacity:.3; }
.vhf-step.vhf-just-unlocked{ animation:vhfPulse .9s ease; }
@keyframes vhfPulse{ 0%{ box-shadow:0 0 0 0 rgba(87,176,217,.5); } 70%{ box-shadow:0 0 0 14px rgba(87,176,217,0); } 100%{ box-shadow:0 0 0 0 rgba(87,176,217,0); } }

.vhf-progress{ margin-top:32px; height:4px; border-radius:4px; background:rgba(87,176,217,.12); overflow:hidden; }
.vhf-progress-bar{ height:100%; width:0%; background:var(--accent); transition:width .3s ease; }
.vhf-section .vhf-progress-label{ text-align:center; font-size:12px; color:#6A868B !important; opacity:1 !important; margin:10px 0 0; }

.vhf-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:16px; margin-top:36px; padding-top:28px; border-top:1px solid var(--border); }
.vhf-share{ display:flex; gap:8px; flex-wrap:wrap; }
.vhf-share-btn{ display:inline-flex; align-items:center; background:transparent; border:1px solid var(--border); color:#CAE8F5; font-size:13px; padding:7px 14px; border-radius:60px; cursor:pointer; text-decoration:none; transition:border-color .15s ease; }
.vhf-share-btn:hover{ border-color:rgba(87,176,217,.5); color:#CAE8F5; }

.vhf-comments{ margin-top:32px; padding-top:28px; border-top:1px solid var(--border); }
.vhf-comments-title{ font-size:16px; font-weight:700; color:#fff; margin:0 0 16px; }
.vhf-comments-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.vhf-section .vhf-comments-empty{ font-size:13px; color:#6A868B !important; opacity:1 !important; margin:0; }
.vhf-comment-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 16px; }
.vhf-comment-item-name{ font-size:13px; font-weight:700; color:var(--accent); margin:0 0 4px; }
.vhf-comment-item-text{ font-size:14px; color:#D2DBDD; margin:0; line-height:1.5; }
.vhf-comment-item-date{ font-size:11px; color:#6A868B; margin:6px 0 0; }
.vhf-comment-form{ display:flex; flex-direction:column; gap:10px; }
.vhf-comment-name, .vhf-comment-text{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 14px; color:var(--text-light); font-family:inherit; font-size:14px; resize:vertical; }
.vhf-comment-name:focus, .vhf-comment-text:focus{ outline:none; border-color:var(--accent); }
.vhf-comment-error{ font-size:12px; color:#E28080; margin:0; }
.vhf-comment-submit{ align-self:flex-start; background:var(--accent); color:#fff; border:none; font-size:14px; font-weight:700; padding:10px 24px; border-radius:60px; cursor:pointer; transition:background .15s ease; }
.vhf-comment-submit:hover{ background:#6FC4EB; }

@media (max-width:600px){
  .vhf-wrapper{ padding:44px 18px 64px; }
  .vhf-node{ padding:14px 16px; gap:12px; }
  .vhf-node-detail{ padding:0 16px 16px 72px; }
  .vhf-actions{ flex-direction:column; }
}