/*
  Alen Photo Portal - style.css（注释版）

  这份 CSS 的核心思想：
  1. 手机优先：页面宽度限制在 480px，扫码打开最舒服。
  2. 固定背景：background.jpg 作为氛围图，不再自动每日更新。
  3. 卡片承载信息：背景负责氛围，卡片负责可读性。
  4. 深浅色可切换：深色适合夜间/暗背景，浅色适合明亮环境。

  修改建议：
  - 想改颜色：优先改 :root 和 html[data-theme="light"]。
  - 想改间距：找 padding / margin / gap。
  - 想改圆角：找 border-radius。
  - 想改按钮大小：找 .link。
*/

/* =========================
   01. 颜色变量：深色模式
   =========================

   :root 是默认主题，目前默认是深色模式。

   CSS 变量写法：
   --text: #f7f1e8;

   使用时：
   color: var(--text);

   好处：
   以后想换整体颜色，只改变量，不用到处找。
*/
:root {
  /* 主文字颜色。用于标题、按钮文字等。 */
  --text: #f7f1e8;

  /* 次要文字颜色。透明度 0.72，适合说明文字。 */
  --muted: rgba(247, 241, 232, .72);

  /* 更淡的文字。用于更新时间、小标签。 */
  --faint: rgba(247, 241, 232, .50);

  /*
    普通卡片背景。
    最后一位 .56 是透明度。
    数字越大越不透明，文字越清楚，背景越不明显。
  */
  --card: rgba(18, 18, 18, .56);

  /*
    Hero 卡片背景。
    Hero 是最重要的卡片，所以比普通卡片更实一点。
  */
  --card-strong: rgba(18, 18, 18, .74);

  /* 边框颜色。透明白色，营造轻微玻璃感。 */
  --border: rgba(255, 255, 255, .16);

  /* 普通按钮背景。 */
  --button: rgba(255, 255, 255, .11);

  /* 鼠标悬停按钮背景。手机上不明显，但电脑访问时会有反馈。 */
  --button-hover: rgba(255, 255, 255, .17);

  /* 主按钮背景。深色模式下用接近米白的颜色突出“添加 QQ”。 */
  --primary-bg: rgba(247, 241, 232, .94);

  /* 主按钮文字。 */
  --primary-text: #151515;

  /* 阴影。卡片浮起来的感觉来自它。 */
  --shadow: rgba(0, 0, 0, .34);

  /*
    强调色，写成 RGB 三个数字。
    用于 Hero 的淡渐变、进度条。
    你可以改成：
    --accent: 180 160 120;  暖咖色
    --accent: 120 160 210;  冷蓝色
  */
  --accent: 210 170 120;
}

/* =========================
   02. 颜色变量：浅色模式
   =========================

   你说“明亮状态下配置不太好看”，主要问题通常是：
   - 卡片太透明，背景透进来显脏。
   - 文字不够深，层级不清楚。
   - 浅色遮罩太白，像糊了一层雾。

   所以这里做了调整：
   - 卡片更接近暖白纸张。
   - 文字更深。
   - 阴影更柔和。
   - 按钮更干净。
*/
html[data-theme="light"] {
  --text: #211b15;
  --muted: rgba(33, 27, 21, .72);
  --faint: rgba(33, 27, 21, .50);

  /*
    浅色卡片不要太透明。
    .84 会更像柔和纸张，不会让背景颜色污染内容。
  */
  --card: rgba(255, 250, 240, .84);
  --card-strong: rgba(255, 250, 240, .90);

  --border: rgba(88, 62, 38, .16);
  --button: rgba(255, 250, 240, .82);
  --button-hover: rgba(255, 250, 240, .94);

  /*
    浅色模式下，主按钮用深色，形成明确行动入口。
  */
  --primary-bg: #211b15;
  --primary-text: #fff7ec;

  --shadow: rgba(86, 60, 32, .18);

  /*
    浅色模式的强调色稍微压暗，不然会显得发飘。
  */
  --accent: 176 126 72;
}

/* =========================
   03. 全局基础设置
   ========================= */

/*
  box-sizing: border-box
  这行非常重要。

  它让 width 包含 padding 和 border。
  否则布局时很容易出现“明明 100%，却超出屏幕”的问题。
*/
* {
  box-sizing: border-box;
}

/* 给 html 一个深色底，防止背景图加载前闪白。 */
html {
  min-height: 100%;
  background: #111;
}

