body { margin: 0; color: #172033; background: #f5f7fb; font: 14px system-ui, sans-serif; }
main { max-width: 1180px; margin: 32px auto; padding: 0 20px; }
section { margin: 20px 0; padding: 18px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px #dfe4ef; }
table { width: 100%; border-collapse: collapse; } th, td { padding: 9px; text-align: left; border-bottom: 1px solid #e5e9f2; }
form { display: grid; gap: 12px; max-width: 560px; } label { display: grid; gap: 5px; } input, textarea { padding: 8px; border: 1px solid #b9c3d5; border-radius: 4px; } textarea { min-height: 80px; }
button { width: max-content; padding: 8px 18px; color: #fff; border: 0; border-radius: 4px; background: #1769e0; cursor: pointer; } pre { overflow: auto; white-space: pre-wrap; }
.hint { color: #58657d; } .error { color: #b42318; }
.command-section { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
dialog { width: min(560px, calc(100% - 32px)); border: 0; border-radius: 8px; box-shadow: 0 12px 36px rgb(23 32 51 / 28%); }
dialog::backdrop { background: rgb(23 32 51 / 45%); }
.command-form { max-width: none; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; } .dialog-heading h2 { margin: 0; }
.close-button { padding: 0 8px; color: #58657d; background: transparent; font-size: 26px; line-height: 1; }
.dialog-actions { display: flex; gap: 10px; } button.secondary { color: #172033; background: #e7ebf2; }
select { padding: 8px; border: 1px solid #b9c3d5; border-radius: 4px; background: #fff; color: inherit; }