:root{
  --bg:#0f1720; 
  --card:#111827; 
  --accent:#06b6d4; 
  --muted:#9ca3af; 
  --text:#e6eef6;
}
*{box-sizing:border-box}
body{
  margin:0; 
  font-family:Inter, system-ui, Arial; 
  background:linear-gradient(180deg,#071123 0%,#061426 100%); 
  color:var(--text);
  display:flex; 
  align-items:center; 
  justify-content:center; 
  min-height:100vh; 
  padding:30px;
}
.wrap{
  width:900px; 
  max-width:96%; 
  background:var(--card); 
  border-radius:12px; 
  padding:20px; 
  box-shadow:0 6px 30px rgba(2,6,23,.7);
}
h1{margin:0 0 14px 0; font-size:26px; text-align:center;}

.controls{
  display:flex; 
  gap:8px; 
  align-items:center; 
  margin-bottom:10px;
}
#prompt{
  flex:1; 
  padding:10px 12px; 
  border-radius:8px; 
  border:1px solid rgba(255,255,255,.06); 
  background:#0b1220; 
  color:var(--text);
}
select, button{
  padding:10px 12px; 
  border-radius:8px; 
  border:none; 
  cursor:pointer; 
  background:var(--accent); 
  color:#021018; 
  font-weight:600;
}
#newBtn, #copyBtn{
  background:#2b3340; 
  color:var(--text);
}

.meta{
  font-size:13px; 
  color:var(--muted); 
  margin-bottom:8px;
}

.output{
  background:#08121b; 
  border-radius:10px; 
  padding:18px; 
  min-height:200px; 
  line-height:1.7; 
  white-space:pre-wrap; 
  font-size:16px; 
  border:1px solid rgba(255,255,255,.03);
  max-height:70vh; 
  overflow-y:auto;
}

button:active{transform:translateY(1px)}
@media (max-width:520px){
  .controls{flex-direction:column; align-items:stretch}
  select, button{width:100%}
}