:root {
  font-family: system-ui, -apple-system, sans-serif;
  color: #29332f;
  background: #f6f7f8;
  font-size: 15px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px max(24px, calc((100% - 1180px) / 2)); border-bottom: 1px solid #dfe3e0; }
.mark { display: grid; place-items: center; background: #9b3f33; color: #fff; border-radius: 8px; width: 34px; height: 37px; font-size: 23px; }
.environment { color: #526159; margin-inline-start: auto; font-size: 13.5px; text-align: right; }
main { max-width: 1228px; margin: auto; padding: 24px; }
h1 { font-size: 31px; margin: 0 0 16px; }
h2 { font-size: 19px; margin: 0 0 12px; }
.card { padding: 20px; background: white; border-radius: 16px; border: 1px solid #dfe3e0; }
#login { max-width: 480px; margin: 8vh auto; }
label { display: block; font-weight: 600; margin-bottom: 8px; }
textarea, input { width: 100%; border: 1px solid #bcc8c0; border-radius: 9px; padding: 10px; background: #fbfcfb; font: inherit; }
textarea { resize: vertical; min-height: 70px; }
button { font: inherit; cursor: pointer; border: 1px solid #9b3f33; border-radius: 9px; color: white; background: #9b3f33; padding: 8px 14px; min-height: 40px; }
button:disabled { opacity: .55; cursor: default; }
button.secondary { color: #345b4e; background: #f3f6f4; border-color: #d2ddd5; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
#login-form button { margin-top: 12px; }
.layout { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(0,1fr); gap: 16px; margin-top: 16px; align-items: start; }
.right { display: grid; gap: 16px; }
.section-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.state { font-size: 13px; color: #345b4e; }
ol, ul { padding: 0; margin: 0; list-style: none; }
#events { padding-right: 8px; }
#events li { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid #edf0ee; }
#events time, code { font-size: 12px; color: #526159; }
#events strong { display: block; font-size: 13.5px; font-weight: 600; }
#events p { margin: 2px 0 0; font-size: 13px; color: #526159; overflow-wrap: anywhere; }
#cancel, #resume { margin-top: 10px; }
dl { margin: 0; }
dl div { display: flex; gap: 12px; justify-content: space-between; margin-top: 6px; }
dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary { white-space: pre-wrap; line-height: 1.65; margin: 0 0 10px; overflow-wrap: anywhere; }
#sources li { padding-top: 5px; overflow-wrap: anywhere; }
#sources a { color: #345b4e; }
#notice { color: #9b3f33; margin: 12px 0; }
dialog { width: min(520px, calc(100% - 32px)); color: inherit; background: white; border: 1px solid #dfe3e0; border-radius: 16px; padding: 22px; }
dialog::backdrop { background: #29332f55; }
#model-form label { margin-top: 14px; }
#model-form .input-row { display: flex; align-items: center; gap: 8px; }
#model-form .input-row input { min-width: 0; }
#model-form button { flex-shrink: 0; }
#model-form .actions { flex-wrap: wrap; }
#model-form .help, #model-current { color: #526159; line-height: 1.6; overflow-wrap: anywhere; }
#model-message { color: #9b3f33; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } main { padding: 16px; } }