#avatar { position: relative; }
#avatar[data-load-busy='true']::before { content:''; position:absolute; inset:-4px; border:2px solid #d7dde3; border-top-color:#e89422; border-right-color:#e89422; border-radius:50%; animation:background-ring 1s linear infinite; }
#avatar[data-load-unread='true']::after { content:''; position:absolute; width:9px; height:9px; right:-3px; top:-3px; border-radius:50%; background:#f39818; border:2px solid #fff; }
@keyframes background-ring { to { transform:rotate(360deg); } }
#background-load-panel { display:flex; flex-direction:column; position:absolute; right:calc(100% + 8px); top:0; box-sizing:border-box; width:360px; max-height:calc(100dvh - var(--background-panel-top,94px) - 16px); padding:12px; background:#fff; border:1px solid #d8e2ed; border-radius:12px; box-shadow:0 12px 36px #24324724; color:#334155; text-align:left; font-family:system-ui; }
#background-load-panel::after { content:''; position:absolute; left:100%; top:0; height:100%; width:12px; }
#background-load-panel .background-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
#background-load-panel h2 { font:650 .9rem system-ui; margin:0; }
#background-load-panel .background-active-count { display:grid; place-items:center; min-width:24px; height:24px; border:1px solid #d4e0ed; border-radius:8px; background:#edf3fa; color:#385f83; font-size:.72rem; font-variant-numeric:tabular-nums; }
#background-load-panel .background-explanation { font-size:.71rem; line-height:1.45; color:#64748b; margin:0 0 10px; padding:8px 10px; border-radius:7px; background:#f3f7fb; }
#background-load-panel :is(.background-panel-heading,.background-explanation,.background-panel-actions) { flex-shrink:0; }
.background-job-list { flex:0 1 auto; min-height:0; max-height:min(340px,38vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
body header #background-load-panel a.background-job { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:5px 8px; padding:10px; margin:0 0 6px; font:400 .74rem/1.45 system-ui; color:#334155; letter-spacing:0; text-decoration:none; border:1px solid #e1e8f0; border-left:3px solid #b6c4d5; border-radius:8px; background:#fff; box-shadow:none; }
body header #background-load-panel a.background-job:hover,body header #background-load-panel a.background-job:focus-visible { background:#f2f6fb; border-color:#a8bdd7; color:#243b56; }
.background-job strong { font-weight:600; overflow-wrap:anywhere; }
.background-job .background-job-status { grid-column:1/-1; justify-self:start; padding:2px 6px; border-radius:5px; background:#eef2f7; font-size:.68rem; color:#52667c; }
body header #background-load-panel a.background-ready { border-left-color:#6c9e82; }
body header #background-load-panel a.background-error { border-left-color:#c98080; }
.background-job.background-ready .background-job-status { color:#35674b; background:#edf6f0; }
.background-job.background-error .background-job-status { color:#a13b36; background:#fff0ef; }
.background-job .background-failure { font-size:.68rem; line-height:1.4; color:#a62c23; }
.background-job .background-priority { grid-column:1/-1; font-size:.65rem; color:#385f77; }
.background-job .background-failure,.background-job .background-finished { grid-column:1/-1; }
.background-job .loading-state::before { width:45px; height:5px; }
body header #background-load-panel .background-panel-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:6px; margin-top:9px; padding-top:9px; border-top:1px solid #e6edf4; }
body header #background-load-panel .background-panel-actions button { display:inline-flex; width:auto; flex:0 1 auto; min-height:30px; padding:5px 8px; border:1px solid #d7e1ed; border-radius:6px; background:#f8fafc; color:#52667c; box-shadow:none; transform:none; font:500 .7rem/1.35 system-ui; }
body header #background-load-panel .background-panel-actions button:hover { background:#eaf1f8; color:#243b56; border-color:#aac0d9; }
#background-load-panel [data-load-rules]::after { content:' +'; }
#background-load-panel [data-load-rules][aria-expanded=true]::after { content:' −'; }
#background-load-panel .background-load-rules { flex:0 1 auto; min-height:0; max-height:min(260px,30vh); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; margin-top:8px; padding:8px 10px; border:1px solid #e1e8f0; border-radius:8px; background:#f8fafc; font-size:.71rem; line-height:1.5; color:#52667c; }
#background-load-panel .background-load-rules[hidden] { display:none; }
#background-load-panel .background-load-rules ul { margin:0; padding-left:16px; }
#background-load-panel .background-load-rules li+li { margin-top:7px; }
#background-load-panel .background-empty { margin:0; padding:14px 10px; border:1px dashed #d6e1ed; border-radius:8px; background:#fafcfe; font-size:.74rem; color:#64748b; }
.background-job .background-finished { font-size:.65rem; color:#697585; }
.background-load-hint { display:inline-block; font:400 .68rem/1.35 system-ui; color:#697585; margin-left:.45rem; }
.device-screen .background-load-hint { color:#c9cec9; }
[data-dashboard-loader] { flex:0 1 auto; text-align:right; font-size:.68rem; min-width:65px; }
[data-dashboard-loader][hidden] { display:none !important; }
[data-dashboard-loader] .loading-bar { width:62px; height:5px; margin:0; vertical-align:middle; }
.dashboard-page { display:flex; flex-direction:column; gap:12px; }
.dashboard-page > .dashboard-status:empty, .dashboard-page > .dashboard-footnote:empty { display:none; }
.dashboard-page > .dashboard-heading, .dashboard-page > .dashboard-footnote { margin:0; }
.dashboard-page .dashboard-hero, .dashboard-page .dashboard-pair, .dashboard-page .dashboard-three, .dashboard-page .dashboard-kpis { gap:12px; }
.dashboard-panel { margin:0; }
.dashboard-kpis > div > [data-dashboard-loader] { grid-column:1 / -1; }
@media(min-width:1151px){ .dashboard-page .dashboard-hero { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px){ #background-load-panel { right:0; top:100%; width:min(360px,calc(100vw - 32px)); max-height:calc(100dvh - var(--background-panel-top,304px) - 16px); margin-top:6px; } #background-load-panel::after { left:0; top:-10px; height:12px; width:100%; } }
@media(prefers-reduced-motion:reduce){ #avatar[data-load-busy='true']::before { animation-duration:4s; } }