/* Original SnapLab icons and layout, black / white / Tiffany accents. */
:root {
  --navy:#15191b; --navy2:#262d2f; --navy3:#394346; --cyan:#81d8d0;
  --bg:#f7f8f8; --soft:#f0f3f3; --soft2:#e2e8e7;
  --blue:#276e69; --blue-s:#e7f6f4; --blue-d:#1d5955;
  --green:#276e69; --green-s:#e7f6f4;
  --violet:#434c4e; --violet-s:#edf0f0;
}
/* 深色主题必须把上面 :root 里的底色一起翻过来。
   这几行以前缺失：refine.css 在 styles.css 之后加载、选择器权重相同，
   于是浅色的 --bg/--soft 会盖掉 styles.css 的深色值，
   结果深色模式下是「浅底 + 浅字」，用到 --soft 的地方直接看不见。 */
[data-theme="dark"] {
  --bg:#0d0f10; --card:#16191a; --soft:#1d2223; --soft2:#28302f;
  --line:#262c2d; --ink:#eef1f1; --dim:#9aa4a4; --dim2:#727c7c;
  --blue:#81d8d0; --blue-s:#182c2b; --blue-d:#a4e6e0;
  --green:#81d8d0; --green-s:#182c2b;
  --violet:#c3cccc; --violet-s:#272d2e;
}
html { height:100%; }
body { height:100vh; min-height:0; display:flex; flex-direction:column; padding-bottom:0; overflow:hidden; }
@supports(height:100dvh) { body { height:100dvh; } }
.top { position:relative; flex-shrink:0; }
main { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 auto; padding:24px 4px 30px; scrollbar-gutter:stable; }
.bar { position:relative; left:auto; right:auto; bottom:auto; transform:none; flex-shrink:0; align-self:center; margin:10px auto 18px; }
.bar a.on { color:var(--blue); }
#fab { background:var(--navy); box-shadow:0 5px 14px #0002, 0 0 0 1px #81d8d066 inset; }
.foot { display:none; }
.snapview { min-height:100%; }
/* 底栏在这个布局里是文档流的一员（不再是 fixed 悬浮），--bar 那套预留位用不上。
   toast 原来按 22px + --bar 算：桌面端 --bar=0 → 直接压在导航条上；
   统一抬到导航条顶之上，再让出 iPhone 的下巴。 */
