/* ══════════════════════════════════════════════════════════
   maint.css — 站点维护：全屏维护页 / 维护预告 / 授权访问提示
   （逻辑在 app.js「网站维护模式」一段；原来样式是 JS 运行时注入的）
   ══════════════════════════════════════════════════════════ */
#site-maint{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2147483600;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px calc(32px + env(safe-area-inset-bottom,0px));text-align:center;overflow:hidden;
  background:linear-gradient(170deg,#120b18 0%,#0b0710 55%,#140a12 100%);
  color:#ece7f2;font-family:var(--font-body,system-ui);}
#site-maint.show{display:flex}
#site-maint [hidden]{display:none!important}
#site-maint::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 55% at 50% -8%,rgba(255,143,171,.22),transparent 68%),
             radial-gradient(60% 45% at 88% 108%,rgba(140,90,220,.18),transparent 62%);}
#site-maint>*{position:relative;z-index:1}
#site-maint .ico{width:1em;height:1em;flex:none}
body.maint-lock{overflow:hidden!important;position:fixed!important;width:100%!important;top:0;left:0;touch-action:none}
html.maint-lock{overflow:hidden!important}
/* 樱花沿用站点自身的 #sakura-canvas：维护时提到遮罩之上。canvas 本身 pointer-events:none */
body.maint-lock #sakura-canvas{z-index:2147483601!important}

.mt-mark{width:76px;height:76px;margin-bottom:18px;filter:drop-shadow(0 16px 30px rgba(255,143,171,.35));animation:mtFloat 5s ease-in-out infinite}
.mt-mark svg{width:100%;height:100%}
@keyframes mtFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}

.mt-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;font-size:.7rem;letter-spacing:.16em;
  background:rgba(255,143,171,.12);box-shadow:inset 0 0 0 1px rgba(255,143,171,.3);color:#ffc7d6}
.mt-badge b{width:6px;height:6px;border-radius:50%;background:#ff8fab;box-shadow:0 0 8px #ff8fab;animation:mtBlink 2.2s ease-in-out infinite}
@keyframes mtBlink{0%,100%{opacity:1}50%{opacity:.3}}

#site-maint h1{font-size:clamp(1.6rem,4.4vw,2.4rem);margin:18px 0 10px;font-weight:800;letter-spacing:.06em;color:#fff}
.mt-msg{font-size:clamp(.9rem,2.2vw,1.02rem);color:#c3b9d4;max-width:520px;line-height:1.85;margin:0;white-space:pre-line}

/* 倒计时 */
.mt-cd{display:flex;gap:10px;margin-top:24px}
.mt-cd div{min-width:74px;padding:12px 10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mt-cd b{display:block;font-size:1.7rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.mt-cd span{font-size:.66rem;color:#9c92ae;letter-spacing:.1em}

.mt-eta{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.82rem;color:#ffc7d6;
  background:rgba(255,143,171,.1);box-shadow:inset 0 0 0 1px rgba(255,143,171,.26);padding:7px 16px;border-radius:999px}
.mt-eta .ico{width:14px;height:14px}

/* 进度：知道起止时间就按真实进度画，不知道就来回扫 */
.mt-bar{margin-top:24px;width:min(260px,70vw);height:5px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden}
.mt-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#ff8fab,#c266e0);animation:mtSweep 1.8s ease-in-out infinite}
.mt-bar.det i{animation:none;width:0;transition:width 1s linear}
@keyframes mtSweep{0%{width:12%;margin-left:-14%}100%{width:12%;margin-left:102%}}
.mt-prog-t{margin-top:8px;font-size:.7rem;color:#9c92ae;font-variant-numeric:tabular-nums}

.mt-check{display:inline-flex;align-items:center;gap:7px;margin-top:24px;height:40px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:.84rem;color:#ece7f2;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .15s,transform .12s}
.mt-check:hover{background:rgba(255,255,255,.13)}
.mt-check:active{transform:scale(.96)}
.mt-check:disabled{opacity:.6;cursor:default}
.mt-check .ico{width:15px;height:15px}
.mt-check.busy .ico{animation:mtSpin .8s linear infinite}
@keyframes mtSpin{to{transform:rotate(360deg)}}
.mt-foot{margin-top:16px;font-size:.72rem;color:#7d7490;letter-spacing:.04em;min-height:1.2em}

/* ── 预告：顶部居中胶囊 ── */
#maint-banner{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:2147483500;
  display:none;max-width:calc(100vw - 24px);font-family:var(--font-body,system-ui);}
#maint-banner.show{display:block;animation:mtDrop .45s cubic-bezier(.16,1,.3,1)}
@keyframes mtDrop{from{opacity:0;transform:translate(-50%,-14px)}}
#maint-banner .ico{width:1em;height:1em;flex:none}
.mtb{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;font-size:.8rem;line-height:1.4;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.mtb .ico{width:16px;height:16px}
.mtb b{font-weight:800;font-variant-numeric:tabular-nums}
.mtb-x{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;flex:none;color:inherit;background:rgba(0,0,0,.12)}
.mtb-x:hover{background:rgba(0,0,0,.22)}
.mtb-x .ico{width:13px;height:13px}
.mtb.soon{color:#2a1a05;background:rgba(251,191,36,.94)}
.mtb.soon.urgent{color:#fff;background:rgba(239,68,68,.94);animation:mtPulse 1.6s ease-in-out infinite}
@keyframes mtPulse{0%,100%{box-shadow:0 14px 34px -14px rgba(0,0,0,.6),0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 14px 34px -14px rgba(0,0,0,.6),0 0 0 8px rgba(239,68,68,0)}}
/* 收起后只剩一枚小倒计时，点一下再展开 */
.mtb.mini{cursor:pointer;padding:6px 12px 6px 10px;gap:6px}
#maint-banner.staff{left:14px;right:auto;top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:none}
#maint-banner.staff.show{animation:none}
.mtb.staff{color:#f3eaff;background:rgba(88,60,160,.9)}

@media (max-width:768px){
  .mtb{font-size:.74rem;border-radius:16px}
  #maint-banner.staff{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .mt-cd div{min-width:62px;padding:10px 6px}
  .mt-cd b{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .mt-mark,.mt-badge b,.mt-bar i,.mtb.soon.urgent,.mt-check.busy .ico{animation:none}
  #maint-banner.show{animation:none}
}