/*
  body 是网页最外层可见区域。
  overflow-x: hidden 防止移动端出现横向滚动条。
*/
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}

/* =========================
   04. 固定背景与遮罩
   ========================= */

/*
  .wallpaper 是固定背景层。

  position: fixed + inset: 0
  代表它固定铺满整个屏幕。

  z-index: -3
  让它在所有内容下面。

  background-image: url("./background.jpg")
  代表它读取同目录下的 background.jpg。

  你现在取消自动更新背景，所以以后只需要替换 background.jpg。
*/
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -3;

  /*
    如果 background.jpg 加载失败，就显示下面这组备用渐变背景。
  */
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(135deg, #151515, #2b241b 55%, #121212);

  background-image: url("./background.jpg");
  background-size: cover;
  background-position: center;

  /*
    scale(1.04) 略微放大背景。
    好处是避免部分手机浏览器边缘露出空隙。
  */
  transform: scale(1.04);
}

/*
  .veil 是背景遮罩层。

  它不承载内容，只改变背景视觉强度。
  如果背景太暗：降低 rgba 最后一位。
  如果文字看不清：提高 rgba 最后一位。
*/
.veil {
  position: fixed;
  inset: 0;
  z-index: -2;

  /*
    深色模式遮罩：
    顶部稍暗，底部也有一点暗。
    目前数值偏轻，能保留背景图细节。
  */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .18)),
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, .18) 88%);
}

/*
  浅色模式遮罩：
  不再铺很重的白雾，而是用轻微暖色让背景柔和。
  如果你觉得浅色模式仍然灰，可以把 .18 降到 .10。
*/
html[data-theme="light"] .veil {
  background:
    linear-gradient(180deg, rgba(255, 248, 236, .18), rgba(255, 248, 236, .30)),
    radial-gradient(circle at center, transparent 0%, rgba(255, 248, 236, .24) 92%);
}

/* =========================
   05. 主容器与顶部栏
   ========================= */

/*
  .page 控制页面主体宽度。

  width: min(100%, 480px)
  表示：
  - 手机上宽度就是 100%
  - 大屏上最多 480px

  这就是“手机优先”的关键。
*/
.page {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 24px 18px 34px;
}

/*
  .topbar 是顶部标题栏。

  flex-wrap: wrap
  允许标题太长时自动换行，避免把右侧按钮挤出屏幕。
*/
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 2px 18px;
}

/*
  min-width: 0 是 Flex 布局里的经典保护写法。
  它允许标题区域在空间不足时正常收缩/换行。
*/
.topbar > div {
  flex: 1;
  min-width: 0;
}

/* 小号品牌标识。letter-spacing 让它更像杂志/品牌字。 */
.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .20em;
}

/*
  h1 主标题。

  clamp(34px, 9vw, 42px)
  意思是：
  - 最小 34px
  - 理想值是屏幕宽度的 9%
  - 最大 42px
*/
h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 9vw, 42px);
  line-height: .98;
  letter-spacing: -.05em;
  word-break: break-word;
}

/* 深浅色切换按钮。 */
.theme-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--card);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px var(--shadow);
  cursor: pointer;
}

/* =========================
   06. 通用卡片
   ========================= */

/*
  所有信息模块都使用 .card。

  border-radius 控制圆角。
  backdrop-filter 控制毛玻璃。
  background 控制透明度。
*/
.card {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 20px 60px var(--shadow);
}

/* =========================
   07. Hero 模块
   ========================= */

/*
  Hero 不设置固定 height。
  原因：
  文字变长时，卡片应该自动变高，而不是裁切内容。

  如果你觉得 Hero 太高：
  改 padding 或 gap，不要写 height。
*/
.hero {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  /*
    第一层是强调色淡渐变。
    第二层是卡片背景。
  */
  background:
    linear-gradient(135deg, rgba(var(--accent), .18), transparent 55%),
    var(--card-strong);
}

.hero-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/*
  Hero 主句。
  你现在的“朋友，别来无恙。”就是这里。
*/
.hero-text {
  margin: 0;
  font-family: Georgia, "Times New Roman", "PingFang SC", serif;
  font-size: clamp(32px, 10vw, 48px);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: -.06em;
}

/* Hero 里的简洁状态，两列布局。 */
.hero-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-status div {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;

  /*
    这里用轻微白色叠层。
    在深色模式是玻璃反光。
    在浅色模式也会因为卡片变量更实而不会太脏。
  */
  background: rgba(255, 255, 255, .07);
}

