/*
  styles.css - 远程工具下载页面样式
  - 设计目标：醒目、直观、响应式
  - 包含：基础排版、卡片、下载按钮主题、网格布局、媒体查询
*/

/* 基础设置 */
:root {
  --bg: #0f172a;            /* 背景色 */
  --card: #111827;          /* 卡片背景 */
  --text: #e5e7eb;          /* 主文本色 */
  --muted: #94a3b8;         /* 辅助文本色 */
  --todesk: #22c55e;        /* ToDesk 按钮主色 */
  --sunlogin: #f59e0b;      /* 向日葵 按钮主色 */
  --ring: rgba(255,255,255,0.15);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* 字体栈调整：移除在线字体，使用本地系统字体，避免网络差异 */
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, #0b1220 0%, var(--bg) 60%);
  color: var(--text);
}

/* 页面容器 */
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh; /* 支持移动端地址栏可视高度 */
  padding: 32px;
}

.card {
  max-width: 960px;
  padding: 32px;
  margin: 0 auto;
}

.download-grid { gap: 20px; }

.download-button {
  padding: 18px 20px;
  gap: 16px;
}

.download-button__icon {
  width: 48px;
  height: 48px;
}

.download-button__icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.download-button__title { font-size: 20px; }
.download-button__desc { font-size: 13px; }

.download-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .card { padding: 22px; }
  .download-button { padding: 16px; }
  .download-button__icon { width: 44px; height: 44px; }
  .download-button__title { font-size: 18px; }
}
.card__header { margin-bottom: 16px; }
.card__title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
}
.card__subtitle {
  margin: 0;
  color: var(--muted);
}
.card__footer { margin-top: 18px; }
.card__tip { margin: 0; color: var(--muted); }

/* 下载按钮网格 */
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* 下载按钮样式 */
.download-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--text);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.16);
}
.download-button:active {
  transform: translateY(0);
}
.download-button__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.download-button__text { display: grid; }
.download-button__title { font-size: 18px; }
.download-button__desc { color: var(--muted); }

/* 主题色区分 */
.download-button--todesk {
  outline: 2px solid transparent;
}
.download-button--todesk .download-button__icon { color: var(--todesk); }
.download-button--todesk:hover { box-shadow: 0 10px 18px rgba(34, 197, 94, 0.25); }

.download-button--sunlogin {
  outline: 2px solid transparent;
}
.download-button--sunlogin .download-button__icon { color: var(--sunlogin); }
.download-button--sunlogin:hover { box-shadow: 0 10px 18px rgba(245, 158, 11, 0.25); }

/* 响应式 */
@media (max-width: 640px) {
  .card { padding: 20px; }
  .card__title { font-size: 24px; }
  .download-grid { grid-template-columns: 1fr; }
}

/* 演示视频样式 */
.video-section {
  margin-top: 20px;
  display: none; /* 初始不显示视频区域 */
}
.video-tip {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
}
.video-player {
  width: 100%;
  max-width: 960px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  display: none; /* 初始不显示视频窗口 */
}
.video-controls {
  display: none; /* 初始不显示控制按钮，待视频开始播放后再显示 */
  gap: 10px;
  margin-bottom: 10px;
}
.video-control-button {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
}
.video-control-button:hover {
  background: rgba(255,255,255,0.1);
}

/* 下载提示弹窗样式 */
.download-modal {
  position: fixed;
  inset: 0;
  display: none; /* 通过 .show 切换显示 */
  align-items: center;
  justify-content: center;
  background: #000; /* 不透明遮罩 */
  /* 取消背景虚化：在不透明遮罩下无意义且提升性能 */
  z-index: 1000;
}
.download-modal.show { display: flex; }
.download-modal__dialog {
  width: min(92vw, 560px);
  padding: 20px; /* 加大内边距，增强可读性 */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18); /* 强化边框 */
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); /* 更醒目的卡片质感 */
  color: var(--text);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--ring) inset; /* 更强的阴影与内圈 */
  animation: modalIn .18s ease; /* 入场动画 */
}
.download-modal__title {
  margin: 0 0 10px;
  font-size: 20px; /* 放大标题 */
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.download-modal__title::before {
  content: '⚠️'; /* 轻量提示图标 */
  font-size: 18px;
}
.download-modal__text {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px; /* 略微加大正文字号 */
  line-height: 1.6;
}
.download-modal .video-control-button {
  padding: 10px 16px; /* 提升点击面积 */
  border: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(34,197,94,0.35), rgba(34,197,94,0.15)); /* 使用 todesk 主题色做强调 */
}
.download-modal .video-control-button:hover {
  background: rgba(34,197,94,0.45);
}

@keyframes modalIn {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .download-modal__dialog { animation: none; }
}