.refresh-alert {
position: fixed;
top: 84px;
right: 22px;
z-index: 1290;
display: flex;
align-items: flex-start;
gap: 12px;
width: 340px;
max-width: calc(100vw - 32px);
padding: 16px 40px 16px 16px;
border: 1px solid rgba(37, 99, 235, 0.28);
border-left: 5px solid #2563eb;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.08);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
opacity: 0;
transform: translateX(28px);
transition: opacity 260ms ease, transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
pointer-events: none;
}
.refresh-alert.is-in {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
animation: refresh-alert-glow 1.6s ease-out 320ms 2;
}
@keyframes refresh-alert-glow {
0%   { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20), 0 0 0 0 rgba(37, 99, 235, 0.45); }
100% { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20), 0 0 0 14px rgba(37, 99, 235, 0); }
}
.refresh-alert__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
.refresh-alert__body { min-width: 0; }
.refresh-alert__title {
font-size: 15px;
font-weight: 800;
line-height: 1.25;
color: #0f172a;
}
.refresh-alert__text {
margin-top: 4px;
font-size: 13.5px;
line-height: 1.45;
color: #334155;
}
.refresh-alert__btn {
margin-top: 12px;
padding: 8px 16px;
border: 0;
border-radius: 9px;
background: #2563eb;
color: #ffffff;
font: 700 13.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.refresh-alert__btn:hover { background: #1d4ed8; }
}
.refresh-alert__btn:focus-visible,
.refresh-alert__x:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }
.refresh-alert__x {
position: absolute;
top: 8px;
right: 10px;
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.refresh-alert__x:hover { background: #f1f5f9; color: #0f172a; }
}
@media (max-width: 560px) {
.refresh-alert { top: 72px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.refresh-alert { transition: opacity 200ms ease; transform: none; }
.refresh-alert.is-in { animation: none; }
}
.refresh-alert--announce { border-left-color: #0f766e; border-color: rgba(15, 118, 110, 0.32); }
.refresh-alert--announce .refresh-alert__icon { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
.refresh-alert--announce .refresh-alert__btn { background: #0f766e; }
@media (hover: hover) and (pointer: fine) {
.refresh-alert--announce .refresh-alert__btn:hover { background: #115e59; }
}
.refresh-alert--announce.is-in { animation: refresh-alert-glow-teal 1.6s ease-out 320ms 2; }
@keyframes refresh-alert-glow-teal {
0%   { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20), 0 0 0 0 rgba(15, 118, 110, 0.45); }
100% { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20), 0 0 0 14px rgba(15, 118, 110, 0); }
}