/* ==========================================================================
   小花社区 · 设计系统 base.css
   iOS 26 Liquid Glass：全局毛玻璃 + 分层透明 + 动态背景（给玻璃"可折射"的东西）
   —— 玻璃要有内容才好看：背景放慢速流动的色斑，玻璃才有折射感。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  /* 圆角 */
  --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-full: 9999px;

  /* 缓动（iOS 那套） */
  --ease-ios:    cubic-bezier(.32,.72,0,1);
  --ease-spring: cubic-bezier(.34,1.42,.5,1);
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-inout:  cubic-bezier(.65,0,.35,1);

  /* 时长 */
  --d1: .16s; --d2: .26s; --d3: .42s; --d4: .68s; --d5: 1.1s;

  /* 强调色（小花 = 暖橙 → 桃粉） */
  --accent:   #ff8a3d;
  --accent-2: #ff5f8f;
  --accent-g: linear-gradient(135deg, var(--accent), var(--accent-2));

  --sidebar-w: 268px;
  --topbar-h: 64px;
}

/* ---------- 深色（默认）---------- */
html[data-theme="dark"] {
  --bg:        #07080d;
  --bg-2:      #0c0e16;
  --fg:        #eef1f8;
  --fg-2:      #b9c0d4;
  --fg-3:      #7d859c;
  --fg-4:      #545b70;

  --glass-bg:   rgba(255,255,255,.055);
  --glass-bg-2: rgba(255,255,255,.09);
  --glass-line: rgba(255,255,255,.10);
  --glass-hi:   rgba(255,255,255,.14);
  --glass-shadow: 0 12px 40px rgba(0,0,0,.42);

  --card-bg:   rgba(255,255,255,.045);
  --hover:     rgba(255,255,255,.06);
  --active:    rgba(255,255,255,.10);

  --blob-1: #ff7a3d; --blob-2: #ff4d7d; --blob-3: #5b6cff; --blob-4: #17c3b2;
  --blob-o: .34;
  color-scheme: dark;
}

/* ---------- 浅色 ---------- */
html[data-theme="light"] {
  --bg:        #eef1f7;
  --bg-2:      #e6eaf3;
  --fg:        #14161d;
  --fg-2:      #414658;
  --fg-3:      #6b7288;
  --fg-4:      #9aa1b4;

  --glass-bg:   rgba(255,255,255,.55);
  --glass-bg-2: rgba(255,255,255,.72);
  --glass-line: rgba(255,255,255,.75);
  --glass-hi:   rgba(255,255,255,.9);
  --glass-shadow: 0 12px 40px rgba(60,70,110,.16);

  --card-bg:   rgba(255,255,255,.6);
  --hover:     rgba(0,0,0,.04);
  --active:    rgba(0,0,0,.07);

  --blob-1: #ffb37a; --blob-2: #ff9bb8; --blob-3: #9fb0ff; --blob-4: #8fe3da;
  --blob-o: .55;
  color-scheme: light;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;                /* 滚动交给内容区，侧边栏固定 */
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 动态背景（玻璃的"折射源"）----------
   ⚠️ 性能铁律（实测）：绝不能用 filter: blur() 做大色斑 —— 90px 模糊的大图层
      每帧都要重新栅格化，实测把帧率从 62 打到 3。改用「径向渐变」模拟柔和边缘：
      视觉几乎一致，但零滤镜开销。缩放只做很轻微的幅度。 */
.bg-field { position: fixed; inset: -20%; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-field i {
  position: absolute; display: block; border-radius: 50%;
  opacity: var(--blob-o);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: blobFloat linear infinite;
}
.bg-field i:nth-child(1) { width: 46vw; height: 46vw; left: -6vw;  top: -8vw;  background: radial-gradient(circle at 50% 50%, var(--blob-1), transparent 70%); animation-duration: 34s; }
.bg-field i:nth-child(2) { width: 40vw; height: 40vw; right: -4vw; top: 12vw;  background: radial-gradient(circle at 50% 50%, var(--blob-2), transparent 70%); animation-duration: 41s; animation-direction: reverse; }
.bg-field i:nth-child(3) { width: 44vw; height: 44vw; left: 18vw;  bottom: -12vw; background: radial-gradient(circle at 50% 50%, var(--blob-3), transparent 70%); animation-duration: 47s; }
.bg-field i:nth-child(4) { width: 34vw; height: 34vw; right: 8vw;  bottom: -6vw;  background: radial-gradient(circle at 50% 50%, var(--blob-4), transparent 70%); animation-duration: 38s; animation-direction: reverse; }

@keyframes blobFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(4vw, -3vw, 0) scale(1.06); }
  66%  { transform: translate3d(-3vw, 4vw, 0) scale(.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* 背景之上加一层细噪点，避免大面积渐变出现色带 */
.bg-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- 玻璃基类 ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.glass-strong {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(40px) saturate(210%);
  backdrop-filter: blur(40px) saturate(210%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* ---------- 文本工具类 ---------- */
.t-2 { color: var(--fg-2); } .t-3 { color: var(--fg-3); } .t-4 { color: var(--fg-4); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mono { font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; }

/* ---------- 滚动条 ---------- */
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(140,150,180,.28); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(140,150,180,.45); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 画廊格子：刻意不用 .card（card 带 backdrop-filter，120 个格子同时毛玻璃会拖垮低端机） */
.anim-cell {
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  contain: layout paint style;   /* 把重绘范围限制在格子里 */
}

/* ---------- 弱设备自动降级（perf-lite）----------
   实测：软件渲染下 backdrop-filter + 动态背景是主要开销。
   真实 GPU 设备上毛玻璃是硬件合成、不吃力；但低端机/省电模式可能掉帧。
   app.js 会采 2 秒帧率，< 30fps 自动挂 html.perf-lite，也可手动切换。 */
html.perf-lite .bg-field i { animation: none !important; }
html.perf-lite .sidebar,
html.perf-lite .topbar { -webkit-backdrop-filter: blur(12px) saturate(150%) !important; backdrop-filter: blur(12px) saturate(150%) !important; }
html.perf-lite .card,
html.perf-lite .glass,
html.perf-lite .glass-strong { -webkit-backdrop-filter: blur(8px) saturate(140%) !important; backdrop-filter: blur(8px) saturate(140%) !important; }
html.perf-lite .rise { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- 无障碍 ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bg-field i { animation: none; }
}