/*
 * [INPUT]: index.html 的语义结构与 main.js 的状态类。
 * [OUTPUT]: 原站入口视觉、倒计时及 Safari 动态视口背景。
 * [POS]: src 的唯一样式源；不依赖第三方样式框架。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
:root {
  color-scheme: dark;
  line-height: 1.15;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  background: #3d0f2b;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
h1, p { margin: 0; }
[hidden] { display: none !important; }

/* --- 背景与遮罩 --- */
.load-page { position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden; background: #3d0f2b; }
.backgrounds, .load-bg, .load-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.load-bg { object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.load-bg.is-active { opacity: 1; }
.load-scrim { background: linear-gradient(180deg, #3d0f2b40, #3d0f2b73); }
.sv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  box-sizing: border-box;
  padding: 20px;
  background: #00000026;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.sv-box {
  width: calc(100% - 42px);
  max-width: 300px;
  padding: 22px 20px 20px;
  border: 1px solid #ff5c9e33;
  border-radius: 20px;
  background: linear-gradient(160deg, #4a1435, #3d0f2b);
  box-shadow: 0 20px 60px #0009, 0 0 40px #ff5c9e14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gate-content { display: contents; }

/* --- 品牌与原站文案 --- */
.brand-logo { display: flex; align-items: center; gap: 8px; }
.sv-logo { margin-bottom: 4px; }
.brand-logo-icon { filter: drop-shadow(0 2px 6px #ff5c9e73); flex-shrink: 0; }
.brand-logo-text { font-size: 15px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; }
.brand-logo-highlight {
  margin-left: 1px;
  background: linear-gradient(90deg, #ff5c9e, #d6409f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sv-title { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.sv-desc { font-size: 12px; color: #ffffff8c; text-align: center; line-height: 1.5; }
.sv-instruction { font-size: 13px; font-weight: 600; color: #fffc; margin-top: 8px; }
.sv-note { font-size: 11px; color: #ffffff4d; margin-top: 8px; }

/* --- 滑动与回弹 --- */
.sv-track {
  position: relative;
  width: 100%;
  height: 44px;
  margin-top: 2px;
  border: 1.5px solid #ffffff1f;
  border-radius: 22px;
  background: #ffffff0f;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
.sv-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
  border-radius: 26px;
  background: linear-gradient(90deg, #ff5c9e26, #d6409f33);
  transition: width .05s;
}
.sv-track-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #ffffff59;
  pointer-events: none;
}
.sv-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5c9e, #d6409f);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  transition: transform .1s, box-shadow .2s;
  box-shadow: 0 4px 16px #ff5c9e66;
}
.sv-thumb.is-dragging { cursor: grabbing; box-shadow: 0 4px 24px #ff5c9e99; }
.sv-thumb:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* --- 确认后的原站倒计时 --- */
.sv-verified-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 4px 20px #4ade8066;
}
.sv-countdown-ring { position: relative; width: 80px; height: 80px; margin: 8px 0; }
.sv-ring-svg { width: 100%; height: 100%; }
#countdown-arc { transition: stroke-dashoffset .9s linear; }
.sv-countdown-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
}
.sv-countdown-label { font-size: 14px; font-weight: 600; color: #ffffff8c; }
.sv-title:focus { outline: none; }
.completion { position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: grid; place-items: center; padding: 0 24px; text-align: center; }
.completion h1 { font-size: clamp(24px, 4vw, 40px); outline: none; }
.completion span { color: #ff5c9e; }
noscript { position: fixed; inset: auto 20px 20px; z-index: 20; text-align: center; }

@media (max-height: 360px) {
  .sv-overlay { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .load-bg, .sv-thumb, .sv-track-fill, #countdown-arc { transition: none; }
}