/* ============================================================
 * Zm-Album PC 端页面规范（所有新增 Web 应用沿用）
 *
 * 适配目标：1024×768（最低）/ 1600×1200 / 1920×1080（主用）
 *           2560×1440（2K）/ 3840×2160（4K）
 *
 * 核心前提：按 **CSS 视口宽度** 分档，不是物理分辨率。
 *   4K 屏在 Windows 150%/200% 缩放下 CSS 视口通常是 2560/1920，
 *   只有 100% 缩放才出现 3840 视口。DPR 只影响图片清晰度，不影响布局。
 *
 * 断点（CSS 变量不能用于 @media 条件，数值必须写死）：
 *   S    1024–1279    1024×768              紧凑、单列、表格横滚
 *   M    1280–1599    过渡                  标准（默认）
 *   L    1600–1919    1600×1200 (4:3)      宽
 *   XL   1920–2559    1920×1080 / 4K@200% 主用
 *   XXL  ≥2560        2560×1440 / 4K@100% 超宽，内容居中限宽
 *
 * 规则：
 *   1. 侧栏固定宽；内容区自适应且限宽居中，禁止表格/文本行铺满 3840px。
 *   2. 字号有限缩放（正文 14–17px），不随分辨率线性放大。
 *   3. 间距走 8pt 网格；色块圆角、线性图标线宽各档一致。
 *   4. 1024×768 短屏下侧栏与内容区各自滚动，头部不被挤掉。
 *   5. 卡片网格 auto-fill + minmax，列数随宽度变化并受容器限宽约束。
 *   6. 图片按三档选：卡片 _s(400) / 详情 _m(1600) / 原图 _o，高 DPR 复用同一 URL。
 *   7. 需回归 100% / 125% / 150% / 200% 浏览器缩放。
 * ============================================================ */
:root {
  /* 色块与主题（由 config/bootstrap 下发覆盖） */
  --c-primary: #3B4CCA;
  --c-accent: #F2A65A;
  --c-bg: #F5F6FA;
  --c-surface: #FFFFFF;
  --c-text: #1B1D2A;
  --c-muted: #7A8095;
  --shadow: 0 6px 20px rgba(27, 29, 42, .06);
  --radius: 16px;
  --icon-stroke: 1.75;

  /* 8pt 间距网格 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --gap: var(--sp-4);

  /* 字号阶梯 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 18px; --fs-h1: 26px; --fs-h2: 20px; --fs-h3: 16px;

  /* 布局（M 档默认值） */
  --sidebar-w: 220px;
  --content-max: 1240px;
  --tile-min: 190px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-base)/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-6); }
h1 { margin: 0 0 6px; font-size: var(--fs-h1); letter-spacing: .5px; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }

/* 时尚色块化：大圆角纯色卡片，克制阴影，不用渐变与拟物 */
.block {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
  overflow-x: auto; /* 1024 档下宽表格可横滚 */
}
.block--primary { background: var(--c-primary); color: #fff; }
.block--accent { background: var(--c-accent); color: #fff; }
.block--tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--c-text);
  transition: transform .15s ease;
}
.block--tile:hover { transform: translateY(-3px); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

/* 线性图标统一线宽与圆角端点 */
.tile-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--c-primary);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hint { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--sp-6); }
.hint a { color: var(--c-primary); }

/* S：最低分辨率 1024×768，压缩间距与侧栏，内容不再额外限宽 */
@media (max-width: 1279px) {
  :root {
    --sp-4: 12px; --sp-6: 16px; --sp-8: 24px;
    --sidebar-w: 196px; --content-max: none; --tile-min: 168px;
    --fs-base: 14px; --fs-h1: 22px; --fs-h2: 18px;
  }
  .page { padding: var(--sp-4); }
  .block { padding: var(--sp-4); }
}

/* L：1600×1200（4:3），垂直空间充足，可用更宽网格 */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root { --sidebar-w: 236px; --content-max: 1480px; --tile-min: 212px; }
}

/* XL：1920×1080 主用，也是 4K@200% 的实际视口 */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    --sidebar-w: 248px; --content-max: 1640px; --tile-min: 228px; --fs-base: 16px;
  }
}

/* XXL：2K / 4K@100%，内容限宽居中，避免超长文本行 */
@media (min-width: 2560px) {
  :root {
    --sidebar-w: 264px; --content-max: 1920px; --tile-min: 252px;
    --fs-base: 17px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 18px;
  }
}

/* 短屏（1024×768）：侧栏自身滚动，页面上下留白收紧 */
@media (max-height: 800px) {
  .sidebar { overflow-y: auto; }
  .page { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
}