/* her 玻璃版 —— 视觉系统第二版（ADR-0023）
 *
 * 房间：玻璃与色。半透明白 + 模糊 + 高饱和度，底下垫一张壁纸。
 * 层次靠**模糊度与透明度**拉开，不靠线：面板 → 条目卡 → 胶囊。
 * 霜层压住壁纸（不然照片上的字会直接透到界面文字里，读不下去）。
 *
 * 两条硬规矩：
 *   · 零外链：字体用系统字体，图标手绘 SVG，壁纸自己托管。
 *   · 零依赖：手写 CSS，不引任何框架或玻璃库（老 WebView 上 SVG 折射是自找罪受）。
 *
 * 可调项（都在 :root 里，v2.js 会改）：
 *   --frost     霜层浓度 [0.3, 0.8]，默认 0.46（下限 0.3 是底线，拖不下去）
 *   --wallpaper 壁纸（默认图或用户上传的那张）
 */

:root {
  --frost: 0.46;
  --wallpaper: url("/shared/wallpaper-default.svg");

  --blur: 18px;
  --sat: 1.7;

  --glass: rgb(255 255 255 / 0.46);
  --glass-strong: rgb(255 255 255 / 0.62);
  --glass-soft: rgb(255 255 255 / 0.34);
  --glass-line: rgb(255 255 255 / 0.58);
  --field: rgb(255 255 255 / 0.66);

  --ink: #1b1b1f;
  --ink-2: rgb(27 27 31 / 0.78);
  --ink-3: rgb(27 27 31 / 0.72);
  --err: #a03024;        // 错朱：出错时用。色板里原来没有这一档（评审实测 13px 只有 3.8:1）
  --blue: #0a5cff;
  --violet: #6a5cff;
  --green: #1f9d55;
  --orange: #ef8c00;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 10px 34px rgb(24 26 40 / 0.13), inset 0 1px 0 rgb(255 255 255 / 0.65);
  --page: 780px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  background-color: #dfe3ef;
  /* 壁纸**不再**用 background-attachment: fixed ——
     那是移动端 WebView 最著名的慢点：滚动时整页要跟着重画。
     改由下面那层固定层来铺（body::before），看起来一样，滑起来轻得多。 */
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* 壁纸层：固定，不随滚动（替掉 background-attachment: fixed） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center top;
}

/* 霜层：壁纸整体压一层，界面才浮得起来。
   这里原来还压着一层**铺满视口**的 backdrop-filter: saturate(1.15) ——
   那是手机上最贵的一笔：每帧都要把整屏回读一遍再过滤。
   实测拿掉：变化像素 44.7%，平均 3.12/255（最大 5）—— 肉眼几乎看不出来。
   省下来的却是每帧一次整屏回读。 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgb(255 255 255 / var(--frost));
}
body > * { position: relative; z-index: 1; }

/* ── 玻璃板 ───────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.glass-strong { background: var(--glass-strong); }

/* 不支持毛玻璃的老浏览器：换不透明板，别留一层"看不清也摸不着"的灰 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .topbar,
  .pill,
  .iconbtn,
  .mini,
  .field {
    background: rgb(250 250 252 / 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body::after { background: rgb(244 244 248 / 0.92); }
}

/* ── 顶栏 ─────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 顶栏的内容跟版心对齐：以前品牌在 x=16、内容在 x=346，两套网格。 */
  padding: 10px max(16px, calc((100% - var(--page)) / 2 + 16px));
  background: var(--glass-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid rgb(255 255 255 / 0.4);
}
.brand { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; }
/* 导航是一颗**浮起来的玻璃胶囊**，当前这一页是**浮在胶囊上的那颗泡泡**。
   形制照 iOS 的液态玻璃标签栏：底座是胶囊，选中项是一块更亮的圆片。
   霜面还是那四档，没有新颜色：
   顶栏 0.34 → 导航胶囊 0.46（面板档）→ 选中泡泡 0.62（霜面重，跟 ghost 按钮同档）。
   压在一起合成出来是三级深浅，层级还是靠模糊度，不靠线。 */
