:root{
  --bg:#f6f7f8;
  --panel:#ffffff;
  --muted:#666;
  --accent:#1268d6;
  --danger:#d13b3b;
  --radius:12px;
}

*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
html,body,#app{height:100%;margin:0;background:var(--bg);}
body{display:flex;align-items:center;justify-content:center;padding:18px;}

.panel{
  width:100%;
  max-width:720px;
  background:var(--panel);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 6px 20px rgba(10,20,30,0.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:320px;
}

/* textarea */
textarea{
  width:100%;
  resize:none;
  border-radius:10px;
  border:1px solid #e6e9ee;
  padding:12px;
  font-size:16px;
  line-height:1.4;
  min-height:120px;
  background:transparent;
}

/* controls row */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.control{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);flex:1;min-width:120px;}
.control select, .control input[type="range"]{width:100%;}

/* buttons */
.buttons{justify-content:flex-end;}
button{
  min-width:56px;
  min-height:44px;
  border-radius:10px;
  border:0;
  padding:8px 12px;
  font-weight:600;
  background:#f1f3f6;
  color:#0b1220;
  cursor:pointer;
}
button.primary{background:var(--accent);color:white;}
button:active{transform:translateY(1px);}
#status{font-size:13px;color:var(--muted);margin-top:4px}
@media (max-width:520px){
  .panel{padding:12px;}
  .row{gap:8px;}
  .buttons{flex-wrap:wrap;gap:8px;}
}