.hb-widget{
  --hb-bg:#070B1F;
  --hb-deep:#030712;
  --hb-cyan:#38BDF8;        /* brand blue */
  --hb-purple:#7C3AED;      /* brand purple */
  --hb-glass:rgba(7,11,31,.55);
  --hb-ink:#F8FAFC;
  --hb-dim:#94A3B8;
  --hb-faint:#475569;
  --hb-hair:rgba(148,163,184,.14);
  position:relative;
  font-family:'DM Sans',sans-serif;
  color:var(--hb-ink);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%,rgba(124,58,237,.10),transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 90%,rgba(56,189,248,.07),transparent 65%),
    linear-gradient(160deg,var(--hb-deep),var(--hb-bg) 70%);
  border:1px solid var(--hb-hair);
  border-radius:12px;
  overflow:hidden;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,4vw,3.5rem);
}
.hb-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.hb-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}

.hb-header{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.hb-kicker{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--hb-dim);margin-bottom:1rem;
}
.hb-title{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(1.55rem,3.8vw,2.8rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--hb-ink);
  max-width:20ch;margin:0 auto;
}

.hb-grid{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}

.hb-panel{
  position:relative;
  background:rgba(7,11,31,.5);
  border:1px solid var(--hb-hair);
  border-radius:10px;
  box-shadow:none;
  padding:clamp(1.5rem,3vw,2.25rem);
}
.hb-field{margin-bottom:1.15rem}
.hb-label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--hb-dim);margin-bottom:.5rem;
}
.hb-input,.hb-select{
  width:100%;background:rgba(3,7,18,.55);
  border:1px solid var(--hb-hair);border-radius:6px;
  color:var(--hb-ink);font-family:'DM Sans',sans-serif;font-size:.98rem;font-weight:300;
  padding:.85rem 1rem;outline:none;
  transition:border-color .25s,box-shadow .25s;
  appearance:none;-webkit-appearance:none;
}
.hb-input::placeholder{color:var(--hb-faint)}
.hb-input:focus,.hb-select:focus{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 1px rgba(56,189,248,.25);
}
.hb-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.hb-select-wrap{position:relative}
.hb-select-wrap::after{
  content:'';position:absolute;right:1rem;top:50%;width:7px;height:7px;
  border-right:1px solid var(--hb-dim);border-bottom:1px solid var(--hb-dim);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.hb-btn{
  width:100%;margin-top:.5rem;cursor:pointer;position:relative;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--hb-purple);
  border:1px solid var(--hb-purple);border-radius:6px;padding:1rem 1.25rem;font-weight:500;
  transition:background .25s,border-color .25s,transform .25s;
  box-shadow:none;
}
.hb-btn:hover{background:#6D28D9;border-color:#6D28D9;transform:translateY(-1px)}
.hb-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.hb-error{
  display:none;align-items:flex-start;gap:.6rem;
  margin-top:1rem;padding:.8rem 1rem;border-radius:8px;
  font-size:.84rem;font-weight:300;line-height:1.5;
  color:#fecdd3;background:rgba(251,113,133,.08);
  border:1px solid rgba(251,113,133,.3);
  animation:hbShake .45s ease;
}
.hb-error.show{display:flex}
.hb-error svg{flex:none;width:15px;height:15px;margin-top:.15em}
@keyframes hbShake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.hb-result{position:relative;min-height:420px;display:grid;place-items:center}
.hb-empty{
  text-align:center;color:var(--hb-dim);font-weight:300;font-size:.95rem;
  max-width:36ch;line-height:1.8;padding:2rem;
}
.hb-empty-orb{
  width:96px;height:96px;margin:0 auto 1.6rem;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(56,189,248,.45),rgba(124,58,237,.3) 45%,transparent 72%);
}

