/* ================================================================
   app-page.css — 西红柿统计平台下载页专属样式
   仅补充 site.css 不覆盖的内容，避免全屏自定义风格
================================================================ */

.app-hero {
  text-align: center;
  padding: 20px 0 20px;
}

.app-hero h1 {
  font-size: 26px;
  margin-bottom: 6px;
  color: var(--text-main);
}

.app-hero .sub {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.app-version-info {
  font-size: 13px;
  color: var(--text-sub);
}

.app-version-info .version-divider {
  margin: 0 8px;
  color: #ddd;
}

/* ── 加载失败提示 ── */
.load-error {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 16px 20px;
  text-align: center;
  color: #856404;
  font-size: 14px;
  margin-bottom: 24px;
}

/* ── 平台卡片两列 ── */
.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

.platform-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 22px 24px;
  text-align: center;
  transition: box-shadow 0.2s;
}

.platform-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.platform-card-disabled {
  background: #fafafa;
}

.platform-card h2 {
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--text-main);
  border: none;
  padding: 0;
}

.platform-card-disabled h2 {
  color: #999;
}

.platform-desc {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 18px;
  line-height: 1.6;
}

.platform-card-disabled .platform-desc {
  color: #aaa;
}

/* ── 下载按钮组 ── */
.download-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.download-hint {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 0;
}

/* ── 禁用按钮 ── */
.btn-disabled {
  background-color: #e0e0e0;
  color: #999;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-disabled:hover:not(:disabled) {
  background-color: #e0e0e0;
  color: #999;
  border-color: #d0d0d0;
}

/* ── 大按钮 ── */
.btn-lg {
  padding: 10px 24px;
  font-size: 14px;
}

/* ── 信息卡片两列布局 ── */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
}

.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 20px 24px;
}

.info-card h2 {
  font-size: 15px;
  color: var(--text-main);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-card);
  font-weight: 500;
}

/* ── 版本信息行 ── */
.info-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.info-label {
  font-size: 13px;
  color: var(--text-sub);
  flex-shrink: 0;
}

.info-value {
  font-size: 13px;
  color: var(--text-main);
  text-align: right;
  word-break: break-all;
}

/* ── 更新内容占位 ── */
.update-placeholder {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .info-card {
    padding: 16px;
  }

  .info-row {
    flex-direction: column;
    gap: 2px;
  }

  .info-value {
    text-align: left;
    padding-left: 0;
  }
}