.nav {
  position: relative;          /* 泡泡的定位基准 */
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.46);
  border: 1px solid rgb(255 255 255 / 0.5);
  box-shadow: 0 2px 10px rgb(24 26 40 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.6);
  /* 这里原来还有一层自己的 blur(12px) —— 顶栏本来就模糊着，再叠一层是手机上第二贵的笔。
     实测拿掉：变化像素 1%，平均 5.61/255（最大 7）—— 看不出来。去掉。 */
}
.nav a {
  position: relative;
  z-index: 1;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  transition: color .18s ease;
}
.nav a:hover { color: var(--ink); }
/* 按下去的那一下：给一点"被按住了"的反馈。
   以前是让泡泡在旧页上滑过去 —— 可旧页 80ms 后就被换掉了，
   420ms 的滑动只看得见 19%，看着就是"卡了一下"。
   现在：**旧页只给按压反馈，泡泡的整段滑动放到新页上播**（见 v2.js）。 */
.nav a.pressing {
  color: var(--ink);
  background: rgb(255 255 255 / 0.3);
}
.nav a.on,
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  /* 底色交给那颗会滑的泡泡（.navpill）——
     脚本没跑的时候这里就只剩字重与墨色：可辨，但不醒目。 */
  background: transparent;
}

/* 会滑的泡泡：当前页的那块更亮的圆片。
   手指一按就滑过去（JS 改 left/transform），滑到一半还会横向挤一下 ——
   那是"果冻感"的来源：不是匀速滑过去，是被弹了一下。 */
.navpill {
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.62);   /* 霜面重：跟 ghost 按钮同一个档 */
  box-shadow: 0 2px 8px rgb(24 26 40 / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.72);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  /* **只过渡 opacity**：transform 由 WAAPI 的**一次**动画接管（见 v2.js 的 place()）。
     宽度**永远不参与动画** —— width 不可合成，动它就是每帧重排，手机上直接卡成幻灯片；
     起点那一份宽度用 scaleX 压出来（ADR-0035）。
     过渡里不能留 transform：CSS 过渡会和 WAAPI 抢同一个属性，两段动画叠着 = 抖。 */
  transition: opacity .2s ease;
  will-change: transform;
}
.navpill.on { opacity: 1; }
.spacer { flex: 1; }
.iconbtn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.62);
  border: 1px solid var(--glass-line);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
}
.iconbtn:hover { background: rgb(255 255 255 / 0.82); }

/* ── 页面切换：旧页向左推出去，新页从右边推进来 ────────────── */
/* 一整页的切换读起来是"推"，不是"闪"：
   旧页先淡出左移 180ms，再跳；新页内容从右侧滑入 300ms。 */
@media (prefers-reduced-motion: no-preference) {
  .wrap { animation: her-page-in .18s cubic-bezier(.2, .8, .25, 1) both; }
  /* 动画结束后摘掉 fill-mode，否则它会盖住后面的任何过渡。 */
  .wrap.settled { animation: none; }
  /* 旧页的退场（body.leaving）**已经删掉**：它要靠 JS 拦一下 click 才能触发，
  /* 而那一拦就是 80ms 的死等，还会让旧页在等网络的时候先淡成空白 ——
  /* 换页现在是浏览器自己走，旧页一直留在屏幕上，新页从右边推进来。 */
}
@keyframes her-page-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

/* ── 版心 ─────────────────────────────────────────────────── */
.wrap { max-width: var(--page); margin: 0 auto; padding: 20px 16px 72px; }
/* 标题区也放在玻璃板上：字直接压在壁纸的亮部上是读不下去的 */
.titlecard { padding: 18px 20px; margin: 6px 0 16px; }
h1 { font-size: 30px; font-weight: 750; margin: 0 0 2px; letter-spacing: -0.01em; }
.sub { color: var(--ink-2); font-size: 14px; margin: 0; }
.muted { color: var(--ink-3); }
/* 分隔点跟它分开的那段字同色同重 —— 原来半透明，像一行字中间破了个洞。 */
.sep { opacity: 1; margin: 0 6px; }

