/* 东方时空 · 官网下载页（无构建、无外部依赖） */
:root {
  --red: #d92121;
  --red-dark: #b81a1a;
  --ink: #1d2129;
  --ink-2: #4e5969;
  --ink-3: #86909c;
  --line: #e5e6eb;
  --bg: #f7f8fa;
  --card: #ffffff;
  --radius: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #fdecec 0, var(--bg) 260px);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100%;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
}

/* ------------------------------ 头部 ------------------------------ */
.hero { text-align: center; padding: 12px 0 22px; }

.hero__logo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 20px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 8px 20px rgba(217, 33, 33, .18);
}

.hero__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.hero__sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.hero__tag {
  display: inline-block; margin: 12px 0 0; padding: 4px 12px;
  font-size: 12px; color: var(--red);
  background: rgba(217, 33, 33, .08); border-radius: 999px;
}

/* ------------------------------ 卡片 ------------------------------ */
/* 关键：.state 用了 display:flex，会覆盖 [hidden] 的 display:none，
   导致「加载中 / 失败 / 成功」三个状态同时显示。这条兜底必须放在最前面之后。 */
[hidden] { display: none !important; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 6px 24px rgba(29, 33, 41, .07);
}

.state {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 26px 0; color: var(--ink-3); font-size: 14px;
}
.state--error { flex-direction: column; gap: 6px; }
.state__title { margin: 0; color: var(--ink); font-weight: 600; }
.state__desc { margin: 0; font-size: 13px; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--red);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------ 版本 ------------------------------ */
.ver { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ver__main { display: flex; align-items: baseline; gap: 10px; }
.ver__label { font-size: 13px; color: var(--ink-3); }
.ver__name { font-size: 26px; font-weight: 700; color: var(--red); letter-spacing: .5px; }
.ver__meta { font-size: 13px; color: var(--ink-3); }
.ver__meta .dot { margin: 0 6px; }

/* ------------------------------ 更新说明 ------------------------------ */
.note {
  margin: 0 0 18px; padding: 14px 16px;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 12px;
}
.note__title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.note__body { font-size: 14px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* ------------------------------ 按钮 ------------------------------ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; margin-top: 12px;
  border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: transform .08s ease, opacity .2s ease;
}
.btn:active { transform: scale(.985); }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--ghost {
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn--sm { width: auto; height: 38px; margin: 0; padding: 0 16px; font-size: 14px; }
.btn__hint { font-size: 12px; font-weight: 400; opacity: .85; }

.tip { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ------------------------------ iOS 未开放 ------------------------------ */
.disabled {
  padding: 18px 16px; margin-top: 4px;
  background: #fff7ec; border: 1px solid #ffe0b2; border-radius: 12px;
  text-align: center;
}
.disabled__title { font-weight: 600; color: #a1780a; }
.disabled__desc { margin-top: 4px; font-size: 13px; color: #a1780a; }

/* ------------------------------ PC ------------------------------ */
.pc { display: flex; gap: 18px; align-items: flex-start; }
.pc__qr { text-align: center; flex: 0 0 auto; }
.pc__qr img {
  display: block; width: 168px; height: 168px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.pc__qr-tip { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.pc__right { flex: 1; min-width: 0; }
.pc__desc { margin: 4px 0 10px; font-size: 13px; color: var(--ink-2); }

.copy { display: flex; gap: 8px; align-items: center; }
.copy__input {
  flex: 1; min-width: 0; height: 38px; padding: 0 10px;
  font-size: 12px; color: var(--ink-2);
  background: #f7f8fa; border: 1px solid var(--line); border-radius: 8px;
}

/* ------------------------------ SHA256 ------------------------------ */
.sha { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.sha summary { cursor: pointer; outline: none; }
.sha code {
  display: block; margin-top: 8px; padding: 10px 12px;
  background: #f7f8fa; border-radius: 8px;
  font-size: 12px; color: var(--ink-2); word-break: break-all;
}

/* ------------------------------ 页脚 ------------------------------ */
.foot { margin-top: 26px; text-align: center; color: var(--ink-3); font-size: 12px; }
.foot p { margin: 2px 0; }
.foot__sub { opacity: .75; }

/* ------------------------------ 小屏 ------------------------------ */
@media (max-width: 420px) {
  .pc { flex-direction: column; align-items: stretch; }
  .pc__qr { align-self: center; }
  .wrap { padding: 20px 14px calc(20px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .btn { transition: none; }
}