/* =============================================================
   Sonder · 水墨液态玻璃主题
   浅色=宣纸水墨 | 深色=墨黑山水
   液态玻璃：backdrop-filter blur+saturate+brightness + rgba 半透明
   不支持 backdrop-filter 时自动退化为实底（@supports fallback）
   ============================================================= */

/* =============================================================
   断点契约（唯一真源，改断点须过 tests/responsive.test.js 白名单）：
   ≤360 超小屏 | 361–720 手机 | 721–960 平板 | 961–1240 桌面 | >1240 限宽居中
   ============================================================= */
:root {
  color-scheme: light;
  /* 浅色 · 宣纸水墨 */
  --bg: #f2efe6;
  --ink-blob-1: rgba(128, 116, 92, 0.20);
  --ink-blob-2: rgba(100, 104, 130, 0.18);
  --ink-mount: rgba(80, 76, 66, 0.10);

  --glass: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.52);
  --glass-sober: rgba(252, 249, 242, 0.92);

  --text: #2b2620;
  /* P4a：原 #8d8578 对 --bg 对比度仅 3.17:1（WCAG AA 普通文本需 ≥4.5），加深至 4.85:1 */
  --muted: #6f675c;
  --soft-text: rgba(43, 38, 32, 0.9);
  --border: rgba(120, 108, 88, 0.26);
  --border-hi: rgba(255, 255, 255, 0.85);

  --accent: #c23b2e;          /* 朱砂红 */
  --accent-soft: rgba(194, 59, 46, 0.10);
  --danger: #a83225;
  --ok: #2e7d63;              /* 石绿 */
  --ok-soft: rgba(46, 125, 99, 0.10);
  --warn: #b0723f;            /* 赭石 */
  --warn-soft: rgba(176, 114, 63, 0.12);
  /* P4a 续：状态文本专用加深色。--warn/--ok/--accent 对 --bg 仅 3.2~4.3:1 不足 WCAG AA，
   * 文本一律使用 *_text（≥4.5:1），装饰/背景仍用原 token */
  --warn-text: #8a5220;
  --ok-text: #23634e;
  --accent-text: #a93125;
  --huaqing: #3b4a6b;         /* 花青 */
  --prio-soft: #a8a297;       /* 淡墨（低优先级圆点） */

  --ink-ripple: rgba(40, 30, 20, 0.16);  /* 点击墨点晕色（浅色纸面） */
  --sheen: rgba(255, 255, 255, 0.26);    /* 统计卡光泽扫过（浅色纸面） */
  --shadow: 0 14px 44px rgba(40, 30, 20, 0.22), inset 0 1px 0 var(--border-hi);
  --radius: 20px;
  --wallpaper-opacity: 0.4;   /* 壁纸透明度默认 40%（js 按设置覆盖） */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ink: cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
  color-scheme: dark;
  /* 深色 / 墨黑山水 */
  --bg: #171410;
  --ink-blob-1: rgba(226, 214, 190, 0.06);
  --ink-blob-2: rgba(190, 200, 220, 0.05);
  --ink-mount: rgba(230, 220, 200, 0.05);

  --glass: rgba(42, 35, 27, 0.62);
  --glass-2: rgba(48, 40, 31, 0.5);
  --glass-sober: rgba(26, 22, 17, 0.94);

  --text: #e8e2d8;
  --muted: #a29b8c;
  --border: rgba(255, 245, 225, 0.14);
  --border-hi: rgba(255, 255, 255, 0.22);

  --accent: #e0643f;
  --accent-soft: rgba(224, 100, 63, 0.16);
  /* 深色主题用亮色调的状态文本（浅色 *_text 在深底上对比不足） */
  --warn-text: #e2b27e;
  --ok-text: #6fbfa3;
  --accent-text: #f08a63;
  --ink-ripple: rgba(232, 226, 216, 0.12); /* 深色墨黑山水：以亮墨为晕色 */
  --sheen: rgba(255, 255, 255, 0.08);
  --shadow: 0 14px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --wallpaper-opacity: 0.4;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 800px at 88% -8%, var(--ink-blob-1), transparent 62%),
    radial-gradient(950px 650px at -12% 104%, var(--ink-blob-2), transparent 55%),
    radial-gradient(700px 400px at 30% 18%, var(--ink-mount), transparent 70%);
  color: var(--text);
  font-size: 14px;
}
/* 壁纸背景层：默认项目山水图，透明度由设置控制（默认 var(--wallpaper-opacity)=0.4）
 * 层内 <img> 用 object-fit: cover 铺满视口（所有机型/桌面统一适配，不拉伸变形、居中）
 * 自定义壁纸时由 JS 直接改写 img.src（data URL 无 background-image 长度限制） */