/* ── 表单 ─────────────────────────────────────────────────── */
.field {
  width: 100%;
  border: 1px solid rgb(255 255 255 / 0.62);
  border-radius: var(--r-md);
  background: var(--field);
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
}
.field::placeholder { color: var(--ink-3); }
textarea.field { resize: vertical; min-height: 78px; }
.btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.btn.ghost {
  background: rgb(255 255 255 / 0.66);
  color: var(--ink);
  border: 1px solid rgb(255 255 255 / 0.7);
  font-weight: 500;
}
.btn:disabled { opacity: 0.55; cursor: default; }

/* ── 胶囊 ─────────────────────────────────────────────────── */
.pill {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  background: rgb(255 255 255 / 0.5);
  border: 1px solid var(--glass-line);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pill.on {
  background: var(--violet);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgb(106 92 255 / 0.35);
}
.pill .n { opacity: 0.88; margin-left: 4px; font-size: 12px; }
/* 紫底上的数字要是还半透明，白字就只剩 3:1 —— 读屏和眯眼看都吃亏 */
.pill.on .n { opacity: 1; }
.filters { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }

/* ── 条目卡 ───────────────────────────────────────────────── */
.card { padding: 15px 16px; display: flex; gap: 13px; align-items: flex-start; }
.dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex: none;
  margin-top: 2px;
  border: 2px solid rgb(27 27 31 / 0.30);
  background: rgb(255 255 255 / 0.4);
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.dot.done { background: var(--green); border-color: var(--green); }
.cardbody { min-width: 0; flex: 1; }
.name { font-size: 16.5px; font-weight: 680; line-height: 1.35; }
.meta { color: var(--ink-3); font-size: 12.8px; margin-top: 3px; }
.link { color: var(--blue); font-size: 13px; word-break: break-all; display: inline-block; margin-top: 4px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgb(31 157 85 / 0.18);
  color: #0b5c2e;
}
.tag.todo { background: rgb(27 27 31 / 0.10); color: var(--ink-2); }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 1px solid rgb(255 255 255 / 0.6); }
.mini {
  border: 1px solid rgb(255 255 255 / 0.65);
  background: rgb(255 255 255 / 0.62);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.mini:hover { background: rgb(255 255 255 / 0.85); }

/* ── 首页零件 ─────────────────────────────────────────────── */
/* 最近的日子：它是一个链接（点进去就是那一天）。
   她的原话用正文的字号与行高 —— "原话照录"是这个产品的第一句，
   不该拿到全站最小的字号。不画引文线：这套视觉的规矩是"不用线分隔"。 */
.recent { display: block; text-decoration: none; color: inherit; }
.recent:hover { background: rgb(255 255 255 / 0.56); }
.quote {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
}
.hero { padding: 22px 20px; }
.big { font-size: 52px; font-weight: 780; line-height: 1.05; letter-spacing: -0.02em; }
.big small { font-size: 16px; font-weight: 600; color: var(--ink-2); margin-left: 6px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tile { padding: 14px 13px; }
.tile .n { font-size: 24px; font-weight: 740; }
.tile .l { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.row2 { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 720px) { .row2 { grid-template-columns: 1.5fr 1fr; } }
.cal { padding: 16px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
/* 紧凑月历：一行胶囊，装这个月有记录的日子 */
#calCompact { display: flex; gap: 8px; flex-wrap: wrap; }
/* hidden 属性会被 display:grid / display:flex 盖掉 —— 得自己再声明一次 */
.calgrid[hidden], #calCompact[hidden] { display: none; }
.day {
  aspect-ratio: 1;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ink-2);
  background: rgb(255 255 255 / 0.42);
  text-decoration: none;
}
.day.has { background: var(--violet); color: #fff; font-weight: 700; }
.day.today { box-shadow: 0 0 0 2px var(--orange); }
.calhead { display: flex; align-items: center; gap: 10px; font-weight: 640; }

/* ── 进门那一屏（玻璃版自己的门）─────────────────────────── */
.gate { padding: 26px 22px; margin-top: 12vh; max-width: 420px; margin-left: auto; margin-right: auto; }
.gate h1 { font-size: 26px; }
.gate .field { margin-top: 16px; }
.gate .btn { margin-top: 12px; width: 100%; }
.gate .msg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; }
/* 没进门时，页面其余部分一律藏起来（不然一堆"…"占位露在外面） */
body.gate-only > *:not(.gate) { display: none !important; }

/* ── 外观面板（霜层 + 壁纸）───────────────────────────────── */
.sheet {
  position: fixed;
  right: 14px;
  top: 58px;
  z-index: 60;
  width: 268px;
  padding: 16px;
  display: none;
}
.sheet.open { display: block; }
.sheet h2 { margin: 0 0 12px; font-size: 15px; font-weight: 680; }
.sheet .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet label { font-size: 13px; color: var(--ink-2); }
.sheet input[type="range"] { width: 120px; accent-color: var(--violet); }
.sheet .tip { font-size: 12px; color: var(--ink-3); margin: 8px 0 12px; line-height: 1.5; }
.sheet .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hidden-input { display: none; }

/* 草稿条：没存上的东西放在这儿，等她决定要不要存上。 */
.draftbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.62);
  border: 1px solid var(--glass-line);
  font-size: 13px;
  color: var(--ink);
}
.draftbar[hidden] { display: none; }
.draftbar span { margin-right: auto; }

/* ── 页脚 ─────────────────────────────────────────────────── */
/* 页脚以前是全站唯一没有底板的文字，直接坐在壁纸上（实测 1.0:1，读不出来）。
   现在给它一层比面板更轻的霜底：字压得住，玻璃的层级也不被破坏。 */
.foot {
  width: fit-content;
  margin: 26px auto 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.42);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: var(--ink);
  font-size: 12.5px;
  text-align: center;
}
.foot a { color: var(--ink); text-decoration: none; margin: 0 6px; }
.foot a:hover { color: var(--ink); }

