/* waitkit.css —— 全站公共等待组件样式（沙漏形变动画 + 步骤清单 + 实时已用秒数），配合 /static/js/waitkit.js 使用 */
.wk-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);box-sizing:border-box;background:rgba(15,23,42,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease;-webkit-tap-highlight-color:transparent}
.wk-overlay.wk-visible{opacity:1}
/* 独立临时提示（成功/失败短提示）：不拦截点击，背景更淡 */
.wk-overlay.wk-transient{pointer-events:none;background:rgba(15,23,42,.28)}
.wk-card{width:100%;max-width:320px;box-sizing:border-box;padding:var(--sp-5) var(--sp-5) var(--sp-4);border-radius:var(--radius);background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.3);color:#0f172a;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;transform:translateY(10px) scale(.97);transition:transform .2s ease}
.wk-overlay.wk-visible .wk-card{transform:translateY(0) scale(1)}

/* ==================== 沙漏（半沙流空 / 下半积满，每半程翻转 180°） ==================== */
.wk-hourglass-wrap{display:flex;align-items:center;justify-content:center;height:72px;margin-bottom:8px}
.wk-hourglass{display:block;width:48px;height:64px;animation:wk-flip 2.4s ease-in-out infinite}
.wk-glass{fill:none;stroke:#cbd5e1;stroke-width:2.2;stroke-linejoin:round}
.wk-sand{fill:var(--primary)}
.wk-sand-top{transform-box:fill-box;transform-origin:bottom;animation:wk-sand-top 2.4s ease-in-out infinite}
.wk-sand-bottom{transform-box:fill-box;transform-origin:top;animation:wk-sand-bottom 2.4s ease-in-out infinite}
.wk-stream{fill:var(--primary);opacity:0;animation:wk-stream 2.4s ease-in-out infinite}
@keyframes wk-flip{0%,36%{transform:rotate(0deg)}50%,86%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes wk-sand-top{0%{transform:scaleY(1)}36%,50%{transform:scaleY(0)}86%,100%{transform:scaleY(1)}}
@keyframes wk-sand-bottom{0%{transform:scaleY(0)}36%,50%{transform:scaleY(1)}86%,100%{transform:scaleY(0)}}
@keyframes wk-stream{0%{opacity:0}8%,34%{opacity:.95}40%,52%{opacity:0}58%,84%{opacity:.95}90%,100%{opacity:0}}

/* ==================== 完成 / 出错图标 ==================== */
.wk-mark{display:none;align-items:center;justify-content:center;height:72px;margin-bottom:8px}
.wk-mark svg{width:52px;height:52px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wk-mark-ok svg{stroke:#16a34a}
.wk-mark-fail svg{stroke:var(--danger)}
.wk-overlay.wk-success .wk-hourglass-wrap,.wk-overlay.wk-fail .wk-hourglass-wrap{display:none}
.wk-overlay.wk-success .wk-mark-ok{display:flex}
.wk-overlay.wk-fail .wk-mark-fail{display:flex}
.wk-overlay.wk-success .wk-mark svg,.wk-overlay.wk-fail .wk-mark svg{animation:wk-pop .22s ease-out both}
@keyframes wk-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ==================== 文案区 ==================== */
.wk-title{font-size:1.02rem;font-weight:700;line-height:1.45;color:#0f172a;word-break:break-word}
.wk-sub{margin-top:6px;font-size:var(--fs-md);line-height:1.6;color:var(--text-secondary);word-break:break-word}
.wk-elapsed{margin-top:6px;font-size:var(--fs-sm);font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.wk-overlay.wk-success .wk-title{color:#15803d}
.wk-overlay.wk-fail .wk-title{color:var(--danger)}
.wk-overlay.wk-fail .wk-sub{color:var(--danger)}
.wk-hidden{display:none !important}

/* ==================== 真实进度条（progressBar 开启时） ==================== */
.wk-progress{height:8px;margin-top:12px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.wk-progress-fill{width:0;height:100%;border-radius:999px;background:var(--primary);transition:width .25s ease}
.wk-overlay.wk-success .wk-progress-fill{background:#16a34a}
.wk-overlay.wk-fail .wk-progress-fill{background:var(--danger)}

/* ==================== 步骤清单 ==================== */
.wk-steps{list-style:none;margin:14px 0 0;padding:var(--sp-3) 2px 2px;border-top:1px solid #eef2f7;text-align:left}
.wk-step{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;font-size:var(--fs-md);line-height:1.4;color:var(--text-muted)}
.wk-step-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#cbd5e1;transition:background .2s ease}
.wk-step-name{flex:1 1 auto;min-width:0}
.wk-step-tick{flex:0 0 auto;font-size:var(--fs-sm);font-weight:700;color:#16a34a;opacity:0;transition:opacity .2s ease}
.wk-step-active{color:var(--primary);font-weight:700}
.wk-step-active .wk-step-dot{background:var(--primary);animation:wk-pulse 1.4s ease-out infinite}
.wk-step-done{color:#15803d}
.wk-step-done .wk-step-dot{background:#16a34a}
.wk-step-done .wk-step-tick{opacity:1}
@keyframes wk-pulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}70%{box-shadow:0 0 0 7px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}

@media (max-width:360px){.wk-card{padding:var(--sp-4) var(--sp-4) var(--sp-3)}}

@media (prefers-reduced-motion: reduce){
    .wk-hourglass,.wk-sand-top,.wk-sand-bottom,.wk-stream{animation:none}
    .wk-stream{display:none}
    .wk-overlay,.wk-card,.wk-step-dot,.wk-step-tick{transition:none}
    .wk-progress-fill{transition:none}
    .wk-overlay .wk-card{transform:none}
    .wk-step-active .wk-step-dot{animation:none}
    .wk-overlay.wk-success .wk-mark svg,.wk-overlay.wk-fail .wk-mark svg{animation:none}
}