/* ══════════════════════════════════════════════════════════
   topstrip.css — 首页顶部条：公告横幅 + 节日倒计时条
   · 两者装进同一个 #top-strip：外壳网格按「头部 / 顶部条 / 主内容」三行排，
     原来公告和节日条是两个独立子元素，iPad、窄桌面那几层的三行网格把节日条
     排进了 minmax(0,1fr) 轨道，被压扁到只剩一半
   · 宽屏上公告与节日条并排一行，省出竖向空间给时区列表
   ══════════════════════════════════════════════════════════ */
/* 注意：没有内容时也不能 display:none —— 外壳网格就少了一个子元素，主内容会掉进 auto 轨道失去高度限制 */
#top-strip{display:flex;flex-direction:column;gap:8px;min-width:0;flex-shrink:0;}
#top-strip [hidden]{display:none!important;}
@media (min-width:1024px){
  #top-strip{flex-direction:row;align-items:stretch;gap:12px;}
  #top-strip > #announce-area{flex:1 1 auto;min-width:0;}
  #top-strip > #festival-bar{flex:0 1 380px;min-width:300px;}
  #top-strip > #announce-area[hidden] + #festival-bar{flex:1 1 auto;max-width:none;}
}
#top-strip .ico{width:1em;height:1em;flex:none;}

/* ══════════ 公告：一条一条轮播 ══════════ */
.ann{--a:#7dd3fc;--a-bg:rgba(56,189,248,.1);
  position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:7px 8px 7px 12px;border-radius:14px;
  color:#e8eef8;overflow:hidden;
  background:linear-gradient(90deg,var(--a-bg),rgba(255,255,255,.02) 70%),rgba(14,12,30,.5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:tsIn .45s cubic-bezier(.16,1,.3,1);transition:box-shadow .3s,background .3s;}
.ann::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--a);}
.ann.t-success{--a:#86efac;--a-bg:rgba(74,222,128,.1);}
.ann.t-warning{--a:#fcd34d;--a-bg:rgba(251,191,36,.12);}
.ann.t-error{--a:#fca5a5;--a-bg:rgba(248,113,113,.13);}
.ann.t-bday{--a:#f9a8d4;--a-bg:rgba(236,72,153,.2);
  background:linear-gradient(100deg,rgba(236,72,153,.28),rgba(139,92,246,.22) 55%,rgba(245,158,11,.18)),rgba(14,12,30,.5);}
@keyframes tsIn{from{opacity:0;transform:translateY(-8px)}}

.ann-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--a);
  background:color-mix(in srgb,var(--a) 16%,transparent);}
.ann-ic .ico{width:16px;height:16px;}
.ann-body{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;cursor:default;}
.ann-body.can-expand{cursor:pointer;}
.ann-txt{flex:1;min-width:0;font-size:.82rem;line-height:1.5;color:#eef2f8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ann.expanded .ann-txt{white-space:normal;}
.ann-txt a{color:var(--a);text-decoration:underline;text-underline-offset:2px;}
.ann-time{flex:none;font-size:.68rem;color:rgba(232,238,248,.42);white-space:nowrap;}
.ann-body.swap .ann-txt,.ann-body.swap .ann-time{animation:annSwap .35s ease;}
@keyframes annSwap{from{opacity:0;transform:translateY(6px)}}

.ann-nav{display:flex;align-items:center;gap:2px;flex:none;}
.ann-dots{display:flex;gap:4px;padding:0 4px;}
.ann-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:width .25s,background .25s;}
.ann-dots i.on{width:14px;border-radius:3px;background:var(--a);}
.ann-btn{width:28px;height:28px;border-radius:9px;border:0;cursor:pointer;display:grid;place-items:center;flex:none;
  color:rgba(232,238,248,.6);background:transparent;transition:background .15s,color .15s;}
.ann-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.ann-btn .ico{width:14px;height:14px;}
.ann-btn.prev .ico{transform:rotate(180deg);}
/* 轮播进度：细线从左走到右 */
.ann-prog{position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;overflow:hidden;opacity:.55;}
.ann-prog i{display:block;height:100%;width:100%;background:var(--a);transform-origin:left;transform:scaleX(0);}
.ann-prog i.run{animation:annProg var(--dur,7s) linear forwards;}
.ann:hover .ann-prog i.run,.ann.expanded .ann-prog i.run,.ann:focus-within .ann-prog i.run{animation-play-state:paused;}
@keyframes annProg{to{transform:scaleX(1)}}

/* ══════════ 节日倒计时条 ══════════ */
#festival-bar{--fst-a:#f9a8d4;--fst-b:#c4b5fd;
  position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:7px 8px 7px 8px;border-radius:14px;overflow:hidden;
  color:#fff;isolation:isolate;
  background:linear-gradient(110deg,color-mix(in srgb,var(--fst-a) 26%,transparent),color-mix(in srgb,var(--fst-b) 12%,transparent) 70%),rgba(14,12,30,.55);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fst-a) 38%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:tsIn .5s cubic-bezier(.16,1,.3,1);}
/* 一道慢慢扫过的光 */
#festival-bar::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);
  transform:translateX(-100%);animation:fbSheen 6s ease-in-out 1.2s infinite;}
