/* Glow aesthetic with clean layout */
:root{
  --bg: #0b0f1a;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent1: 180deg, rgba(99,102,241,0.5), rgba(16,185,129,0.5);
  --accent2: 320deg, rgba(236,72,153,0.5), rgba(59,130,246,0.5);
  --ring: rgba(99,102,241,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(99,102,241,0.12), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(16,185,129,0.10), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(236,72,153,0.10), transparent 40%),
    var(--bg);
}
#app{max-width:1200px; margin:0 auto; padding:24px;}

.header{ text-align:center; margin-bottom:16px}
.title{ font-size:36px; margin:0; text-shadow:0 0 16px rgba(99,102,241,0.6)}
.tagline{ color:var(--muted)}

.panel{ margin-top:16px}
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 900px){
  .grid.two{ grid-template-columns:1fr}
}

.card{
  background: linear-gradient(var(--accent1)), linear-gradient(var(--accent2)), var(--panel);
  background-blend-mode: screen, screen, normal;
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 24px rgba(99,102,241,0.25), inset 0 0 24px rgba(59,130,246,0.12);
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.card-head h2{ margin:0; font-size:20px}

textarea#codeInput{
  width:100%; min-height:220px; resize:vertical;
  background:#0b1220; color:var(--text); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  outline:none; box-shadow: inset 0 0 12px rgba(99,102,241,0.25);
}
.controls{ display:flex; align-items:center; gap:8px; margin:8px 0 0 0; flex-wrap:wrap}
label{ color:var(--muted)}
select, .btn{
  border-radius:10px; border:1px solid rgba(255,255,255,0.1);
  background:#0e1424; color:var(--text); padding:8px 12px; cursor:pointer
}
.btn.primary{ background: linear-gradient(90deg, rgba(99,102,241,0.8), rgba(59,130,246,0.8)); border-color:transparent}
.btn.ghost{ background: rgba(255,255,255,0.04)}

.hint{ color:var(--muted); font-size:12px; margin-top:8px}

iframe#preview{
  width:100%; height:300px; background:#0b1220; border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; box-shadow: inset 0 0 12px rgba(99,102,241,0.2);
}

.explain{ margin-top:8px}
.progress{ height:8px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; margin-bottom:12px}
#progressBar{ height:100%; width:0%; background:linear-gradient(90deg, rgba(16,185,129,0.9), rgba(59,130,246,0.9)); box-shadow:0 0 12px rgba(59,130,246,0.8)}

#explainView{ background:#0b1220; border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:12px; min-height:120px}
#explainView .line{ display:flex; align-items:flex-start; gap:8px; padding:8px; border-radius:8px; margin:6px 0}
#explainView .line.active{ background: rgba(59,130,246,0.15); box-shadow: inset 0 0 12px rgba(99,102,241,0.25) }
#explainView code{ white-space:pre-wrap; word-break:break-word; color:#c7d2fe}
#explainView .explanation{ color:#e5e7eb}

.sources{ margin-top:8px; font-size:13px; color:var(--muted)}
.sources a{ color:#93c5fd; text-decoration:none }
.sources a:hover{ text-decoration:underline }

.footer{ text-align:center; color:var(--muted); margin-top:24px}