#wallpaperLayer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: var(--wallpaper-opacity, 0.4);
  transition: opacity .2s var(--ease);
  pointer-events: none;
}
#wallpaperLayer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  opacity: 0.35;
  pointer-events: none;
}
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------- 液态玻璃基类 ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--border-hi);
}
/* 不支持 backdrop-filter 的浏览器：降级为较实的底色，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-sober); }
  .card, .list-item, .rank-card, .modal, .nav button { background: var(--glass-sober); }
}

/* ---------- 侧边栏 ---------- */
.sidebar {
  width: 212px; flex: 0 0 212px; display: flex; flex-direction: column;
  padding: 18px 10px;
  border-right: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--border-hi);
}
.brand {
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  font-weight: 700; font-size: 20px; letter-spacing: 2px;
  padding: 6px 12px 18px; display: flex; align-items: center; gap: 8px;
}
.brand .dot {
  width: 14px; height: 14px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), #8f2d1f);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(12px) saturate(1.5) brightness(1.02);
  backdrop-filter: blur(12px) saturate(1.5) brightness(1.02);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 var(--border-hi), 0 2px 10px rgba(40, 30, 20, 0.10);
  color: var(--muted); font-size: 14px; text-align: left; cursor: pointer;
  transition: transform .14s var(--ease), color .18s var(--ease), background .18s var(--ease),
    border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.nav button:hover {
  color: var(--text); transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--border-hi), 0 6px 18px rgba(40, 30, 20, 0.12);
}
.nav button:active { transform: scale(.97); }
.nav button.active {
  background: linear-gradient(120deg, var(--accent-soft), rgba(194, 59, 46, 0.05));
  border-color: rgba(194, 59, 46, 0.5);
  color: var(--accent); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--border-hi), 0 6px 18px rgba(194, 59, 46, 0.16);
}
.nav .ico { width: 18px; text-align: center; }

/* ---------- 主区 ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 12px; padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--border-hi);
  position: sticky; top: 0; z-index: 5;
}
/* 存储接近上限警示条 */
.quota-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -8px 0 0; padding: 8px 22px;
  background: #f9e7b8; color: #6b4d13; border-bottom: 1px solid #e6cf8c;
  font-size: 13px; position: sticky; top: 58px; z-index: 4;
}
.quota-bar[hidden] { display: none; }
.quota-bar b { font-weight: 700; }
.quota-bar .qb-link { color: #8a4a1e; font-weight: 700; text-decoration: underline; } /* P4a：原 #b3622a 对配额条黄底 3.65:1，加深至 5.6:1 */
.quota-bar .small-btn { margin-left: auto; background: rgba(107, 77, 19, .12); border-color: rgba(107, 77, 19, .35); color: #6b4d13; }
[data-theme="dark"] .quota-bar { background: #4a3c1c; color: #f0d9a8; border-bottom-color: #6b5a2a; }
[data-theme="dark"] .quota-bar .qb-link { color: #ffd98a; }
[data-theme="dark"] .quota-bar .small-btn { background: rgba(240, 217, 168, .12); color: #f0d9a8; }
/* 持久化危机态（写入失败，数据只存在内存）：红色强调，仅留导出入口 */
.quota-bar.qb-fail { background: #f9d9c8; color: #7a2e12; border-bottom-color: #e6b29a; }
.quota-bar.qb-fail .qb-link { color: #7a2e12; }
[data-theme="dark"] .quota-bar.qb-fail { background: #4a2416; color: #ffd2b8; border-bottom-color: #6b3a22; }
[data-theme="dark"] .quota-bar.qb-fail .qb-link { color: #ffb98a; }
.topbar .title {
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  font-size: 17px; font-weight: 700; letter-spacing: 1px;
}
.topbar .date { color: var(--muted); font-size: 13px; margin-left: auto; }
.topbar .btn {
  border: 1px solid var(--border); background: var(--accent-soft); color: var(--text);
  padding: 7px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: all .15s;
}
.topbar .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.topbar .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.topbar .btn.primary:hover { filter: brightness(1.08); }
.memobox { height: 32px; width: 220px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--glass); color: var(--text); }

.content { flex: 1; overflow-y: auto; padding: 24px; }

/* 超宽屏桌面（≥1280 或更大显示器）：内容限宽居中，避免卡片无限拉伸 */
.content > * { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* ---------- 网格 ---------- */
.grid { display: grid; gap: 16px; }
.grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid.cols-7, .grid.cols-6, .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .grid.cols-7, .grid.cols-6, .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

/* =============================================================