:root{
  --bg: #0b0f14;
  --panel: #0f1621;
  --text: #e7ebf3;
  --muted: #a7b0c0;
  --primary: #6ef6ff;
  --accent: #9a6bff;
  --danger: #ff6b9b;
  --ok: #7dffb0;
  --ring: rgba(110,246,255,0.5);
}
*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
/* ensure [hidden] truly hides across browsers */
[hidden]{display:none !important}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at -10% -10%, rgba(154,107,255,.08), transparent 35%),
              radial-gradient(1000px 700px at 110% -20%, rgba(110,246,255,.08), transparent 40%),
              var(--bg);
  color: var(--text);
}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem}
.container{width:min(1200px, 92%);margin-inline:auto;overflow-x:hidden}
@media (max-width: 600px){
  .container{width:min(720px, 94%)}
}

.site-header{position:sticky;top:0;background:rgba(11,15,20,0.7);backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,255,255,0.06);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;position:relative}
@media (max-width: 600px){
  .header-inner{flex-direction:row !important;gap:.5rem;justify-content:flex-start !important}
  .brand{justify-content:flex-start !important}
  .top-nav{width:100%;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
}
/* Mobile menu */
.hamburger{display:none;border:0;background:transparent;width:44px;height:44px;border-radius:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);margin:0 auto;box-shadow:0 6px 0 var(--text),0 -6px 0 var(--text)}
@media (max-width: 768px){
  .top-nav{display:none !important}
  .hamburger{display:none !important}
}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter: blur(2px);z-index:109}
.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(85%, 320px);transform:translateX(100%);transition:transform .25s ease;z-index:110;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--panel);padding:calc(env(safe-area-inset-top) + 1rem) 1rem calc(env(safe-area-inset-bottom) + 1rem);display:flex;flex-direction:column;gap:.75rem}
.mobile-drawer a{min-height:44px;display:flex;align-items:center;padding:1rem;border-radius:10px;background:#0b121b;border:1px solid rgba(255,255,255,0.08);text-decoration:none;color:var(--text)}
.mobile-drawer.open{transform:translateX(0)}

/* Mobile: remove menu, enlarge logo */
@media (max-width: 768px){
  .brand{gap:.8rem;margin:.35rem auto}
  .logo-glow{width:20px;height:20px;box-shadow:0 0 22px var(--primary), 0 0 42px var(--accent)}
  .logo-text{font-size:1.6rem}
  /* ensure drawer never shows when menu removed */
  #mobile-drawer,#mobile-scrim{display:none !important}
}

/* Hide entire header on mobile */
@media (max-width: 768px){
  /* Hide nav controls but keep logo visible */
  .top-nav,.hamburger{display:none !important}
  .site-header{display:block !important;background:transparent;border:0;position:fixed;top:0;left:0;right:0;z-index:999}
  .header-inner{flex-direction:row !important;justify-content:flex-start !important;padding:.5rem .75rem}
  .brand{margin:.2rem 0; display:inline-flex !important; align-items:center; margin-left:.5rem}
  #mobile-drawer,#mobile-scrim{display:none !important}
  body{padding-top:56px}
}

/* Mobile logo animations */
@media (max-width: 768px){
  @keyframes pulseGlow{0%{box-shadow:0 0 12px var(--primary),0 0 20px var(--accent)}50%{box-shadow:0 0 16px var(--primary),0 0 28px var(--accent)}100%{box-shadow:0 0 12px var(--primary),0 0 20px var(--accent)}}
  .logo-glow{width:12px;height:12px;animation:pulseGlow 2.4s ease-in-out infinite}
  .brand{animation:none;}
  .logo-text{font-size:1.25rem}
}
@media (prefers-reduced-motion: reduce){
  .brand,.logo-glow{animation:none !important}
}

/* iOS Safari ensure header/logo visible */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px){
    .site-header{display:block !important; opacity:1 !important; visibility:visible !important}
    .header-inner{display:flex !important}
    .brand{display:inline-flex !important; visibility:visible !important}
    .logo-glow,.logo-text{display:inline-block !important}
  }
}