.hb-warp{
  position:absolute;inset:0;display:none;place-items:center;z-index:5;border-radius:10px;
  background:radial-gradient(circle,rgba(7,11,31,.4),rgba(3,7,18,.85));
}
.hb-warp.on{display:grid}
.hb-warp-ring{
  width:74px;height:74px;border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--hb-cyan);border-right-color:rgba(124,58,237,.7);
  animation:hbSpin .7s linear infinite;
}
@keyframes hbSpin{to{transform:rotate(360deg)}}
.hb-warp-text{
  position:absolute;bottom:18%;font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(56,189,248,.75);
  animation:hbBlink 1s steps(2) infinite;
}
@keyframes hbBlink{50%{opacity:.25}}

.hb-card{
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.hb-card.in{opacity:1;transform:none}

.hb-frame{
  position:relative;border-radius:8px;overflow:hidden;
  border:1px solid rgba(148,163,184,.2);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  aspect-ratio:16/10;background:#0a0818;
}
.hb-frame img{width:100%;height:100%;object-fit:cover;display:block}
.hb-frame-badge{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:#04121a;background:rgba(56,189,248,.9);
  padding:.35rem .7rem;border-radius:99px;font-weight:500;
}

.hb-card-body{padding:1.5rem .25rem 0}
.hb-greeting{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.4;letter-spacing:-.01em;margin-bottom:.8rem;
}
.hb-greeting em{font-style:normal;color:var(--hb-cyan)}
.hb-desc{color:var(--hb-dim);font-weight:300;font-size:.95rem;line-height:1.8;max-width:56ch}
.hb-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.hb-dl{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hb-ink);background:none;border:1px solid rgba(56,189,248,.4);
  padding:.8rem 1.3rem;border-radius:8px;
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.hb-dl:hover{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.6)}
.hb-dl svg,.hb-share a svg{width:14px;height:14px}
.hb-share{display:flex;gap:.55rem;margin-left:auto}
.hb-share a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:8px;
  color:var(--hb-dim);background:rgba(148,163,184,.06);
  border:1px solid var(--hb-hair);
  transition:color .25s,border-color .25s,box-shadow .25s,transform .25s;
}
.hb-share a:hover{color:var(--hb-ink);border-color:rgba(56,189,248,.5);box-shadow:0 0 16px rgba(56,189,248,.18);transform:translateY(-1px)}
.hb-toast{
  position:absolute;left:50%;bottom:1rem;transform:translate(-50%,8px);
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:#04121a;background:rgba(56,189,248,.92);padding:.5rem 1rem;border-radius:99px;
  opacity:0;pointer-events:none;transition:.4s;z-index:9;
}
.hb-toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .hb-grid{grid-template-columns:1fr}
  .hb-result{min-height:0}
  .hb-share{margin-left:0}
}

.hb-capture{padding:clamp(1rem,2vw,1.75rem);background:linear-gradient(165deg,#070B1F,#030712 70%)}

.hb-widget select,.hb-widget button,.hb-share a{cursor:pointer}
.hb-widget a:focus-visible,.hb-widget button:focus-visible,
.hb-widget input:focus-visible,.hb-widget select:focus-visible{
  outline:2px solid var(--hb-cyan);outline-offset:3px;
}
.hb-widget [aria-invalid="true"]{border-color:rgba(251,113,133,.55)!important}

.hb-frame::after{content:none}
.hb-frame-badge::before{content:none}

@media(max-width:640px){
  .hb-btn,.hb-dl{min-height:44px}
  .hb-share a{min-width:44px;min-height:44px}
  .hb-frame img{max-width:100%;height:auto}
  .hb-dl{flex:1 1 auto;justify-content:center}
}

@media(max-width:400px){
  .hb-row{grid-template-columns:1fr;gap:0}
  .hb-row .hb-field{margin-bottom:1.15rem}
}

@media(prefers-reduced-motion:reduce){
  .hb-widget *,.hb-widget *::before,.hb-widget *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;
  }
  .hb-card{opacity:1;transform:none}
  .hb-frame::after{display:none}
}