.toast { bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
.t0,.t1,.t2,.t3,.t4,.t5,.t6,.t7,
[data-theme="dark"] .t0,[data-theme="dark"] .t1,[data-theme="dark"] .t2,[data-theme="dark"] .t3,
[data-theme="dark"] .t4,[data-theme="dark"] .t5,[data-theme="dark"] .t6,[data-theme="dark"] .t7 { --tone:var(--blue); --tint:var(--blue-s); }
.c2 { background:var(--cyan); color:#172b29; }
.chead,.acts-r,.reading-toolbar { gap:12px; flex-wrap:wrap; }
.chead > *, .chart-heading > *, .dcols > * { min-width:0; }
.card { padding:24px; }
.bar-note.gentle { background:var(--blue-s); color:var(--blue); line-height:1.8; }

/* 5.1 整体简化：标题加重、卡片少一层描边和阴影、分隔线更淡。
   只调外观，不动任何布局尺寸。 */
h1, h2, h3 { font-weight:800; letter-spacing:-.015em; }
.card { border-color:transparent; box-shadow:none; background:var(--card); }
[data-theme="light"] .card, :root:not([data-theme="dark"]) .card { box-shadow:0 1px 2px #0f172a0a; }
.chead h2 { font-size:16.5px; }
.btn { font-weight:700; }
.bar a, .bar button:not(#fab) { font-weight:700; }
.nav a { font-weight:600; }
.dim, .sm { font-weight:500; }
hr, .card + .card { border-color:var(--line); }
.profile-title { margin:8px 0 24px; font-size:27px; }
#v-me { max-width:720px; margin:auto; }
.profile-links { display:flex; flex-direction:column; }
.profile-links > a,.profile-links > button { display:flex; gap:14px; align-items:center; text-align:left; padding:18px 0; color:var(--ink); border-bottom:1px solid var(--line); }
.profile-links > :last-child { border:0; }
.profile-links span { flex:1; }
.profile-links small { color:var(--dim); }
.pbody pre { overflow:auto; max-width:100%; padding:18px; background:var(--soft); border:1px solid var(--line); border-radius:12px; font:12px/1.8 var(--mono); white-space:pre; }
.pbody pre code { padding:0; background:none; color:var(--ink); white-space:inherit; }
.pbody blockquote { margin:20px 0; padding:12px 18px; border-left:3px solid var(--cyan); background:var(--soft); color:var(--dim); overflow-wrap:anywhere; }
.pbody hr { border:0; border-top:1px solid var(--line); margin:26px 0; }
.pbody p,.pbody li { overflow-wrap:anywhere; }
.sop-source { margin:10px 0 20px; }

/* 实验日志：月历 + 当天记录 */
#v-journal { max-width:720px; margin:auto; }
.jhead .profile-title { margin-bottom:6px; }
.jhead p { margin:0 0 20px; }
.jnav { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.jtitle { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.jtitle b { font-size:17px; font-weight:700; }
.jweek, .jgrid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.jweek { margin-bottom:8px; }
.jweek span { text-align:center; font-size:12px; color:var(--dim); }
.jd { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  aspect-ratio:1; min-height:40px; border-radius:11px; background:var(--soft); color:var(--dim);
  font-size:14px; transition:background .14s, color .14s, transform .1s; }
.jd.pad { background:none; }
.jd b { font-weight:600; }
.jd i { font-style:normal; font-size:10px; line-height:1; padding:1px 5px; border-radius:999px;
  background:var(--blue); color:var(--card); font-weight:700; }
.jd.has { background:var(--blue-s); color:var(--blue-d); }
.jd.today { box-shadow:inset 0 0 0 1.5px var(--blue); }
/* 选中日：--navy 在深色主题被翻成浅色（boa.css 把它定义成 #f2f4f6），
   字色写死 #fff 就成了白底白字。改用 --bg，深浅两边自动反色。 */
.jd.on { background:var(--navy); color:var(--bg); }
.jd.on i { background:var(--cyan); color:#172b29; }
.jd:not(.pad):active { transform:scale(.94); }
@media (hover:hover) { .jd:not(.pad):hover { background:var(--soft2); } .jd.on:hover { background:var(--navy); } }
.jtoday { justify-content:center; margin-top:16px; }
.jpick { text-align:center; margin:20px 0; }
.jrows { display:flex; flex-direction:column; margin:4px 0 18px; }
.jrow { display:flex; align-items:center; gap:12px; padding:14px 0; color:var(--ink); border-bottom:1px solid var(--line); }
.jrow:last-child { border-bottom:0; }
.jrow-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.jrow-main b { font-weight:600; overflow-wrap:anywhere; }
.jtag { flex:none; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--soft); color:var(--dim); }
.jtag.ok { background:var(--green-s); color:var(--green); }
.jtag.work { background:var(--blue-s); color:var(--blue-d); }
.jmode { margin:0 0 8px; }

@media(max-width:760px) {
  .jd { min-height:36px; border-radius:9px; font-size:13px; }
  .jweek, .jgrid { gap:4px; }
  main { padding:16px 0 24px; }
  .bar { display:grid; width:100%; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; padding:8px 4px calc(8px + env(safe-area-inset-bottom)); margin:0; }
  .bar a { min-width:0; padding:4px 0; font-size:10.5px; gap:4px; }
  .bar a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #fab { justify-self:center; margin-top:0; width:50px; height:50px; }
  .card { padding:19px 16px; }
  .reading-toolbar .acts-r { width:100%; }
  .profile-title { font-size:24px; }
  .archive-state { align-items:flex-start; }
  .chart-heading { align-items:flex-start; }
  .chart-heading > .acts-r { gap:8px; }
  .weight-canvas svg { max-height:none; }
}