/* 公告：铃铛红点、面板时间线、首页弹窗（2026-11-04 重做）。面板外框沿用商店的 rewards-window 风格。 */
.announcement-nav-dot{position:absolute;right:-1px;top:-2px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#13b8cf}
.announcement-nav-dot[hidden]{display:none}

/* ---------- 面板 ---------- */
#announcementsPage.rewards-window{width:min(800px,calc(100vw - 40px));background:#f5f7f9}
#announcementsPage .rewards-heading{padding:20px 28px 18px}
#announcementsPage .rewards-heading h2{margin:4px 0 0;font-size:26px}
#announcementsPage .rewards-heading p{display:none}
.announcement-list{position:relative;display:grid;gap:0;padding:26px 28px 34px}

.announcement-card{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);margin:0;animation:ann-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
/* 时间线：左侧日期 + 竖线 + 节点 */
.ann-rail{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:18px 0 0}
.ann-rail:before{content:"";position:absolute;left:58px;top:0;bottom:0;width:2px;background:linear-gradient(#e2e9ec,#e2e9ec)}
.announcement-card:first-child .ann-rail:before{top:26px}
.announcement-card:last-child .ann-rail:before{bottom:auto;height:26px}
.announcement-card:only-child .ann-rail:before{display:none}
.ann-rail time{display:grid;justify-items:start;line-height:1;color:#7b8a94}
.ann-rail time b{font-family:var(--font-num,inherit);color:#1d2a33;font-size:24px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ann-rail time span{margin-top:4px;font-size:12px;font-weight:600}
.ann-rail time small{margin-top:3px;color:#a7b2b9;font-size:10.5px;font-variant-numeric:tabular-nums}
.ann-rail-dot{position:absolute;left:53px;top:22px;width:12px;height:12px;border:2px solid #f5f7f9;border-radius:50%;background:#c9d4d9;box-shadow:0 0 0 1px #dbe3e7}
.announcement-card.is-latest .ann-rail-dot{background:#13b8cf;box-shadow:0 0 0 1px #13b8cf,0 0 0 6px rgba(19,184,207,.14)}

.ann-card{position:relative;margin:0 0 14px;padding:18px 22px 18px;border:1px solid #e3e9ec;border-radius:14px;background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ann-card:hover{transform:translateY(-2px);border-color:#d3e3e8;box-shadow:0 12px 26px -16px rgba(20,48,60,.35)}
.announcement-card.is-latest .ann-card{padding:22px 24px;border-color:#c8ebf1;background:linear-gradient(135deg,#ffffff 40%,#eef9fb);box-shadow:0 14px 34px -22px rgba(19,140,160,.55)}
.announcement-card.is-latest .ann-card:before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(#13b8cf,#5b8cff)}
.announcement-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;padding-right:14px}
.announcement-card-head h3{margin:0;color:#1d2a33;font-size:15.5px;font-weight:700;line-height:1.4}
.announcement-card.is-latest .announcement-card-head h3{font-size:17.5px}
.ann-latest{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#13b8cf;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
/* 上次打开面板之后的新公告：卡片右上角一个呼吸的小点 */
.announcement-card.is-unread .ann-card:after{content:"";position:absolute;right:16px;top:16px;width:8px;height:8px;border-radius:50%;background:#13b8cf;box-shadow:0 0 0 0 rgba(19,184,207,.5);animation:ann-ping 2.2s ease-out infinite}
.ann-body{margin:0;max-height:calc(1.85em * 6);color:#56656f;font-size:13.5px;line-height:1.85;white-space:pre-line;overflow-wrap:anywhere;overflow:hidden}
.announcement-card.is-clamped .ann-body{-webkit-mask:linear-gradient(#000 calc(100% - 2.4em),transparent);mask:linear-gradient(#000 calc(100% - 2.4em),transparent)}
.announcement-card.is-open .ann-body{max-height:none;-webkit-mask:none;mask:none}
.ann-more{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:0;border:0;background:none;color:#0b8698;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ann-more:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.announcement-card.is-open .ann-more:after{transform:translateY(1px) rotate(-135deg)}
.ann-more[hidden]{display:none}
.ann-more:focus-visible{outline:2px solid #13b8cf;outline-offset:3px;border-radius:4px}

/* 空状态 / 读取中 */
.ann-empty{display:grid;justify-items:center;gap:12px;padding:46px 20px}
.ann-empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#eef9fb,#eef1ff);color:#13a6bd;animation:ann-bell 2.8s ease-in-out infinite;transform-origin:50% 10%}
.ann-empty-icon svg,.ann-modal-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.announcement-empty{margin:0;color:#8d99a2;text-align:center;font-size:13px}
.ann-skeleton{display:grid;grid-template-columns:76px minmax(0,1fr);margin-bottom:14px;animation:ann-in .4s ease both;animation-delay:calc(var(--i,0) * 80ms)}
.ann-skeleton>span{width:34px;height:34px;margin-top:16px;border-radius:9px;background:#e8eef1}
.ann-skeleton>div{display:grid;gap:10px;padding:20px 22px;border:1px solid #e9eef1;border-radius:14px;background:#fff}
.ann-skeleton i{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,#eef2f4 30%,#f8fafb 50%,#eef2f4 70%);background-size:300% 100%;animation:ann-shimmer 1.4s linear infinite}
.ann-skeleton i:first-child{width:42%;height:14px}
.ann-skeleton i:last-child{width:68%}

/* ---------- 首页弹窗 ---------- */
.announcement-backdrop{position:fixed;inset:0;z-index:2300;display:grid;place-items:center;padding:20px;background:rgba(14,22,32,.52);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ann-fade .25s ease both}
.announcement-modal{position:relative;width:min(470px,100%);overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 34px 90px -20px rgba(13,26,43,.55);font-family:"AimDigits",MiSans,system-ui,-apple-system,"Segoe UI",sans-serif;color:#203148;animation:ann-pop .45s cubic-bezier(.2,.9,.25,1.15) both}
.ann-modal-band{position:relative;display:flex;align-items:center;gap:12px;padding:20px 24px 18px;background:radial-gradient(120% 160% at 0% 0%,#1d3a52 0%,#13202e 60%,#0f1822 100%);color:#e9f8fb;overflow:hidden}
.ann-modal-band:after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(19,184,207,.45),transparent 65%);animation:ann-glow 4s ease-in-out infinite alternate}
.ann-modal-icon{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);color:#7fe6f4;animation:ann-bell 2.8s ease-in-out .4s infinite;transform-origin:50% 10%}
.announcement-badge{position:relative;z-index:1;display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(19,184,207,.18);color:#8eeaf7;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.ann-modal-body{max-height:min(52vh,420px);overflow-x:hidden;overflow-y:auto;padding:20px 24px 4px;scrollbar-width:thin;scrollbar-color:#cfd9de transparent}
.announcement-modal h2{margin:0 0 10px;font-size:19px;line-height:1.4}
.announcement-modal p{margin:0 0 14px;color:#4f6070;font-size:13.5px;line-height:1.85;white-space:pre-line;overflow-wrap:anywhere}
.announcement-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px 20px}
.announcement-modal-foot time{color:#93a1ad;font-size:11.5px;font-variant-numeric:tabular-nums}
.announcement-dismiss{height:40px;padding:0 22px;border:0;border-radius:11px;background:#13b8cf;color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;box-shadow:0 10px 22px -10px rgba(19,184,207,.8)}
.announcement-dismiss:hover{background:#0fa3b8;transform:translateY(-1px)}
.announcement-dismiss:active{transform:scale(.97)}
.announcement-dismiss:focus-visible{outline:2px solid #0db4cc;outline-offset:3px}
.announcement-backdrop.is-leaving{animation:ann-fade .22s ease reverse both}
.announcement-backdrop.is-leaving .announcement-modal{animation:ann-pop-out .22s ease both}

@keyframes ann-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ann-fade{from{opacity:0}to{opacity:1}}
@keyframes ann-pop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ann-pop-out{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes ann-ping{0%{box-shadow:0 0 0 0 rgba(19,184,207,.5)}70%,100%{box-shadow:0 0 0 8px rgba(19,184,207,0)}}
@keyframes ann-shimmer{to{background-position:-300% 0}}
@keyframes ann-bell{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(12deg)}72%{transform:rotate(-10deg)}78%{transform:rotate(6deg)}84%{transform:rotate(-3deg)}}
@keyframes ann-glow{to{transform:translate(-24px,18px) scale(1.15);opacity:.7}}

@media(max-width:620px){
  .announcement-list{padding:18px 14px 24px}
  .announcement-card,.ann-skeleton{grid-template-columns:52px minmax(0,1fr)}
  .ann-rail:before{left:40px}
  .ann-rail-dot{left:35px}
  .ann-rail time b{font-size:19px}
  .ann-rail time small{display:none}
  .ann-card,.announcement-card.is-latest .ann-card{padding:16px 16px}
  .ann-modal-band{padding:16px 18px}
  .ann-modal-body{padding:16px 18px 2px}
  .announcement-modal-foot{padding:10px 18px 16px}
}
@media(prefers-reduced-motion:reduce){
  .announcement-card,.ann-skeleton,.announcement-backdrop,.announcement-modal,.ann-empty-icon,.ann-modal-icon,.ann-modal-band:after,.announcement-card.is-unread .ann-card:after{animation:none!important}
  .ann-skeleton i{animation:none}
  .ann-card,.announcement-dismiss{transition:none}
  .ann-card:hover{transform:none}
}
html[data-reduce-motion] .announcement-card,html[data-reduce-motion] .announcement-modal,html[data-reduce-motion] .ann-empty-icon,html[data-reduce-motion] .ann-modal-icon,html[data-reduce-motion] .ann-modal-band:after{animation:none}