:root{
  color-scheme: dark;
  --bg:#0b0f16;
  --panel:rgba(18,20,26,0.7);
  --panel-border:rgba(255,255,255,0.06);
  --muted:#9aa3b9;
  --text:#e8ecf1;
  --accent:#7aa2f7;
  --accent2:#2ac3de;
  --ok:#9ece6a;
  --danger:#f7768e;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
.hfs-root{max-width:980px;margin:0 auto;padding:28px 18px;}
.hfs-shell{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;animation:hfs-fade-in .5s ease both;}
@keyframes hfs-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.hfs-title{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
.hfs-title h2{font-size:1.4rem;margin:0}
.hfs-sub{color:var(--muted);font-size:.95rem;margin-bottom:18px}

.hfs-switch{display:flex;gap:10px;margin-bottom:14px}
.hfs-switch button{border:1px solid var(--panel-border);background:rgba(255,255,255,.04);color:var(--text);padding:8px 14px;border-radius:999px;cursor:pointer;transition:transform .15s ease, background .2s ease}
.hfs-switch button[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0f16;transform:translateY(-1px)}

.hfs-form{display:grid;gap:12px;margin-bottom:14px}
.hfs-input,.hfs-textarea,.hfs-select{width:100%;background:rgba(6,8,12,.8);border:1px solid var(--panel-border);border-radius:12px;color:var(--text);padding:12px 14px;transition:border .2s ease, box-shadow .2s ease}
.hfs-input:focus,.hfs-textarea:focus,.hfs-select:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(42,195,222,.18)}
.hfs-btn{justify-self:start;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0f16;border:0;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.hfs-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(42,195,222,.25)}
.hfs-small{color:var(--muted);font-size:.85rem}
.hfs-hidden{position:absolute;left:-9999px}

.hfs-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:14px;margin-top:12px;transition:border-color .25s ease, transform .2s ease}
.hfs-card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-1px)}
.hfs-badges{display:flex;gap:8px;flex-wrap:wrap;margin:.25rem 0 .5rem}
.hfs-badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--panel-border);font-size:.8rem;background:rgba(255,255,255,.04)}
.hfs-badge.ok{border-color:rgba(158,206,106,.65);color:var(--ok)}
.hfs-badge.crit{border-color:rgba(247,118,142,.65);color:var(--danger)}

.hfs-list-enter{animation:hfs-fade-in .35s ease both}
.hfs-answers details{margin-top:.35rem}
.hfs-answers summary{cursor:pointer}

@media (prefers-reduced-motion: reduce){
  .hfs-shell,.hfs-card,.hfs-btn{animation:none;transition:none}
}