/* ── 点击时那圈蓝框 ───────────────────────────────────────── */
/* 浏览器默认的 :focus 轮廓和 ::selection 高亮是**系统蓝**，和这一版不搭。 */
::selection { background: rgb(106 92 255 / 0.22); color: inherit; }
/* 手机上点一下链接，WebView 还会留一层**系统蓝的 tap 高亮**（顶栏点完一格蓝的）。
   这层是"手指刚碰过"的痕迹，不是"你现在在哪儿"——把它关掉。
   键盘用户看到的紫色焦点圈照旧留着。 */
a, button, input, textarea, select, label, summary { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: none; }
/* 键盘 Tab 走的还是看得见的框（别把键盘用户也坑了） */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* ── 打印：玻璃印出来是一片灰，强制白底黑字 ───────────────── */
@media print {
  /* 打印永远是纸版（ADR-0023）：白底黑字。
     颜色在纸上不是颜色，是墨。所以每个着色元素都要落回「白底 + 深墨字 + 一道边」，
     形状（描边/字重/圆点）留下来，色相不留。 */
  /* 打印只用色板里的令牌：白底 + 墨色系。
     以前这里写 #000 / #333 / #ccc / #999 —— 不在色板里，检测器每次都报，
     只能靠 ignoreValues 按值全局吞掉，那样屏幕里真写错颜色也不会被报。 */
  body { background: #fff !important; color: var(--ink) !important; }
  body::before, body::after { display: none; }
  .wrap { animation: none !important; transform: none !important; opacity: 1 !important; }
  .glass, .topbar, .pill, .iconbtn, .mini, .field {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--ink-3) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
  }
  .sheet, .iconbtn, .lightbox { display: none !important; }

  /* 选中的胶囊：原来背景被刷成白底、文字还是白的 → 印出来是一个空白胶囊。 */
  .pill.on, .seg button[aria-pressed="true"] {
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }
  /* 有记录的日子：留一圈黑边（形状），不留紫底。 */
  .day.has, .mongrid a.has {
    background: #fff !important;
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 1px var(--ink) !important;
    font-weight: 700 !important;
  }
  .day.today { box-shadow: none !important; outline: 2px solid var(--ink) !important; }
  /* 时间轴的月历格也有一圈"今天"的橙环 —— 上一版只中和了首页日历那一处，
     结果打印稿上时间轴还留着一块橙色。 */
  .mongrid a.today { box-shadow: none !important; outline: 2px solid var(--ink) !important; }
  .tag { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--ink-3) !important; }
  .dot.done { background: #fff !important; border-color: var(--ink) !important; color: var(--ink) !important; }
  .dotg { background: #fff !important; border-color: var(--ink) !important; }
  .btn, .btn.ghost {
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
  }
  .link, .foot a, .nav a { color: var(--ink) !important; }
  /* 玻璃胶囊在纸上是一片灰：胶囊与泡泡都摊平成普通的一行字。 */
  .nav { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
  .nav a[aria-current="page"] { background: none !important; box-shadow: none !important; font-weight: 700 !important; }
  .muted, .meta, .sub, .hint, .foot, .tile .l { color: var(--ink-2) !important; }
}

@media (max-width: 420px) {
  /* 三块小卡始终一行：数字短，挤一挤比 2+1 好看 */
  .tiles { gap: 8px; }
  .tile { padding: 12px 10px; }
  .tile .n { font-size: 21px; }
  .tile .l { font-size: 11.5px; }
  .big { font-size: 44px; }
  .wrap { padding: 16px 13px 60px; }
}

/* ── 少透明 / 少动效 ─────────────────────────────────────────────────── */
/* prefers-reduced-transparency（Chrome 118+）：系统要求少透明时，玻璃换不透明板。
   老浏览器不认识这个特性，会整段忽略 —— 这正是我们要的。 */
@media (prefers-reduced-transparency: reduce) {
  .glass, .topbar, .pill, .iconbtn, .mini, .field, .foot, .draftbar, .nav {
    background: rgb(250 250 252 / 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* 胶囊与泡泡都成了不透明板，"当前在哪"就看不出来了 —— 补一道边。 */
  .nav a[aria-current="page"] {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--ink-3) !important;
  }
  /* 选中的胶囊原来是紫底白字；底被换成不透明板之后，**白字压在近白的板上就没了**
     （实测：时间轴页那个"2026 年"胶囊在少透明模式下是一块空白）。
     底没了颜色，字就得换成墨色。 */
  .pill.on, .seg button[aria-pressed="true"] {
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink-3) !important;
  }
  body::after { background: rgb(244 244 248 / 0.92) !important; }
}

/* prefers-reduced-motion：全站本来没有一条 CSS 动效，但 JS 里有两处
   scrollTo({behavior:"smooth"})，这里兜住全局，也给以后加的动效留个规矩。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 灯箱（照片放大）───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgb(16 16 20 / 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 80;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 100%; max-height: 84vh; display: block; border-radius: 6px; }
.lightbox .cap { color: rgb(255 255 255 / 0.8); font-size: 0.9rem; text-align: center; margin-top: 0.9rem; }
.lightbox button {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: 0;
  color: rgb(255 255 255 / 0.85);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.4rem 0.6rem;
}

/* ── 时间轴 ───────────────────────────────────────────────────── */
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.mon { padding: 12px 12px 10px; }
.mon h2 { margin: 0 0 8px; font-size: 13px; font-weight: 640; color: var(--ink-2); }
.mongrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mongrid .wd { text-align: center; font-size: 10px; color: var(--ink-3); }
.mongrid a {
  aspect-ratio: 1;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ink-2);
  background: rgb(255 255 255 / 0.4);
  text-decoration: none;
}
.mongrid a.has { background: var(--violet); color: #fff; font-weight: 700; }
.mongrid a.today { box-shadow: 0 0 0 2px var(--orange); }
.daylist { display: grid; gap: 8px; margin-top: 12px; }
/* 一行里：第一行是日期 + 层级，第二行是**她写下的那一句**。
   原来第二行写的是"记下了这一天"，她的原话被挤成 12.5px 的灰字 ——
   层级反了（"原话照录"是这个产品的第一句，不该拿到全站最小的字号）。 */
.dayrow {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 12px 14px; text-decoration: none; color: inherit;
}
.dayrow .d { font-size: 13.5px; color: var(--ink-2); }
.dayrow .lvl { font-size: 12px; color: var(--ink-3); }
.dayrow .m { color: var(--ink-3); font-size: 12.5px; text-align: right; }
.dayrow .ex {
  grid-column: 1 / -1;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

/* 找一句话：输入框跟按钮一行 */
#q { flex: 1; min-width: 0; width: auto; }

/* ── 照片墙 ───────────────────────────────────────────────────── */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
@media (min-width: 560px) { .wall { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.wall a { display: block; border-radius: 10px; overflow: hidden; background: rgb(255 255 255 / 0.4); }
.wall img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* ── 后室 ─────────────────────────────────────────────────────── */
.keys2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 460px) { .keys2 { grid-template-columns: 1fr; } }
.keys2 label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
.entry { padding: 15px 16px; }
.entry time { font-size: 12px; color: var(--ink-3); display: block; margin-bottom: 6px; }
.entry p { margin: 0; white-space: pre-wrap; line-height: 1.85; }

/* ── 日课页（玻璃版）──────────────────────────────────────────── */
.formcard { padding: 16px; margin-bottom: 12px; }
.formrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.formrow .grow { flex: 1; min-width: 0; }
input[type=date].field { max-width: 12rem; }
.seg { display: flex; gap: 6px; }
.seg button {
  border: 1px solid var(--glass-line);
  background: rgb(255 255 255 / 0.5);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); border-color: transparent; color: #fff; font-weight: 600; }
.ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ph a { display: block; }
.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: rgb(255 255 255 / 0.4); }
.dayentry { margin-top: 14px; }
.dayentry .who { font-size: 12.5px; color: var(--ink-3); margin-bottom: 5px; }
.dayentry p { margin: 0; white-space: pre-wrap; line-height: 1.85; }
.err { color: var(--err); font-size: 13px; }
.ok { color: var(--ink-2); font-size: 13px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }

/* ── 顶栏塞得下六个：窄屏时导航自己横着滑 ───────────────────── */
@media (max-width: 620px) {
  /* 窄屏：品牌与齿轮一行，**六个去处自己占一行** ——
     挤在一行里必然有被截掉的（用户会以为后面没有了）。 */
  .topbar { gap: 8px; padding: 9px 12px; flex-wrap: wrap; }
  .brand { font-size: 17px; }
  .spacer { display: none; }
  .iconbtn { order: 2; margin-left: auto; }
  .nav {
    order: 3;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  /* 窄屏上六个去处要塞进一整颗胶囊：字小一点、内边距紧一点，
     320px 也能一个不少地排完（原来最后一个"日课"是切掉半个的）。 */
  .nav a { padding: 5px 9px; font-size: 13.5px; white-space: nowrap; }
}

/* ── 设置页 / 状态页 ─────────────────────────────────────────── */
.kv { display: grid; }
.kv > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.32);
}
.kv > div:last-child { border-bottom: 0; }
.kv .k { color: var(--ink-2); font-size: 13.5px; flex: none; }
.kv .v { font-weight: 600; font-size: 13.5px; text-align: right; word-break: break-all; }
.dotg {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 6px; vertical-align: middle;
}
.dotg.ok { background: var(--green); }
.dotg.bad { background: var(--err); }
.dotg.none { background: rgb(27 27 31 / 0.25); }
select.field {
  -webkit-appearance: none; appearance: none; padding-right: 1.8rem;
  /* 箭头自己画（手绘 SVG，零外链）。没有箭头的时候，下拉框跟输入框长得一模一样，
     手机上她会以为那是能打字的框。 */
  background-color: var(--field);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%231b1b1f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* 只给读屏器看的东西 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
h1.big { margin: 0; }
.pair { display: flex; gap: 8px; }
.pair select { flex: 1; }
.formlabel { display: block; font-size: 12.5px; color: var(--ink-2); margin: 0 0 5px; }
.formsec { font-size: 14px; font-weight: 640; margin: 18px 0 10px; }
.previewbox { padding: 14px 16px; margin: 12px 0; }
.previewbox > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.previewbox span { color: var(--ink-2); font-size: 13.5px; }
.previewbox b { font-weight: 640; }