body.with-site-announcement { flex-direction: column; }
.site-announcement { margin: 1rem auto; padding: .8rem 1rem; width: 100%; max-width: 72rem; box-sizing: border-box; overflow-wrap: anywhere; font-family: system-ui, sans-serif; }
.site-announcement[x-cloak], .site-announcement [x-cloak] { display: none !important; }
.site-announcement-notice { padding: .8rem 1rem; border: 1px solid #93c5fd; border-radius: .4rem; background: #eff6ff; color: #1e3a8a; white-space: pre-wrap; }
.site-announcement-warning { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.site-announcement-danger { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.site-announcement-error { font-size: .85rem; color: #78350f; }
.site-announcement button { margin-left: .5rem; }

.announcement-controls { margin: 1rem 0; padding: 1rem; border: 1px solid #cbd5e1; border-radius: .4rem; min-width: 0; }
.announcement-controls > label, .announcement-controls > div > label { display: block; margin-top: .7rem; }
.announcement-controls select, .announcement-controls input[type="datetime-local"] { max-width: 100%; padding: .5rem; }
.announcement-roles { display: flex; flex-wrap: wrap; gap: .8rem; margin: .7rem 0; }
.announcement-controls p { margin-top: .7rem; font-size: .9rem; }