:root{
  --bg: #05060f;
  --panel: rgba(17,20,40,0.72);
  --text: #edf2ff;
  --accent: #7dd3fc;
  --glow: 0 0 24px rgba(125,211,252,0.24), 0 0 64px rgba(56,189,248,0.16);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% -20%, #1e293b 0, transparent 60%),
    radial-gradient(800px 500px at 110% 20%, #0b132b 0, transparent 60%),
    linear-gradient(180deg, #030712, #0b1020 60%);
  min-height:100vh;
}

.header{
  padding:24px clamp(16px, 2vw, 28px);
  text-align:center;
}
.header h1{
  margin:0;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing:0.5px;
  text-shadow: var(--glow);
}
.by{opacity:0.75}
.tagline{opacity:0.8;margin-top:6px}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
  padding: clamp(12px, 2vw, 24px);
}

.panel{
  background: var(--panel);
  border: 1px solid rgba(125,211,252,0.24);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--glow);
  overflow:hidden;
}

.panel h2{
  margin:0 0 12px 0;
  font-size:18px;
  opacity:0.9;
}

.paste textarea{
  width:100%;
  height:260px;
  background: rgba(2,6,23,0.6);
  color: var(--text);
  border:1px solid rgba(125,211,252,0.24);
  border-radius:12px;
  padding:12px;
  resize:vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  box-shadow: inset 0 0 24px rgba(56,189,248,0.08);
}

.controls-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:10px;
}

.btn{
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  box-shadow: var(--glow);
}
.btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.explainBox{
  background: rgba(2,6,23,0.5);
  border:1px solid rgba(56,189,248,0.25);
  border-radius:12px;
  padding:12px;
  min-height:220px;
}
.lineHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
#currentLine{font-size:14px}
.pill{
  font-size:12px;
  background: linear-gradient(135deg, #34d399, #10b981);
  padding:6px 10px;
  border-radius:999px;
  opacity:0.9;
}

.explainText{opacity:0.95;line-height:1.5;margin-bottom:10px}
.suggestions{display:flex;flex-wrap:wrap;gap:8px}
.suggestion{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,0.3);
  background: rgba(13,20,40,0.6);
  cursor:pointer;
}
.suggestion:hover{outline:2px solid rgba(125,211,252,0.6)}

.preview iframe{
  width:100%;
  height:320px;
  border:none;
  border-radius:12px;
  background:white;
  box-shadow: inset 0 0 24px rgba(56,189,248,0.08);
}

#progress{
  height:8px;
  width:100%;
  background: rgba(56,189,248,0.12);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:10px;
}
#progress .bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #38bdf8, #60a5fa, #818cf8);
  transition: width 300ms ease;
}

.footer{opacity:0.7;text-align:center;padding:16px}

@media (max-width: 1100px){
  .grid{grid-template-columns:1fr; }
  .preview iframe{height:380px}
}