/* ═══════════════════════════════════════════════════════
   滚动公告条样式 — 外部静态文件（SEO 优化）
   ═══════════════════════════════════════════════════════ */

/* ── 基础布局（所有样式共用） ── */
.mirai-notice-bar{
    display:flex;align-items:center;width:100%;overflow:hidden;
    height:36px;position:relative;box-sizing:border-box;
}
.mirai-notice-label{
    display:flex;align-items:center;gap:6px;
    padding:0 18px 0 12px;height:100%;
    font-size:13px;font-weight:700;
    white-space:nowrap;flex-shrink:0;letter-spacing:.05em;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
}
.mirai-notice-label i{font-size:15px;animation:noticeBell 1s ease-in-out infinite alternate;}
@keyframes noticeBell{
    0%{transform:rotate(-12deg);}50%{transform:rotate(0deg);}100%{transform:rotate(12deg);}
}
.mirai-notice-scroll-wrap{
    flex:1;overflow:hidden;height:100%;position:relative;
}
.mirai-notice-slot{
    display:flex;align-items:center;gap:10px;
    height:36px;padding:0 14px;
    position:absolute;top:0;left:0;width:100%;box-sizing:border-box;
    transform:translateY(36px);opacity:0;
    transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .42s ease;
    pointer-events:none;
}
.mirai-notice-slot.is-active{
    transform:translateY(0);opacity:1;pointer-events:auto;
}
.mirai-notice-slot.is-leaving{
    transform:translateY(-36px);opacity:0;pointer-events:none;
}
.mirai-notice-index{
    flex-shrink:0;min-width:20px;height:20px;line-height:20px;
    border-radius:4px;text-align:center;font-size:11px;font-weight:700;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:0 5px;
}
.mirai-notice-dot{
    flex-shrink:0;width:6px;height:6px;border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#a78bfa);
}
.mirai-notice-icon{font-size:15px;flex-shrink:0;}
.mirai-notice-text{color:#cbd5e1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.mirai-notice-text a{color:#a5b4fc;text-decoration:none;}
.mirai-notice-text a:hover{color:#fff;text-decoration:underline;}
.mirai-notice-pager{
    flex-shrink:0;display:flex;align-items:center;gap:5px;padding:0 8px;
}
.mirai-notice-pager-dot{
    width:5px;height:5px;border-radius:50%;
    background:rgba(99,102,241,.3);
    transition:background .3s,transform .3s;
}
.mirai-notice-pager-dot.active{
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    transform:scale(1.4);
}
.mirai-notice-close{
    flex-shrink:0;width:34px;height:100%;
    display:flex;align-items:center;justify-content:center;
    color:#4b5563;cursor:pointer;font-size:17px;
    background:rgba(255,255,255,.03);
    border-left:1px solid rgba(255,255,255,.06);
    transition:color .2s,background .2s;
}
.mirai-notice-close:hover{color:#94a3b8;background:rgba(255,255,255,.08);}

/* ═══════════════════════════════════════════════════════
   样式①：默认深色（default）
   ═══════════════════════════════════════════════════════ */
.mirai-notice-bar.style-default{
    background:linear-gradient(90deg,#0f1117 0%,#191e2e 100%);
    border-bottom:1px solid rgba(99,102,241,.28);
}
.mirai-notice-bar.style-default .mirai-notice-label{
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    color:#fff;
}

/* ═══════════════════════════════════════════════════════
   样式②：紫蓝渐变（gradient）
   ═══════════════════════════════════════════════════════ */
.mirai-notice-bar.style-gradient{
    background:linear-gradient(135deg,#0a0e27 0%,#1a1e3e 50%,#0d1117 100%);
    border-bottom:1px solid rgba(99,102,241,.35);
}
.mirai-notice-bar.style-gradient .mirai-notice-label{
    background:linear-gradient(135deg,#4f46e5 0%,#3b82f6 100%);
    color:#e0e7ff;
}

/* ═══════════════════════════════════════════════════════
   样式③：霓虹光效（neon）
   ═══════════════════════════════════════════════════════ */
.mirai-notice-bar.style-neon{
    background:linear-gradient(135deg,#0d0221 0%,#1a0030 50%,#0d0221 100%);
    border-bottom:1px solid rgba(168,85,247,.4);
    box-shadow:inset 0 0 30px rgba(168,85,247,.08);
}
.mirai-notice-bar.style-neon .mirai-notice-label{
    background:linear-gradient(135deg,#a855f7 0%,#ec4899 50%,#f43f5e 100%);
    color:#fff;
    text-shadow:0 0 10px rgba(168,85,247,.6),0 0 20px rgba(236,72,153,.3);
}

/* ═══════════════════════════════════════════════════════
   样式④：暖橙色调（warm）
   ═══════════════════════════════════════════════════════ */
.mirai-notice-bar.style-warm{
    background:linear-gradient(90deg,#1a0a00 0%,#2d1400 100%);
    border-bottom:1px solid rgba(249,115,22,.3);
}
.mirai-notice-bar.style-warm .mirai-notice-label{
    background:linear-gradient(135deg,#f97316 0%,#ef4444 100%);
    color:#fff;
}

/* ═══════════════════════════════════════════════════════
   样式⑤：青冷科技（cool）
   ═══════════════════════════════════════════════════════ */
.mirai-notice-bar.style-cool{
    background:linear-gradient(90deg,#020c1b 0%,#0a192f 100%);
    border-bottom:1px solid rgba(6,182,212,.3);
}
.mirai-notice-bar.style-cool .mirai-notice-label{
    background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);
    color:#e0f7fa;
}