*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#0b1020;color:#fff}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{padding:28px;background:linear-gradient(180deg,#111936,#070b17);border-right:1px solid #26304f}
.sidebar h1{font-size:24px;margin:0 0 10px}
.sidebar p{color:#b7c0d8;line-height:1.5}
.nav,.back{display:inline-block;margin-top:18px;color:#fff;background:#2563eb;text-decoration:none;padding:12px 16px;border-radius:14px}
.hint{margin-top:24px;background:#141d3a;padding:16px;border-radius:16px;color:#cbd5e1;line-height:1.5}
.main{padding:24px}
.panel{background:#111936;border:1px solid #26304f;border-radius:20px;padding:20px;margin-bottom:20px}
label{display:block;font-weight:700;margin-bottom:10px}
textarea,input{width:100%;background:#070b17;color:#fff;border:1px solid #334155;border-radius:14px;padding:14px;font-size:15px;outline:none}
#prompt{min-height:120px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
button{border:0;background:#22c55e;color:#03110a;padding:12px 18px;border-radius:14px;font-weight:800;cursor:pointer}
button.ghost{background:#1e293b;color:#fff}
button.danger{background:#ef4444;color:#fff}
#status{margin-top:12px;color:#facc15;white-space:pre-wrap}
.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.codebox,.previewbox{background:#111936;border:1px solid #26304f;border-radius:20px;overflow:hidden}
.bar{padding:12px 16px;background:#17213f;color:#cbd5e1;font-weight:700}
#code{height:620px;border:0;border-radius:0;font-family:Consolas,monospace;resize:vertical}
iframe{width:100%;height:620px;border:0;background:#fff}
.settings{max-width:760px;margin:40px auto;background:#111936;border:1px solid #26304f;border-radius:20px;padding:28px}
.settings h1{margin-top:0}
.settings p{color:#b7c0d8}
.settings input,.settings textarea{margin-bottom:16px}
.success{background:#064e3b;color:#bbf7d0;padding:12px;border-radius:12px;margin-bottom:14px}
.error{background:#7f1d1d;color:#fecaca;padding:12px;border-radius:12px;margin-bottom:14px}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .workspace{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:1px solid #26304f}
}