/* Keep the original dark terminal style */
:root{
  --bg:#000;
  --ink:#eaeaea;
  --muted:#9aa4aa;
  --accent:#ffb703;
  --card:#0a0a0a;
  --line:#1c1c1c;
  --glow:0 0 8px var(--accent),0 0 18px var(--accent);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"VT323",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:.3px;
  overflow-x:hidden;
}

/* sensible defaults */
img{ max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:var(--glow);
}

.scanlines{
  pointer-events:none;
  position:fixed; inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02),rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay; opacity:.35;
}

/* sticky header stays on top */
.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0;
  backdrop-filter:blur(6px); background:rgba(0,0,0,.6);
  z-index:50;
}
.brand{ display:flex; align-items:center; gap:10px; font-size:24px }
.brand .logo{ width:32px; height:32px }
.brand-text{ color:var(--ink) }
.nav .btn{ margin-left:10px }

.hero{
  max-width:1100px; margin:24px auto; padding:12px 20px; text-align:center;
}
.banner{
  width:100%; max-width:900px; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 0 0 1px #0f0f0f inset;
}
.type{ font-size:46px; margin:18px 0 6px; text-transform:lowercase; }
.type .prompt{ color:var(--accent); margin-right:10px; text-shadow:var(--glow) }
.type .cursor{
  display:inline-block; width:10px; height:1em; background:var(--accent);
  animation:blink 1s steps(1) infinite; vertical-align:-4px; margin-left:6px; box-shadow:var(--glow);
}
@keyframes blink{ 50%{opacity:0} }
.sub{ color:var(--muted); margin:0 0 14px }
.cta{ display:flex; gap:12px; justify-content:center; }

.grid{
  display:grid; gap:18px; grid-template-columns:1fr 1fr;
  max-width:1100px; margin:12px auto 60px; padding:0 20px;
}
.panel{
  border:1px solid var(--line); background:linear-gradient(180deg,#0a0a0a,#050505);
  border-radius:12px; padding:16px; box-shadow:0 0 0 1px #0f0f0f inset;
}
.panel h2{ margin:0 0 10px; font-size:28px }
.prefix{ color:var(--accent); text-shadow:var(--glow) }

.row{ margin-bottom:12px }
.row.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.row.two > div{ min-width:0 }
.row label{ display:block; margin-bottom:6px; color:var(--muted) }

.input{
  width:100%; background:#050505; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  outline:none; transition:all .2s ease;
}
.input:focus{ border-color:var(--accent); box-shadow:var(--glow); background:#080808 }
.area{ min-height:108px; resize:vertical }

.checks{ display:flex; flex-wrap:wrap; gap:10px }
.checks label{
  border:1px dashed var(--line); padding:6px 10px; border-radius:8px; cursor:pointer;
}
.checks input{ accent-color:var(--accent) }
/* kecil tapi berguna: highlight kalau tercentang */
.checks label:has(input:checked){
  border-color:var(--accent);
  background:#0b0b0b;
}

.actions{ display:flex; gap:10px; flex-wrap:wrap }

.btn{
  border:1px solid var(--line); border-radius:10px; padding:10px 14px;
  background:#0c0c0c; color:var(--ink); font-size:18px; transition:all .2s ease;
}
.btn:hover{ transform:translateY(-1px) scale(1.01) }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; filter:none; }
.btn.neon{
  border-color:var(--accent); color:#111; background:var(--accent); box-shadow:var(--glow);
}
.btn.neon:hover{ filter:brightness(1.08) }
.btn.outline{ background:transparent; color:var(--accent); border-color:var(--accent) }
.btn.outline:hover{ box-shadow:var(--glow) }
.btn.ghost{ background:#0a0a0a; color:var(--muted) }
.btn.ghost:hover{ color:var(--ink); border-color:#333 }

#preview iframe{
  display:block;
  width:100%; height:520px;
  background:#111; border:1px solid var(--line); border-radius:10px;
}

/* footer */
.footer{
  max-width:1100px; margin:0 auto 50px; padding:10px 20px; color:var(--muted);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-top:1px solid var(--line);
}
.footer .logo.sm{ width:22px; height:22px; vertical-align:middle; margin-right:6px }
.footer-links{ display:flex; gap:14px }
.footer .f{ color:var(--muted); text-decoration:none; border-bottom:1px dashed #333 }
.footer .f:hover{ color:var(--ink); border-bottom-color:var(--accent) }

/* responsive */
@media (max-width:980px){
  .grid{ grid-template-columns:1fr }
  #preview iframe{ height:440px }
  .row.two{ grid-template-columns:1fr }
}

/* animated gradient text for generated hero */
.moving{
  background:linear-gradient(90deg,#fff,var(--accent),#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%;
  animation:movegrad 6s linear infinite;
}
@keyframes movegrad{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* status & link */
.linkrow input{ font-size:16px }
.statusline{ margin-top:6px; min-height:18px; color:var(--muted); font-size:16px }

/* respect user motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}