@keyframes fbSheen{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
#festival-bar[data-fest="sakura"]{--fst-a:#ff8fc4;--fst-b:#fbcfe8;}
#festival-bar[data-fest="newyear"]{--fst-a:#818cf8;--fst-b:#fde68a;}
#festival-bar[data-fest="cny"]{--fst-a:#ef4444;--fst-b:#fbbf24;}
#festival-bar[data-fest="labour"]{--fst-a:#f59e0b;--fst-b:#fde68a;}
#festival-bar[data-fest="nationalday"]{--fst-a:#ef4444;--fst-b:#facc15;}
#festival-bar[data-fest="midautumn"]{--fst-a:#f59e0b;--fst-b:#a78bfa;}
#festival-bar[data-fest="dragonboat"]{--fst-a:#10b981;--fst-b:#a3e635;}
#festival-bar[data-fest="halloween"]{--fst-a:#f97316;--fst-b:#a855f7;}
#festival-bar[data-fest="christmas"]{--fst-a:#22c55e;--fst-b:#ef4444;}
#festival-bar[data-fest="valentine"]{--fst-a:#f43f5e;--fst-b:#f9a8d4;}

.fb-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:1.25rem;line-height:1;
  background:linear-gradient(140deg,color-mix(in srgb,var(--fst-a) 40%,transparent),color-mix(in srgb,var(--fst-b) 22%,transparent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 18px -10px var(--fst-a);}
.fb-ic svg{width:22px;height:15px;border-radius:2px;}
.fb-main{flex:1;min-width:0;}
.fb-t{display:flex;align-items:center;gap:7px;min-width:0;}
.fb-t b{font-size:.88rem;letter-spacing:.06em;white-space:nowrap;}
.fb-chip{font-size:.6rem;font-weight:800;letter-spacing:.08em;padding:1px 7px;border-radius:999px;white-space:nowrap;
  color:var(--fst-b);background:color-mix(in srgb,var(--fst-b) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fst-b) 40%,transparent);}
#festival-bar[data-state="live"] .fb-chip{color:#1a0b0b;background:linear-gradient(135deg,var(--fst-b),#fff);box-shadow:none;}
.fb-s{margin-top:2px;font-size:.7rem;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fb-prog{margin-top:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;}
.fb-prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--fst-a),var(--fst-b));}
.fb-count{flex:none;display:flex;align-items:baseline;gap:3px;padding:0 4px;}
.fb-count b{font-family:var(--font-display,ui-monospace,monospace);font-size:1.55rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,var(--fst-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.fb-count span{font-size:.66rem;color:rgba(255,255,255,.6);white-space:nowrap;}
.fb-x{width:28px;height:28px;border-radius:9px;border:0;cursor:pointer;display:grid;place-items:center;flex:none;align-self:center;
  color:rgba(255,255,255,.55);background:transparent;transition:background .15s,color .15s;}
.fb-x:hover{background:rgba(255,255,255,.12);color:#fff;}
.fb-x .ico{width:14px;height:14px;}

/* ══════════ 浅色主题 ══════════ */
body.theme-light .ann{color:#3a1030;background:linear-gradient(90deg,var(--a-bg),rgba(255,255,255,.4) 70%),rgba(255,255,255,.62);}
body.theme-light .ann.t-info{--a:#0284c7;}
body.theme-light .ann.t-success{--a:#16a34a;}
body.theme-light .ann.t-warning{--a:#d97706;}
body.theme-light .ann.t-error{--a:#dc2626;}
body.theme-light .ann.t-bday{--a:#db2777;}
body.theme-light .ann-txt{color:#3a1030;}
body.theme-light .ann-time{color:rgba(58,16,48,.45);}
body.theme-light .ann-btn{color:rgba(58,16,48,.55);}
body.theme-light .ann-btn:hover{background:rgba(160,40,90,.08);color:#8b1a3a;}
body.theme-light .ann-dots i{background:rgba(58,16,48,.18);}
body.theme-light #festival-bar{color:#3a1030;
  background:linear-gradient(110deg,color-mix(in srgb,var(--fst-a) 22%,#fff),color-mix(in srgb,var(--fst-b) 14%,#fff) 70%);}
body.theme-light .fb-s,body.theme-light .fb-count span{color:rgba(58,16,48,.6);}
body.theme-light .fb-count b{background:linear-gradient(180deg,color-mix(in srgb,var(--fst-a) 70%,#000),var(--fst-a));-webkit-background-clip:text;background-clip:text;}
body.theme-light .fb-chip{color:color-mix(in srgb,var(--fst-a) 75%,#000);}
body.theme-light .fb-x{color:rgba(58,16,48,.5);}
body.theme-light .fb-prog{background:rgba(58,16,48,.1);}

/* ══════════ 窄屏 ══════════ */
@media (max-width:640px){
  #top-strip{gap:6px;}
  .ann{min-height:40px;padding:5px 4px 5px 10px;gap:8px;}
  .ann-ic{width:24px;height:24px;border-radius:8px;}
  .ann-time,.ann-dots{display:none;}
  .ann-btn.prev{display:none;}
  #festival-bar{min-height:40px;padding:5px 4px 5px 6px;gap:9px;}
  .fb-ic{width:30px;height:30px;font-size:1.05rem;}
  .fb-prog{display:none;}
  .fb-count b{font-size:1.3rem;}
}

@media (prefers-reduced-motion:reduce){
  .ann,#festival-bar{animation:none;}
  #festival-bar::after{animation:none;display:none;}
  .ann-body.swap .ann-txt,.ann-body.swap .ann-time{animation:none;}
}