/* base.css — 全站基础变量与默认（夜樱）调色板
   2026-09-20：32 套皮肤调色板已拆到 styles/skins/forum/<主题>.css，由 ui/theme.js 按需挂载 */
:root, [data-theme="light"] {
    --bg-page: #f7f7f8;
    --bg-surface: #ffffff;
    --bg-subtle: #f2f2f4;
    --bg-hover: #f4f4f6;
    --bg-active: #ececef;
    --text-primary: #17181c;
    --text-secondary: #5b5f66;
    --text-tertiary: #8b9099;
    --text-caption: #a9aeb6;
    --border-1: rgba(0, 0, 0, .06);
    --border-2: rgba(0, 0, 0, .10);
    --border-3: rgba(0, 0, 0, .16);
    --accent: #2b2d33;
    --accent-hover: #17181c;
    --accent-fg: #ffffff;
    --focus-ring: rgba(0, 0, 0, .10);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, .12);
    --gold: #c99a2e;
    --sakura: #f2547d;
    --grid-dot: rgba(0, 0, 0, .05);
    --particle: 43, 45, 51;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --font: "PingFang SC", "Microsoft YaHei", "Segoe UI", -apple-system,
            BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  }
[data-theme="dark"] {
    --bg-page: #0f1013;
    --bg-surface: #17181c;
    --bg-subtle: #1d1f24;
    --bg-hover: #22242a;
    --bg-active: #2a2d34;
    --text-primary: #f0f1f3;
    --text-secondary: #b4b8bf;
    --text-tertiary: #8b9099;
    --text-caption: #676c75;
    --border-1: rgba(255, 255, 255, .07);
    --border-2: rgba(255, 255, 255, .12);
    --border-3: rgba(255, 255, 255, .18);
    --accent: #f0f1f3;
    --accent-hover: #ffffff;
    --accent-fg: #17181c;
    --focus-ring: rgba(255, 255, 255, .14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);
    --gold: #e0b24a;
    --sakura: #ff7ba0;
    --grid-dot: rgba(255, 255, 255, .055);
    --particle: 224, 226, 230;
  }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 「主题颜色」（强调色）规则已移到 styles/colors.css —— 它必须在主题皮肤 CSS **之后**加载，
   否则皮肤里的 --accent 会覆盖玩家选的颜色（非默认主题失效的根因）。 */
html[data-skin]:not([data-skin="normal"]) .topbar,
  html[data-skin]:not([data-skin="normal"]) .sidebar { border-color: var(--border-2); }
html[data-skin]:not([data-skin="normal"]) .side-section { color: var(--accent); }
html, body { height: 100%; }
body {
    font-family: var(--font); color: var(--text-primary); background: var(--bg-page);
    -webkit-font-smoothing: antialiased; overflow: hidden;
    transition: background .3s ease, color .3s ease;
  }
button, input, textarea { font-family: inherit; }
::selection { background: var(--bg-active); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
.mc-ico {
    width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;
    image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: -3px;
  }
.mc-ico.lg { width: 22px; height: 22px; }
.mc-ico.xl { width: 30px; height: 30px; }
.mc-ico.smooth { image-rendering: auto; }

  /* ── 内容图片异步加载占位（util/img.js）──────────────────────
     .mc-img：加载前显示主题占位图（--img-ph，theme.js 按皮肤设置），
     加载完成后淡入；失败时保留占位图。mc-img-lg：大图占位期给最小高度防塌陷。 */
  img.mc-img {
    background: var(--bg-subtle) center no-repeat;
    background-image: var(--img-ph, url("/assets/mc/cherry_sapling.png"));
    background-size: 26px 26px;
    opacity: 0;
    transition: opacity .3s ease;
  }
  img.mc-img.loaded { opacity: 1; background: none; }
  img.mc-img.err { opacity: 0; }
  img.mc-img.mc-img-lg:not(.loaded):not(.err) { min-height: 140px; }