/* =========================================================================
   顶部公告栏共享样式(三页通用:控制台 / 爱心投喂 / 访问统计)
   配套脚本 static/js/announcement.js;数据源 GET /api/announcements
   结构: [喇叭图标] [公告文字(居中)] [当前/总数 计数器]
   ========================================================================= */
.announcement-bar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 32px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.announcement-bar .ann-icon {
    color: var(--cyan);
    flex-shrink: 0;
}
.announcement-bar .ann-stage {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.announcement-bar .ann-track {
    position: absolute;
    inset: 0;
}
.announcement-bar .ann-item {
    position: absolute;
    inset: 0;
    display: block;
    line-height: 32px;          /* 与 .announcement-bar 高度一致,实现单行垂直居中 */
    text-align: center;         /* 公告文字在容器内水平居中 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
    font-size: .9rem;
    color: var(--text);
    text-decoration: none;
}
.announcement-bar .ann-item.is-active  { opacity: 1; transform: translateY(0); }
.announcement-bar .ann-item.is-leaving { opacity: 0; transform: translateY(-8px); }
.announcement-bar .ann-item.ann-link   { color: var(--cyan); }
.announcement-bar .ann-item.ann-link:hover { text-decoration: underline; }
/* 右侧计数器:当前序号/总数,如 1/3;等宽数字防轮播切换时宽度抖动 */
.announcement-bar .ann-counter {
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 移动端长公告跑马灯:起止位移与时长由 announcement.js 按实测宽度注入;
   fill-mode forwards 让滚完的文字停在左侧场外,避免停留期回弹闪现 */
@keyframes ann-marquee {
    from { transform: translateX(var(--ann-from, 100%)); }
    to   { transform: translateX(var(--ann-to, -100%)); }
}

/* 窄屏:公告栏折为顶栏第二行整行,避免三段挤崩;长公告滚动播出保证全文可读 */
@media (max-width: 720px) {
    .announcement-bar { order: 3; width: 100%; }
    .topbar { flex-wrap: wrap; row-gap: 6px; }
    .announcement-bar .ann-item.is-marquee {
        text-align: left;
        animation: ann-marquee var(--ann-dur, 12s) linear forwards;
    }
}