* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: #0b1220; color: #e5e7eb; }
header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#111827; border-bottom:1px solid #1f2937; gap: 12px; }
h1 { margin:0; font-size:20px; }
.controls { display:flex; gap:8px; align-items:center; }
label { display:flex; gap:6px; align-items:center; font-size:14px; }
input, textarea { background:#0b1220; color:#e5e7eb; border:1px solid #374151; border-radius:8px; padding:8px; width:100%; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
main { padding: 20px; display:grid; gap:24px; grid-template-columns: 1fr; max-width: 1250px; margin: 0 auto; }
section { background:#111827; border:1px solid #1f2937; border-radius:12px; padding:16px; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.actions, .actions-col { display:flex; gap:10px; flex-wrap: wrap; }
button { background:#2563eb; color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer; }
button:hover { background:#1d4ed8; }
.out { background:#0b1220; border:1px dashed #374151; padding:10px; border-radius:8px; max-height:280px; overflow:auto; }
.pill { background:#374151; padding:6px 10px; border-radius:999px; font-size:12px; }
.ok { background:#065f46 !important; }
.err { background:#7f1d1d !important; }
footer { padding: 12px 20px; color:#9ca3af; }
h3 { margin-top: 0; }