/* 浅色模式里，小状态块改成更暖的纸面色，避免灰蒙蒙。 */
html[data-theme="light"] .hero-status div,
html[data-theme="light"] .status-grid div,
html[data-theme="light"] .tips {
  background: rgba(255, 255, 255, .42);
}

.hero-status small {
  display: block;
  color: var(--faint);
  font-size: 12px;
  margin-bottom: 5px;
}

.hero-status strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

.hero-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.hero-updated {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
}

/* =========================
   08. 折叠返图说明 / 详细进度 / FAQ
   ========================= */

.guide,
.status-card,
.faq {
  margin-top: 14px;
  padding: 20px;
}

/*
  details/summary 是 HTML 原生折叠组件。
  优点：
  不需要 JavaScript，也能点击展开。
*/
.guide summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* 隐藏 Safari/Chrome 默认小三角，保持设计统一。 */
.guide summary::-webkit-details-marker {
  display: none;
}

.summary-title {
  font-size: 18px;
  font-weight: 760;
}

.summary-hint {
  color: var(--muted);
  font-size: 12px;
}

/* 展开后隐藏“点击展开”，避免重复。 */
.guide[open] .summary-hint {
  visibility: hidden;
}

/* 展开后标题和内容之间增加一点距离。 */
.guide[open] summary {
  margin-bottom: 16px;
}

/* 模块标题，例如“详细进度”“常见问题”。 */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
}

/* =========================
   09. 返图步骤
   ========================= */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/*
  counter-increment 配合 ::before 可以自动生成 1、2、3。
  好处是以后你增删步骤，不用手动改序号。
*/
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 800;
}

.steps strong {
  display: block;
  margin-bottom: 4px;
}

.steps p,
.tips p,
.status-note,
.faq p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.tips {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
}

/* =========================
   10. 详细进度
   ========================= */

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.status-grid div {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
}

.status-grid small {
  display: block;
  color: var(--faint);
  margin-bottom: 6px;
}

.status-grid strong {
  font-size: 16px;
}

.status-note {
  margin-top: 14px;
}

.progress-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.progress-item {
  display: grid;
  gap: 6px;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

/* 进度条底槽。 */
.bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

/* 浅色模式下进度条底槽更明显一点。 */
html[data-theme="light"] .bar {
  background: rgba(33, 27, 21, .12);
}

/* 进度条填充部分，宽度由 JS 通过 --value 控制。 */
.bar span {
  display: block;
  height: 100%;
  width: var(--value);
  background: rgb(var(--accent));
  border-radius: inherit;
}

.updated {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 12px;
}

/* =========================
   11. 联系按钮
   ========================= */

.links {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

/*
  .link 同时用于：
  - a 链接
  - button 按钮

  所以这里写 font: inherit，让 button 也继承网页字体。
*/
.link {
  width: 100%;
  min-height: 66px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--button);
  color: var(--text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font: inherit;
  box-shadow: 0 16px 44px var(--shadow);
  transition: transform .18s ease, background .18s ease;
  text-decoration: none;
  cursor: pointer;
}

.link:hover {
  transform: translateY(-2px);
  background: var(--button-hover);
}

.link span {
  font-size: 16px;
  font-weight: 720;
}

.link small {
  color: var(--muted);
  font-size: 12px;
}

/* 主行动按钮。 */
.link.primary {
  background: var(--primary-bg);
  color: var(--primary-text);
}

.link.primary small {
  color: rgba(21, 21, 21, .62);
}

html[data-theme="light"] .link.primary small {
  color: rgba(247, 241, 232, .62);
}

/* =========================
   12. FAQ
   ========================= */

.faq details {
  border-top: 1px solid var(--border);
  padding: 13px 0;
}

.faq details:first-of-type {
  border-top: none;
}

.faq summary {
  cursor: pointer;
  font-weight: 680;
}

.faq details p {
  padding-top: 8px;
}

/* =========================
   13. 页脚
   ========================= */

footer {
  padding: 24px 8px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

footer p {
  margin: 0 0 8px;
}

.copyright {
  opacity: .55;
}

/* =========================
   14. 大屏微调
   =========================

   虽然这个网站主要面向手机，
   但电脑访问时顶部多一点留白会更舒服。
*/
@media (min-width: 760px) {
  .page {
    padding-top: 44px;
  }
}