:root { --blue:#003A80; --grey:#7B7C7E; --light:#F3F5F8; --line:#D5D9DF; --text:#1F2937; --ok:#14663A; --err:#9B1C1C; --warn:#8A4B00; }
* { box-sizing: border-box; }
html { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; color: var(--text); }
body { margin: 0; background: #fff; line-height: 1.45; }
.top { background: var(--blue); color: #fff; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.brand { font-weight: bold; font-size: 1.1rem; } .brand span { font-weight: normal; opacity: .85; margin-left: 8px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.top a, .top button.link { color: #fff; background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
main { max-width: 1280px; margin: 0 auto; padding: 16px; }
h1 { color: var(--blue); font-size: 1.5rem; margin: 8px 0 12px; } h2 { color: var(--blue); font-size: 1.2rem; border-bottom: 2px solid var(--blue); padding-bottom: 4px; margin: 28px 0 12px; } h3 { font-size: 1rem; color: var(--blue); margin: 16px 0 6px; }
a { color: var(--blue); } .muted { color: var(--grey); } .small { font-size: .8rem; } .err { color: var(--err); }
table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: .9rem; }
th, td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { background: var(--light); } table.kv th { width: 260px; }
.tablewrap { overflow-x: auto; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; border: 1px solid var(--grey); color: var(--grey); background: #fff; margin: 1px 0; }
.pill.ok, .pill.mail-sent, .pill.job-succeeded, .pill.ai-ok, .pill.mode-real { border-color: var(--ok); color: var(--ok); }
.pill.error, .pill.job-dead, .pill.mail-failed, .pill.mail-unknown, .pill.mail-blocked, .pill.ai-failed, .pill.ai-invalid_output { border-color: var(--err); color: var(--err); font-weight: bold; }
.pill.mode-demo, .pill.ai-preview, .pill.ai-not_configured, .pill.mail-previewed { border-color: var(--warn); color: var(--warn); }
.flash { padding: 8px 12px; border-left: 4px solid var(--blue); background: var(--light); margin: 8px 0; }
.flash.error { border-color: var(--err); color: var(--err); background: #FDF2F2; }
.banner-warn { border: 1px dashed var(--warn); background: #FFFBF5; padding: 6px 10px; color: var(--warn); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.stack label, .inline-form label { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 10px 0; }
.inline { display: inline; } form.inline-form.danger { border-top: 1px solid var(--line); padding-top: 10px; }
label.check { flex-direction: row !important; align-items: flex-start; gap: 8px !important; }
input, select, textarea { font: inherit; padding: 5px 8px; border: 1px solid var(--grey); border-radius: 3px; max-width: 100%; }
textarea { width: 100%; }
fieldset { border: 1px solid var(--line); padding: 8px 12px; }
button { font: inherit; padding: 5px 12px; border: 1px solid var(--blue); background: #fff; color: var(--blue); border-radius: 3px; cursor: pointer; }
button.primary { background: var(--blue); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.narrow { max-width: 380px; margin: 40px auto; }
.foot { text-align: center; color: var(--grey); font-size: .8rem; padding: 24px; }
.events { padding-left: 18px; font-size: .85rem; } pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--light); padding: 8px; }
tr.st-invalid td { background: #FDF2F2; } tr.st-irrelevant td { color: var(--grey); }
section { scroll-margin-top: 8px; }
@media (max-width: 700px) { main { padding: 8px; } table.kv th { width: auto; } }
@media print { .top, .tabs, .foot, form { display: none; } }
td.nw { white-space: nowrap; }