:root { font-family: system-ui, sans-serif; color: #172235; background: #f5f7fa; }
* { box-sizing: border-box; }
body { max-width: 1060px; margin: auto; padding: 24px; }
header, nav, .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
header h1 { margin-right: auto; font-size: 24px; }
nav { margin: 18px 0; }
.card { background: white; border: 1px solid #dbe1e8; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
h2 { margin-top: 0; }
.row h2 { margin: 0 auto 0 0; }
label { display: block; margin: 14px 0; font-weight: 600; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #a7b1c0; border-radius: 5px; font: inherit; }
input:not([type=file]), select { max-width: 480px; }
textarea { font-family: ui-monospace, monospace; font-size: 13px; }
#user-instructions, #profile-instructions, #batch-instructions {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #172235;
  background: #fbfcfe;
  padding: 16px 18px;
  border: 1px solid #b7c3d3;
  border-radius: 8px;
  min-height: 180px;
  resize: vertical;
}
#user-instructions { min-height: 360px; }
#user-instructions:focus, #profile-instructions:focus, #batch-instructions:focus {
  background: white;
  border-color: #3467a1;
  outline: 3px solid #dce8f6;
  outline-offset: 1px;
}
#user-instructions::placeholder, #profile-instructions::placeholder, #batch-instructions::placeholder {
  color: #64748b;
  opacity: 1;
}
button { padding: 9px 14px; border: 1px solid #b7c3d3; border-radius: 5px; background: #f4f7fb; color: #173354; cursor: pointer; font: inherit; }
button:hover { background: #e7eef8; }
button:disabled { opacity: .55; cursor: default; }
nav button[aria-current=page], button[type=submit] { background: #173b68; color: white; }
.item { padding: 14px 0; border-bottom: 1px solid #e0e6ed; }
.item button, .item a { margin-left: 10px; }
.muted { color: #526175; font-size: 14px; }
#message { white-space: pre-wrap; }
.error { color: #a32121; }
#profile-editor { margin-top: 26px; border-top: 1px solid #dbe1e8; padding-top: 22px; }
#profile-preview { line-height: 1.6; overflow-wrap: anywhere; }
#profile-preview ul { padding-left: 24px; }
#profile-preview p { white-space: pre-wrap; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f5f7fa; padding: 12px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { body { padding: 12px; } .card { padding: 16px; } }