#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 { position:absolute; right:calc(100% + 8px); top:0; box-sizing:border-box; width:310px; padding:12px; background:#fffdf8; border:1px solid #c9c4b8; border-radius:8px; box-shadow:0 8px 24px #24324725; color:#243247; text-align:left; }
#background-load-panel::after { content:''; position:absolute; left:100%; top:0; height:100%; width:12px; }
#background-load-panel h2 { font:700 .85rem system-ui; margin:0 0 5px; }
#background-load-panel .background-explanation { font-size:.7rem; line-height:1.4; color:#6b7380; margin:0 0 9px; }
.background-job-list { max-height:310px; overflow-y:auto; }
body header #background-load-panel a.background-job { display:grid; gap:5px; padding:8px; margin-bottom:5px; font:400 .74rem system-ui; color:#243247; letter-spacing:0; text-decoration:none; border:1px solid #e4e5e7; border-radius:5px; background:#fff; }
body header #background-load-panel a:hover { background:#fff1d9; border-color:#dbab64; }
.background-job span { font-size:.68rem; color:#697585; }
.background-job.background-ready span { color:#387253; }
.background-job.background-error span { color:#b42318; }
.background-job .loading-state::before { width:45px; height:5px; }
#background-load-panel [data-load-clear] { font-size:.7rem; padding:5px; margin-top:5px; }
.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:620px){ #background-load-panel { right:0; top:100%; width:min(310px,calc(100vw - 32px)); 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; } }