/* ============================================================================
 * md2.css — Sticker-Hub 布局 + MD2 主题 + 自适应断点
 * ----------------------------------------------------------------------------
 * 主题走 CSS 变量，页面特有样式在 app.css。
 * 深色模式：html[data-theme="dark"] 覆盖 / prefers-color-scheme 媒体查询。
 * 网格密度：html[data-density="compact|comfortable|spacious"] 覆盖网格变量。
 * 主色：由 App 把 config.accentColor 写入 html style 的 --md2-primary 覆盖。
 * ==========================================================================*/

/* ---------- 主题变量（Light，默认） ---------- */
:root {
  color-scheme: light;

  /* 主色：MD2 Indigo 500 */
  --md2-primary: #3f51b5;
  --md2-primary-light: #757de8;
  --md2-primary-dark: #002984;
  --md2-on-primary: #ffffff;
  --md2-accent: #ff4081;

  /* 背景与表面 */
  --md2-bg: #fafafa;
  --md2-surface: #ffffff;
  --md2-surface-variant: #f0f0f0;
  --md2-on-surface: rgba(0, 0, 0, 0.87);
  --md2-on-surface-muted: rgba(0, 0, 0, 0.6);
  --md2-outline: rgba(0, 0, 0, 0.12);

  /* Elevation（MD2 阴影层级） */
  --md2-e1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  --md2-e2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
  --md2-e4: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);

  /* 圆角 / 间距 */
  --md2-radius: 8px;
  --md2-radius-lg: 16px;
  --md2-appbar-h: 56px;
  --md2-tabs-h: 48px;

  /* 字体栈：本地 Roboto/Noto Sans SC 缺失时回退系统字体 */
  --md2-font: Roboto, "Segoe UI", "Noto Sans SC", "PingFang SC",
              "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --md2-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---------- AppBar 尺寸（断点覆盖用变量，避免被 app.css 的固定值盖掉） ---------- */
  --search-w: 200px;        /* 搜索框宽度 */
  --appbar-pad-x: 16px;     /* AppBar 水平内边距（超宽屏增大以居中内容） */
  --appbar-gap: 4px;        /* AppBar 右侧操作区间距 */
  --icon-btn-s: 40px;       /* 图标按钮尺寸 */

  /* ---------- 内容限宽（超宽屏居中，避免 2K/4K/8K 下网格铺满全宽） ---------- */
  --content-max-w: none;

  /* ---------- 网格密度变量（对齐式网格，SPEC §7） ---------- */
  --grid-row-h: 48px;   /* 行高固定 */
  --grid-gap: 8px;
  --grid-pad: 12px;
}

/* 密度覆盖：compact / comfortable / spacious */
html[data-density="compact"] {
  --grid-row-h: 32px;
  --grid-gap: 4px;
  --grid-pad: 8px;
}
html[data-density="comfortable"] {
  --grid-row-h: 48px;
  --grid-gap: 8px;
  --grid-pad: 12px;
}
html[data-density="spacious"] {
  --grid-row-h: 64px;
  --grid-gap: 12px;
  --grid-pad: 16px;
}

/* ---------- 深色模式 ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --md2-bg: #121212;
  --md2-surface: #1e1e1e;
  --md2-surface-variant: #2a2a2a;
  --md2-on-surface: rgba(255, 255, 255, 0.92);
  --md2-on-surface-muted: rgba(255, 255, 255, 0.6);
  --md2-outline: rgba(255, 255, 255, 0.14);
  --md2-e1: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
  --md2-e2: 0 3px 6px rgba(0, 0, 0, .7), 0 3px 6px rgba(0, 0, 0, .5);
  --md2-e4: 0 14px 28px rgba(0, 0, 0, .8), 0 10px 10px rgba(0, 0, 0, .6);
}

/* 跟随系统 */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --md2-bg: #121212;
    --md2-surface: #1e1e1e;
    --md2-surface-variant: #2a2a2a;
    --md2-on-surface: rgba(255, 255, 255, 0.92);
    --md2-on-surface-muted: rgba(255, 255, 255, 0.6);
    --md2-outline: rgba(255, 255, 255, 0.14);
    --md2-e1: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
    --md2-e2: 0 3px 6px rgba(0, 0, 0, .7), 0 3px 6px rgba(0, 0, 0, .5);
    --md2-e4: 0 14px 28px rgba(0, 0, 0, .8), 0 10px 10px rgba(0, 0, 0, .6);
  }
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--md2-font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--md2-bg);
  color: var(--md2-on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img {
  -webkit-user-drag: none;
  user-select: none;
  vertical-align: middle;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a { color: var(--md2-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ---------- 简单 Ripple（用 hover/active 模拟，SPEC §11 MD2 视觉） ---------- */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.ripple:active::after { opacity: .15; }

/* ---------- 自适应断点 ---------- */
/* 手机 < 600px：单列 AppBar、收窄搜索框、紧凑网格 */
@media (max-width: 599px) {
  body { font-size: 13px; }
  :root {
    --search-w: 120px;
    --appbar-pad-x: 8px;
    --icon-btn-s: 36px;
    --appbar-gap: 4px;
    --grid-pad: 8px;
  }
  .appbar { gap: 8px; }
  .appbar-title { font-size: 17px; }
  #source-count { display: none !important; }  /* 窄屏隐藏“n 个来源”，避免挤爆 AppBar */
}

/* 超小屏（< 360px）：进一步收窄搜索框、压缩 AppBar */
@media (max-width: 359px) {
  :root {
    --search-w: 88px;
    --appbar-pad-x: 6px;
    --icon-btn-s: 34px;
    --appbar-gap: 2px;
  }
  .appbar-title { font-size: 15px; }
}

/* 平板 600–960px：多列网格（默认变量即可） */
@media (min-width: 600px) and (max-width: 959px) {
  :root { --grid-pad: 12px; }
}

/* 桌面 > 960px：更多列、更大内边距 */
@media (min-width: 960px) {
  :root { --grid-pad: 16px; }
}

/* ---------- 大屏密度 + 内容限宽（1K/2K/4K/8K 自适应） ---------- */
/* 1440p 起始：网格增大、内容限宽居中 */
@media (min-width: 1440px) {
  :root {
    --grid-row-h: 56px;
    --grid-gap: 10px;
    --content-max-w: 1400px;
    --appbar-pad-x: max(16px, calc((100vw - 1400px) / 2));
  }
}
/* 1920px（2K）：进一步增大 */
@media (min-width: 1920px) {
  :root {
    --grid-row-h: 64px;
    --grid-gap: 12px;
    --content-max-w: 1760px;
    --appbar-pad-x: max(16px, calc((100vw - 1760px) / 2));
  }
}
/* 2560px（4K 起始）：进一步增大 */
@media (min-width: 2560px) {
  :root {
    --grid-row-h: 72px;
    --grid-gap: 14px;
    --content-max-w: 2400px;
    --appbar-pad-x: max(16px, calc((100vw - 2400px) / 2));
  }
}
/* 3840px（4K/8K）：表情最大化，长屏友好 */
@media (min-width: 3840px) {
  :root {
    --grid-row-h: 88px;
    --grid-gap: 16px;
    --content-max-w: 3200px;
    --appbar-pad-x: max(16px, calc((100vw - 3200px) / 2));
  }
}

/* 支持横向滚动的容器（Tabs、网格）显示细滚动条 */
.tabs::-webkit-scrollbar,
.grid::-webkit-scrollbar { height: 6px; width: 6px; }
.tabs::-webkit-scrollbar-thumb,
.grid::-webkit-scrollbar-thumb { background: var(--md2-outline); border-radius: 3px; }