:root { color-scheme: light; --pico-background-color:#fff; --pico-color:#202b31; --pico-primary:#087e80; --pico-primary-hover:#056265; --pico-primary-background:#087e80; --pico-primary-border:#087e80; --pico-border-radius:6px; --pico-form-element-background-color:#fff; --pico-form-element-border-color:#b6c3c7; --pico-muted-color:#54646b; }
html { background:#f5f7f8; }
body { max-width:1560px; min-height:100dvh; padding:24px; background:#f5f7f8; color:#202b31; font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif; }
h1,h2,h3,h4,p,span,button,input,select,textarea { letter-spacing:0; }
#main-page { display:grid; grid-template-columns:184px minmax(0,1fr); gap:24px; }
#main-page > header { grid-column:1/-1; border-bottom:1px solid #cbd4d8; padding-bottom:20px; flex-wrap:wrap; gap:12px; }
#main-page > header h2 { font-size:22px; color:#202b31; }
#main-page > header h2 small { font-size:14px; font-weight:400; color:#54646b; margin-left:10px; }
#main-page > [id^="tab-"] { grid-column:2; grid-row:2; min-width:0; }
nav.tabs { grid-column:1; grid-row:2; align-self:start; display:block; margin:0; }
nav.tabs ul { display:flex; flex-direction:column; align-items:stretch; margin:0; padding:0; gap:4px; }
nav.tabs li { padding:0; list-style:none; }
nav.tabs a { display:block; margin:0; padding:11px 14px; color:#45555d; text-decoration:none; border-radius:6px; }
nav.tabs a[aria-current] { background:#deeeee; color:#075c5e; font-weight:600; }
nav.tabs a:hover { background:#e8edef; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.section-heading h3 { margin:0; font-size:22px; }
.section-kicker { margin:0 0 4px; font-size:13px; color:#54646b; }
.section-heading button, .search-bar button { margin-bottom:0; }
.search-bar label { margin:0; min-width:180px; font-size:13px; }
.search-bar label select { margin:4px 0 0; width:100%; }
.search-bar { align-items:end; }
.table-scroll { overflow-x:auto; width:100%; }
.table-scroll table { min-width:850px; }
.table-scroll td:first-child { min-width:160px; max-width:280px; }
.toast-ok { background:#18754a; }
.toast-err { background:#b72838; }
table { width:100%; background:#fff; border:1px solid #d5dde0; }
th { white-space:nowrap; color:#45555d; background:#eef2f3; }
td { vertical-align:middle; overflow-wrap:anywhere; }
td .subtle { display:block; color:#54646b; font-size:12px; margin-top:4px; }
.status { display:inline-block; padding:3px 7px; border-radius:4px; font-size:12px; white-space:nowrap; background:#e7ecef; color:#40525c; }
.status-published { background:#dcefe8; color:#1c5b46; }
.status-scheduled { background:#e1edf8; color:#245778; }
.status-expired,.status-withdrawn { background:#ececee; color:#555561; }
.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-block:1px solid #cbd4d8; margin:0 0 32px; padding:24px 0; }
.metrics div { padding:0 16px; border-right:1px solid #d5dde0; }
.metrics div:last-child { border:0; }
.metrics dt { font-size:13px; color:#54646b; }
.metrics dd { margin:8px 0 0; font-size:28px; font-weight:600; color:#202b31; }
.quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.quick-links a { padding:18px 0; border-bottom:1px solid #cbd4d8; text-decoration:none; font-weight:600; }
.quick-links span { display:block; font-size:13px; color:#54646b; font-weight:400; margin-top:6px; }
dialog#announcement-dialog { padding:0; border:1px solid #b6c3c7; border-radius:8px; width:min(760px,calc(100% - 24px)); min-width:0; min-height:0; height:fit-content; max-height:calc(100dvh - 32px); overflow:auto; background:#fff; color:#202b31; }
dialog#announcement-dialog:not([open]) { display:none; }
dialog#announcement-dialog[open] { display:block; position:fixed; inset:0; margin:auto; }
dialog::backdrop { background:rgba(25,35,39,.45); }
#announcement-form { padding:24px; margin:0; }
#announcement-form input,#announcement-form textarea,#announcement-form select { margin-top:6px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.announcement-preview { border-top:1px solid #d5dde0; padding-top:18px; margin-top:6px; }
.announcement-preview h4 { font-size:18px; overflow-wrap:anywhere; }
#announcement-preview-content { white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:auto; }
#announcement-error { color:#a12536; }
.editor-actions { display:flex; gap:12px; justify-content:flex-end; }
.editor-actions button { margin:0; width:auto; min-width:110px; }
.notice-error { color:#a12536; }
@media(max-width:900px) { body { padding:16px; } #main-page { grid-template-columns:1fr; gap:16px; } nav.tabs { grid-row:2; overflow-x:auto; } nav.tabs ul { flex-direction:row; width:max-content; } nav.tabs a { white-space:nowrap; } #main-page > [id^="tab-"] { grid-row:3; grid-column:1; } .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 0; } }
@media(max-width:520px) { .form-grid,.quick-links { grid-template-columns:1fr; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .section-heading h3 { font-size:20px; } #header-user { display:block; overflow-wrap:anywhere; } #main-page > header button { margin-left:0 !important; } .search-bar label { width:100%; } }