/* Preview toggle */
.outputs-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.preview-toggle{padding:.35rem .6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logo-glow{width:14px;height:14px;border-radius:999px;background: radial-gradient(circle at 30% 30%, var(--primary), var(--accent));box-shadow:0 0 18px var(--primary), 0 0 36px var(--accent)}
.logo-text{font-weight:700;letter-spacing:.2px}
.logo-text .dot{color:var(--accent)}
.top-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
.top-nav a:hover,.top-nav a:focus{color:var(--text)}

.hero{padding:3.5rem 0 1rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.hero h1{font-size:clamp(1.8rem, 2.5vw + 1rem, 3rem);margin:0}
.hero .sub{color:var(--muted);max-width:60ch}

.main .app{display:grid;grid-template-columns:1fr;gap:1.25rem;padding:1.2rem 0}
@media (min-width: 980px){.main .app{grid-template-columns: 1.05fr .95fr}}
@media (max-width: 768px){
  .main .app{grid-template-columns:1fr}
}

/* Mobile stacking and overlay fixes */
@media (max-width: 768px){
  .main .app{display:flex;flex-direction:column;align-items:stretch}
  .panel.inputs,.panel.outputs{position:relative !important;z-index:auto !important;margin:0}
  .panel.inputs{order:1}
  .panel.outputs{order:2;margin-top:1rem}
  .panel.outputs{margin-top:1rem}
  .outputs-heading,.toolbar{position:static !important}
  .output{overflow-x:hidden}
  body{overflow-x:hidden}
}

.panel{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:18px;box-shadow: 0 0 0 1px rgba(110,246,255,0.03), 0 10px 30px rgba(0,0,0,0.3);overflow:hidden}
@media (max-width: 600px){
  .panel{border-radius:24px}
}
.panel h2{font-size:1.1rem;margin:0;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.inputs form{padding:1rem 1rem 1.25rem}
@media (max-width: 600px){
  .inputs form{padding:0.75rem 0.85rem 1rem}
}
.field{display:flex;flex-direction:column;gap:.5rem}
.field + .field{margin-top:1rem}
.field-grid{display:grid;gap:1rem}
@media (min-width: 680px){.field-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){
  .field-grid{grid-template-columns:1fr;gap:.85rem}
  label{font-size:1rem}
  input, select, textarea{font-size:1rem}
}
.field-row{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
label{color:var(--muted);font-size:.95rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
/* ensure inline mini buttons in labels never collapse */
label .mini.autofill{display:inline-flex;flex-shrink:0;margin-left:auto}
input, select, textarea{width:100%;background:#0b121b;border:1px solid rgba(255,255,255,0.08);color:var(--text);border-radius:10px;padding:.75rem .9rem;outline:none}
input:focus, select:focus, textarea:focus{border-color:transparent;box-shadow:0 0 0 3px var(--ring)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label, .chip{display:inline-flex;align-items:center;gap:.4rem;background:#0b121b;border:1px solid rgba(255,255,255,0.08);padding:.45rem .7rem;border-radius:999px;color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"], .chip.active{color:#001b1f;background:linear-gradient(90deg, var(--primary), var(--accent));border-color:transparent}

.preset-bar{padding:1rem 1.25rem 0}
.preset-status{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}
.preset-status .tag{background:#0b121b;border:1px solid rgba(255,255,255,0.14);padding:.25rem .5rem;border-radius:999px;color:var(--ok)}
.linklike{background:transparent;border:0;color:var(--primary);text-decoration:underline;cursor:pointer}
.preset-actions{margin-top:.5rem}

.global-ai-bar{display:flex;align-items:center;gap:1rem;margin:1rem 0;justify-content:space-between}
@media (max-width: 600px){
  .global-ai-bar{justify-content:center}
}
.global-ai-bar .overwrite{display:flex;align-items:center;gap:.5rem;color:var(--muted)}

.mini.autofill{font-size:.8rem;line-height:1;background:transparent;color:var(--primary);border:1px solid rgba(110,246,255,0.4);border-radius:999px;padding:.25rem .5rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.mini.autofill[disabled]{opacity:.6;cursor:not-allowed}
.mini.autofill .spinner{width:10px;height:10px;border-radius:999px;border:2px solid rgba(110,246,255,.3);border-top-color:var(--primary);display:none}
.mini.autofill.loading .spinner{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.badge{align-self:flex-start;background:#0b121b;border:1px solid rgba(255,255,255,0.14);padding:.15rem .45rem;border-radius:999px;color:var(--ok);font-size:.75rem}

.actions{display:flex;gap:.75rem;margin-top:1rem}
.btn{appearance:none;border:0;border-radius:12px;padding:.7rem 1rem;font-weight:700;cursor:pointer;transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.btn.primary{color:#001b1f;background:linear-gradient(90deg, var(--primary), var(--accent));box-shadow:0 6px 20px rgba(110,246,255,.18)}
.btn.primary:hover{box-shadow:0 10px 26px rgba(110,246,255,.28)}
.btn.ghost{background:rgba(255,255,255,0.02);color:var(--text);border:1px solid rgba(255,255,255,0.14);backdrop-filter: blur(8px)}
.btn.ghost:hover{border-color:rgba(255,255,255,0.24);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.outputs{padding-bottom:.75rem}
@media (max-width: 768px){
  .outputs{position:static !important;margin-top:1rem}
}
.single-output{padding:1rem}
@media (max-width: 768px){
  .single-output{padding:.75rem}
}
.output{min-height:220px;background:#0b121b;border:1px dashed rgba(255,255,255,0.12);border-radius:14px;padding:1rem;line-height:1.6}
@media (max-width: 768px){
  .output{min-height:180px;border-radius:16px}
}
.toolbar{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin-bottom:.5rem}
@media (max-width: 600px){
  .toolbar{justify-content:center}
}
@media (max-width: 768px){
  .toolbar{position:static;padding:.35rem .35rem;border-radius:12px}
}

/* safe word wrapping */
.output{word-wrap:break-word;overflow-wrap:anywhere}

/* utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.no-scroll{position:fixed;width:100%;overflow:hidden}
.toolbar button{position:relative;overflow:hidden}
.toolbar .copy{background:transparent;border:1px solid rgba(255,255,255,0.14);color:var(--text);padding:.55rem .85rem;border-radius:10px;cursor:pointer}
.toolbar .copy:hover{border-color:rgba(255,255,255,0.28);box-shadow:0 0 0 3px rgba(255,255,255,0.05)}
.toolbar .copy:active{transform:scale(0.98)}

@keyframes pressPop{0%{transform:scale(1)}50%{transform:scale(.96)}100%{transform:scale(1)}}
.toolbar button.click-anim{animation:pressPop .16s ease}

.use-cases, .how, .faq{padding:2rem 0}
.pill-list{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.pill-list li{background:#0b121b;border:1px solid rgba(255,255,255,0.08);padding:.45rem .7rem;border-radius:999px;color:var(--muted)}

.suggestions{padding:0 1rem 1rem;color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,0.06);margin-top:2rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;color:var(--muted)}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;background:#0b121b;border:1px solid rgba(255,255,255,0.14);padding:.6rem .9rem;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:100;color:var(--text)}
.toast.error{border-color: rgba(255,107,155,0.6);color:var(--danger)}
.toast.success{border-color: rgba(125,255,176,0.6);color:var(--ok)}

/* small glow accents */
.panel::after{content:"";position:absolute;inset:auto auto -20px -20px;width:160px;height:160px;filter:blur(40px);background:radial-gradient(60% 60% at 50% 50%, rgba(110,246,255,.16), transparent 60%);pointer-events:none}

/* Human gate */
.gate{position:fixed;inset:0;background:radial-gradient(800px 600px at 10% 10%, rgba(154,107,255,.12), transparent 40%), radial-gradient(900px 700px at 90% 0%, rgba(110,246,255,.12), transparent 45%), rgba(0,0,0,.7);backdrop-filter: blur(6px);display:grid;place-items:center;z-index:200;padding:1rem}
.gate-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%), #0f1621;border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:1rem 1.1rem;max-width:520px;width:min(92%,520px);box-shadow:0 10px 40px rgba(0,0,0,.45);text-align:center}
.gate-card::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:18px;background:linear-gradient(90deg, var(--primary), var(--accent));filter:blur(10px);opacity:.25}
.gate-card h2{margin:.25rem 0 0.35rem}
.gate-card p{margin:.25rem 0}
.gate-actions{margin-top:.5rem}
.gate-meter{height:8px;background:#0b121b;border:1px solid rgba(255,255,255,0.12);border-radius:999px;overflow:hidden;position:relative;margin:.35rem 0}
.gate-meter::before{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,var(--primary),var(--accent));animation:meter 1.2s linear infinite}
@keyframes meter{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.gate-left{font-variant-numeric:tabular-nums}
.gate-task{margin:.75rem 0}
.hp{position:absolute;left:-9999px}
.gate-actions{display:flex;justify-content:flex-end}

/* additional styles for outlets and larger outputs */
.selectable .chip{user-select:none}
#outlets-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
#outlet-search{margin-top:.25rem}
.output{min-height:220px}
.counts{margin-right:auto;color:var(--muted);font-size:.85rem}

/* outlet accordions */
.outlet-accordions{margin-top:.75rem}
.outlet-accordions details{background:#0b121b;border:1px solid rgba(255,255,255,0.08);border-radius:10px;margin:.5rem 0}
.outlet-accordions summary{cursor:pointer;list-style:none;padding:.6rem .8rem;color:var(--text)}
.outlet-accordions summary::-webkit-details-marker{display:none}
.outlet-accordions .section{padding:.6rem .8rem;border-top:1px solid rgba(255,255,255,0.08)}
.outlet-accordions .section .chip{margin:.25rem}

.final-step{padding:1rem}
.final-step .muted{color:var(--muted);margin:.25rem 0 .75rem}

/* selection badges */
.selection-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.selection-badges .tag{background:#0b121b;border:1px solid rgba(255,255,255,0.14);padding:.25rem .5rem;border-radius:999px;color:var(--text)}

/* compact inline control near final step */
#length-row select{background:#0b121b;border:1px solid rgba(255,255,255,0.12);border-radius:10px}

/* final step accordions tweaks */
.final-step details{background:#0f121a;border:1px solid rgba(255,255,255,0.08);border-radius:10px;margin:.5rem 0}
.final-step summary{cursor:pointer;list-style:none;padding:.6rem .8rem;color:var(--text)}
.final-step summary::-webkit-details-marker{display:none}
.final-step .outlet-accordions{margin:0;padding:.6rem .8rem;border-top:1px solid rgba(255,255,255,0.08)}