/* ============================================================
   考研书桌 · V4 设计系统「书桌 · 朱印」（文房/编辑部风）
   概念：一张两个人对坐的书桌；打卡 = 盖朱砂印。
   - 宣纸米白 + 墨黑 + 朱砂红；宋体标题（书卷气），黑体正文
   - 便签墙 2-2-1 不规则网格；桌脊对坐；桌缝动态条；合写的一页
   - 所有颜色集中在 :root，组件不硬编码
   ============================================================ */

:root {
  /* ---------- 颜色 ---------- */
  --paper: #F4F1E8;          /* 宣纸底 */
  --paper-2: #EFEADC;        /* 纸底加深（桌脊/分组） */
  --card: #FCFAF4;           /* 便签卡纸 */
  --ink: #24272E;            /* 墨字（on 纸 ≈ 13.9:1） */
  --ink-2: #6B6E76;          /* 次要墨字（≈ 5.0:1） */
  --ink-3: #9DA0A8;          /* 弱墨字（仅非关键信息） */
  --line: #E3DFD2;           /* 纸纹分隔 */
  --line-2: #D8D3C2;         /* 分隔加深 */

  --seal: #B3402E;           /* 朱砂：印章 / 主按钮 / 选中 */
  --seal-press: #96321F;     /* 朱砂按压 */
  --seal-soft: #F6E7E1;      /* 朱砂浅底 */
  --warn: #A67B2E;           /* 赭石 */
  --error: #7A1F12;          /* 深棕红（与朱砂拉开明度） */

  --u: var(--seal); --u-soft: var(--seal-soft); --u-deep: var(--seal-press);
  --user-a: #3E5C76;  --user-a-soft: #E5EBF1;  --user-a-deep: #2C4358;   /* A 靛青 */
  --user-b: #66855A;  --user-b-soft: #E8EEE2;  --user-b-deep: #4C6542;   /* B 竹绿 */

  /* ---------- 字体 ---------- */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "MiSans", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  /* ---------- 圆角（纸感：小圆角 + 便签微歪） ---------- */
  --r-s: 6px;
  --r: 10px;
  --r-l: 14px;

  /* ---------- 字号（正文 ≥16px） ---------- */
  --fs-title: 30px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  /* ---------- 间距 ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* ---------- 阴影（纸片浮起，暖灰） ---------- */
  --sh-note: 0 1px 2px rgba(60, 52, 38, .08), 0 3px 10px rgba(60, 52, 38, .07);
  --sh-pop: 0 2px 4px rgba(60, 52, 38, .08), 0 14px 34px rgba(60, 52, 38, .14);

  /* ---------- 动效 ---------- */
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.35, .64, 1);
}

[data-user="A"] { --u: var(--user-a); --u-soft: var(--user-a-soft); --u-deep: var(--user-a-deep); }
[data-user="B"] { --u: var(--user-b); --u-soft: var(--user-b-soft); --u-deep: var(--user-b-deep); }
[data-u="A"]    { --u: var(--user-a); --u-soft: var(--user-a-soft); --u-deep: var(--user-a-deep); }
[data-u="B"]    { --u: var(--user-b); --u-soft: var(--user-b-soft); --u-deep: var(--user-b-deep); }

/* ---------------- 基础 ---------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* 宣纸纤维纹理：细横纹 + 轻噪点，压到 5% */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
  background-size: 160px 160px;
}

[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: var(--seal); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.tabular, .desk-date strong, .rec-time, .cmt-time, .pct, .voice-time, .fp-num b {
  font-variant-numeric: tabular-nums;
}

/* ---------------- 通用组件 ---------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-note);
  padding: var(--s-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--r);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary { background: var(--seal); color: #F9F3EA; box-shadow: var(--sh-note); }
.btn-primary:active { background: var(--seal-press); }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--seal-press); }
}

.btn-ghost { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:active { background: var(--line); }

.btn-danger { background: var(--error); color: #F9F3EA; }

.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-s); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover { background: var(--paper-2); color: var(--ink); }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-3);
}
/* 标题用宋体：书卷气 */
.section-head h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .02em;
}
/* 标题前的朱砂顿点 */
.section-head h2::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--seal);
  margin-right: 8px;
  vertical-align: 2px;
}
.hint { font-size: var(--fs-xs); color: var(--ink-2); text-align: right; }

.empty {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  background: var(--card);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.empty b { font-size: 24px; }

/* ============================================================
   登录门（题签式）
   ============================================================ */

.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

.gate-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-pop);
  padding: var(--s-8) var(--s-6) var(--s-6);
  text-align: center;
  animation: gate-in var(--dur) var(--ease);
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* 朱印徽 */
.gate-seal {
  width: 58px; height: 58px;
  margin: 0 auto var(--s-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--seal);
  color: #F9F3EA;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  border-radius: var(--r-s);
  transform: rotate(-4deg);
  box-shadow: var(--sh-note);
}
.gate-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: .04em;
}
.gate-sub { margin: var(--s-2) 0 var(--s-5); font-size: var(--fs-sm); color: var(--ink-2); }

.gate-input {
  width: 100%;
  min-height: 50px;
  padding: 0 var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: var(--fs-body);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.gate-input:focus { outline: none; border-color: var(--seal); background: var(--card); }

.gate-error { min-height: 22px; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--error); }

/* ============================================================
   桌脊：两人对坐
   ============================================================ */

.desk-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-2);
}

.seat {
  position: relative;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--card), var(--sh-note);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease);
}
.seat:active { transform: scale(.92); }
.seat.is-me { box-shadow: inset 0 0 0 2px var(--card), 0 0 0 2.5px var(--u); }
.seat.is-me::after {
  content: "我";
  position: absolute;
  bottom: -4px; right: -4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--u);
  color: #F9F3EA;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

.desk-date {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}
.desk-date strong {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .04em;
}
.desk-date small { font-size: var(--fs-xs); color: var(--ink-2); }

.desk-gear {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.desk-gear:active { transform: rotate(30deg) scale(.92); }
.desk-gear svg { width: 21px; height: 21px; }

/* 日期翻页行 */
.datenav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.datenav-greet {
  flex: 1;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.datenav .btn-sm { flex: 0 0 auto; }

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.stage { padding-top: var(--s-3); }

.view { display: none; }
.view.is-active { display: block; animation: view-in var(--dur) var(--ease); }
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.page-head { margin-bottom: var(--s-4); }

/* 子页返回按钮（足迹 / 设置） */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 var(--s-3) 0 var(--s-2);
  margin-left: -8px;
  margin-bottom: var(--s-2);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--seal);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.back-btn:active { transform: translateX(-2px) scale(.96); }
@media (hover: hover) {
  .back-btn:hover { background: var(--seal-soft); }
}
.page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: .06em;
}
.page-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }

/* 底部双 Tab */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  background: rgba(244, 241, 232, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px var(--s-2) calc(6px + env(safe-area-inset-bottom));
}
.tabbar-btn {
  flex: 1;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  justify-content: center;
  border-radius: var(--r-s);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease);
}
.tabbar-btn svg { width: 23px; height: 23px; }
.tabbar-btn.is-active { color: var(--seal); font-weight: 700; }

/* ============================================================
   便签墙（2-2-1 不规则网格）
   ============================================================ */

.note-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b"
    "c d"
    "e e";
  gap: var(--s-3);
}
.note-wall .note:nth-child(1) { grid-area: a; transform: rotate(-.5deg); }
.note-wall .note:nth-child(2) { grid-area: b; transform: rotate(.6deg); }
.note-wall .note:nth-child(3) { grid-area: c; transform: rotate(.4deg); }
.note-wall .note:nth-child(4) { grid-area: d; transform: rotate(-.6deg); }
.note-wall .note:nth-child(5) { grid-area: e; transform: rotate(.25deg); }

.note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-note);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.note:nth-child(5) { min-height: 72px; flex-direction: row; align-items: center; gap: var(--s-3); }
.note:active { transform: scale(.97) !important; }
@media (hover: hover) {
  .note:hover { box-shadow: var(--sh-pop); }
}
/* 选中的便签「掀起来」 */
.note.is-open {
  background: #FFFDF7;
  border-color: var(--seal);
  box-shadow: var(--sh-pop);
  transform: translateY(-3px) rotate(0deg) !important;
}

/* 图钉：未打卡是灰针，已打卡换朱砂 */
.note-pin {
  position: absolute;
  top: -5px; left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 999px;
  background: var(--line-2);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
}
.note.is-done .note-pin { background: var(--seal); }

.note-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.note-ico {
  font-style: normal;
  font-size: 17px;
  flex: 0 0 auto;
}
.note-head b {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-body {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note.is-done .note-body { color: var(--ink); }
.note:nth-child(5) .note-body { -webkit-line-clamp: 1; flex: 1; }

/* 朱砂印：科目首字方章，右下角微歪 */
.note-stamp {
  position: absolute;
  right: 8px; bottom: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  background: var(--seal);
  color: #F9F3EA;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  transform: rotate(-7deg);
  opacity: .88;
  box-shadow: inset 0 0 0 1.5px rgba(249, 243, 234, .55);
  pointer-events: none;
}
.note-stamp.is-stamping { animation: stamp-in 520ms var(--ease-spring); }
@keyframes stamp-in {
  0%   { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  55%  { opacity: .92; transform: rotate(-5deg) scale(.94); }
  100% { opacity: .88; transform: rotate(-7deg) scale(1); }
}

.note-count {
  position: absolute;
  top: 6px; right: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--seal);
}

/* ============================================================
   打卡大便签（composer）
   ============================================================ */

.composer { margin-top: var(--s-3); padding: var(--s-4); animation: composer-in var(--dur) var(--ease); }
@keyframes composer-in {
  from { opacity: 0; transform: translateY(8px) rotate(.4deg); }
  to   { opacity: 1; transform: none; }
}
.note-big { transform: rotate(.2deg); border-width: 1.5px; }

.composer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.composer-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.composer-title .tag {
  padding: 1px var(--s-2);
  border-radius: var(--r-s);
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.checkin-list { margin-bottom: var(--s-3); }
.checkin-head { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--s-2); }

.checkin-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  margin-bottom: var(--s-2);
}
.checkin-item.is-editing { border-color: var(--warn); background: #FAF3E3; }
.checkin-no {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  background: var(--seal);
  color: #F9F3EA;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: 2px;
}
.checkin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.checkin-title { font-size: var(--fs-sm); font-weight: 600; }
.checkin-title em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: var(--s-2); font-size: var(--fs-xs); }
.checkin-text { font-size: var(--fs-sm); color: var(--ink); word-break: break-word; }
.checkin-imgs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.checkin-ops { display: flex; flex-direction: column; gap: var(--s-2); flex: 0 0 auto; }
.checkin-ops .btn-sm { min-height: 30px; }

.checkin-img { position: relative; width: 64px; height: 64px; }
.checkin-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-s); cursor: zoom-in; }
.checkin-img-del {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--error);
  color: #F9F3EA;
  font-size: 11px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-note);
}

.edit-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  border-radius: var(--r-s);
  background: #FAF3E3;
  border: 1px solid #E8D9AE;
  color: var(--ink);
  font-size: var(--fs-sm);
}

#composerText {
  width: 100%;
  min-height: 88px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: var(--fs-body);
  line-height: 1.65;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
#composerText:focus { outline: none; border-color: var(--seal); background: var(--card); }
.composer-hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }

.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.thumb { position: relative; width: 84px; height: 84px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-s); cursor: zoom-in; }
.thumb-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(179, 64, 46, .25);
  overflow: hidden;
}
.thumb-bar i { display: block; height: 100%; width: 0; background: var(--seal); transition: width var(--dur) linear; }
.thumb-del {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.composer-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.upload-btn { flex: 0 0 auto; }
.composer-actions .btn-primary { flex: 1; }
.composer-note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); min-height: 20px; }

/* ============================================================
   桌缝：传小纸条
   ============================================================ */

.desk-gap {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
}

.notes-strip {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: 3px 2px 6px;
  scrollbar-width: none;
}
.notes-strip::-webkit-scrollbar { display: none; }
.notes-strip:empty::after {
  content: "桌缝里还没有纸条——写一张塞过去";
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* 一张小纸条：微歪的小纸片 */
.paper-note {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  padding: var(--s-2) var(--s-3) var(--s-2);
  background: #FFFDF6;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--sh-note);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease);
}
.notes-strip .paper-note:nth-child(odd) { transform: rotate(-1.1deg); }
.notes-strip .paper-note:nth-child(even) { transform: rotate(.9deg); }
.paper-note:active { transform: scale(.96); }

/* 撕纸边（顶部锯齿用渐变模拟，弱化到刚好可感） */
.paper-note::before {
  content: "";
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(105deg, transparent 0 4px, var(--paper) 4px 7px);
}

.note-head-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.note-from {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 700;
}
.note-dir { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.note-unread {
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--seal);
  color: #F9F3EA;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}
.note-text {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-time {
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-3);
}
.note-recall {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 9px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-note);
}

.note-compose-btn {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 68px;
  min-height: 64px;
  padding: 0 var(--s-3);
  border: 1.5px dashed var(--seal);
  border-radius: var(--r);
  color: var(--seal);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--seal-soft);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.note-compose-btn:active { transform: scale(.95); }
@media (hover: hover) {
  .note-compose-btn:hover { background: #F1DCD4; }
}

.note-composer {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-note);
  animation: composer-in var(--dur) var(--ease);
}
.note-composer input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.note-composer input:focus { outline: none; border-color: var(--seal); }
.note-composer .btn-sm { min-height: 40px; flex: 0 0 auto; }

/* ============================================================
   今日打卡情况：双人五科状态板
   ============================================================ */

.day-board {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.board-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-note);
  border-left: 3px solid var(--u);
}

.board-who {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.board-avatar {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.board-who b {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
}
.board-me {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-left: 2px;
}
.board-n {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--u-deep);
  font-variant-numeric: tabular-nums;
}

.board-seals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
}

.seal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: var(--s-1);
  border-radius: var(--r-s);
  border: 1px dashed var(--line-2);
  background: var(--paper);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.seal-cell:active { transform: scale(.93); }
@media (hover: hover) {
  .seal-cell:hover { background: var(--paper-2); }
}

/* 未盖：虚线空框 */
.seal-blank {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px dashed var(--line-2);
}
.seal-none { font-size: 10px; color: var(--ink-3); }

/* 已盖：小朱印 + 时间 */
.seal-cell.is-on {
  border: 1px solid var(--seal);
  background: var(--seal-soft);
}
.seal-char {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: var(--seal);
  color: #F9F3EA;
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 700;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 1px rgba(249, 243, 234, .5);
}
.seal-time {
  font-size: 10px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seal-cell.is-open {
  box-shadow: 0 0 0 2px var(--seal);
  background: #F1DCD4;
}

/* 展开的该科记录（复用 paper-stream 装订线样式） */
.board-detail { margin-top: var(--s-3); }
.board-detail-title {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
  padding: var(--s-2) 0 var(--s-1) 0;
}
.board-detail .empty { border-style: dashed; }

/* ============================================================
   合写的一页：交织流
   ============================================================ */

.paper-stream {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-left: var(--s-4);
}
/* 装订线 */
.paper-stream::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line-2);
}
/* 装订孔 */
.paper-stream::after {
  content: "";
  position: absolute;
  left: 2px; top: 0; bottom: 0;
  width: 9px;
  background-image: radial-gradient(circle 2.5px, var(--line-2) 2.5px, transparent 3px);
  background-size: 9px 56px;
  background-repeat: repeat-y;
  background-position: center top 18px;
}

.rec {
  position: relative;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-note);
}
/* 我的记录带一条左墨线；对方的用其身份色短线 */
.rec::before {
  content: "";
  position: absolute;
  left: -14px; top: 18px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--u);
  box-shadow: 0 0 0 2px var(--paper);
}
.rec.is-other { background: linear-gradient(to right, var(--u-soft), var(--card) 60%); }

.rec.is-new { animation: rec-in var(--dur) var(--ease); }
@keyframes rec-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.rec-avatar {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.rec-body { flex: 1; min-width: 0; }

.rec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-right: 30px; }
.rec-who { font-weight: 600; font-size: var(--fs-sm); }
.rec-subject {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--s-2);
  border-radius: var(--r-s);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.rec-seq { margin-left: 2px; font-weight: 700; font-size: var(--fs-xs); color: var(--seal); }
.rec-time { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }

.rec-text {
  margin-top: var(--s-2);
  font-size: var(--fs-body);
  line-height: 1.65;
  word-break: break-word;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-text.is-open { display: block; overflow: visible; }

.rec-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.rec-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); cursor: zoom-in; }

.rec-del {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ink-3);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .rec-del:hover { background: var(--seal-soft); color: var(--error); }
}

/* ---------------- 留言区 ---------------- */

.cmts { margin-top: var(--s-3); border-top: 1px dashed var(--line-2); padding-top: var(--s-3); }

.cmt-list { display: flex; flex-direction: column; gap: var(--s-2); }

.cmt { position: relative; display: flex; gap: var(--s-2); padding-right: 22px; }
.cmt-emoji {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: 2px;
}
.cmt-main { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: var(--s-2); }
.cmt-head b { font-size: var(--fs-sm); font-weight: 600; }
.cmt-time { font-size: var(--fs-xs); color: var(--ink-3); }
.cmt-body { margin-top: 1px; }
.cmt-text { font-size: var(--fs-sm); word-break: break-word; }
.cmt-text.is-big { font-size: 30px; line-height: 1.3; }
.cmt-gone { color: var(--ink-3); }
.cmt-audio { width: min(260px, 100%); height: 36px; display: block; }
.cmt-dur { margin-left: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }
.cmt-img { max-width: 200px; border-radius: var(--r-s); cursor: zoom-in; border: 1px solid var(--line); }
.cmt-img.is-doodle { background: #fff; }

.cmt-del {
  position: absolute; top: 2px; right: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) {
  .cmt-del:hover { background: var(--seal-soft); color: var(--error); }
}

.cmt-form { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.cmt-more {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 19px;
  transition: background-color var(--dur-fast) var(--ease);
}
.cmt-more.is-on { background: var(--seal-soft); border-color: var(--seal); }
.cmt-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.cmt-input:focus { outline: none; border-color: var(--seal); background: var(--card); }
.cmt-send { min-height: 40px; flex: 0 0 auto; }

.cmt-panel {
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  padding: var(--s-3);
  animation: composer-in var(--dur) var(--ease);
}
.cmt-tabs { display: flex; gap: 2px; margin-bottom: var(--s-3); }
.cmt-tab {
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-s);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.cmt-tab.is-active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--sh-note); }

.cmt-pane {
  /* 内容区限高内部滚动：表情/贴纸宫格很高，不限高会把面板撑得比视口还高 */
  max-height: 300px;
  overflow-y: auto;
}
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: var(--s-1); }
.emoji-btn {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  font-size: clamp(17px, 2.6vw, 22px);
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .emoji-btn:hover { background: var(--card); }
}

.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s-2); }
.stk-btn {
  padding: var(--s-1);
  border-radius: var(--r-s);
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.stk-btn:active { transform: scale(.94); }
@media (hover: hover) {
  .stk-btn:hover { background: var(--card); }
}
.stk { display: block; margin: 0 auto; }

.voice-row { display: flex; align-items: center; gap: var(--s-3); }
.voice-toggle.is-rec { background: var(--error); color: #F9F3EA; box-shadow: none; }
.voice-time { font-size: var(--fs-sm); color: var(--ink-2); }
.voice-time.is-live { color: var(--error); font-weight: 700; }

.cmt-hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }
.pic-row { display: flex; gap: var(--s-3); }

/* ============================================================
   足迹：月历即统计
   ============================================================ */

.fp-quote {
  position: relative;
  /* 左侧留足引号区（mark 全角「宽约 26px），文字从 44px 起避开，修复重叠 */
  padding: var(--s-4) var(--s-4) var(--s-4) 44px;
  margin-bottom: var(--s-3);
}
.fp-quote-mark {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--seal);
  opacity: .55;
}
.fp-quote p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  letter-spacing: .03em;
  color: var(--ink);
}

.fp-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.fp-person {
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-note);
  border-top: 3px solid var(--u);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-who { font-family: var(--font-serif); font-size: var(--fs-sm); font-weight: 700; color: var(--u-deep); letter-spacing: .05em; }
.fp-num { display: flex; align-items: baseline; gap: 4px; }
.fp-num b { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1.2; }
.fp-num span { font-size: var(--fs-xs); color: var(--ink-2); }
.fp-meta { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }

.cal-card { padding: var(--s-4); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.cal-head strong {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .05em;
}

.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); font-size: var(--fs-xs); color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.cal-legend .lv0 { background: var(--card); }
.cal-legend .lv1 { background: #EDE6D3; }
.cal-legend .lv2 { background: #E2CDB9; }
.cal-legend .lv3 { background: var(--seal); border-color: var(--seal); }
.cal-legend .lg-a { background: var(--user-a); border-color: var(--user-a); border-radius: 999px; width: 8px; height: 8px; }
.cal-legend .lg-b { background: var(--user-b); border-color: var(--user-b); border-radius: 999px; width: 8px; height: 8px; }

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-bottom: var(--s-1);
}

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }

.cal-day {
  position: relative;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: var(--fs-xs);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cal-day:active { transform: scale(.94); }
@media (hover: hover) {
  .cal-day:not(.is-blank):hover { box-shadow: var(--sh-note); }
}
.cal-day.is-blank { pointer-events: none; border-color: transparent; background: transparent; }
/* 完成度着色：lv1 一人一笔 / lv2 两人都有 / lv3 满勤 */
.cal-day.lv1 { background: #EDE6D3; border-color: #E0D6BC; }
.cal-day.lv2 { background: #E2CDB9; border-color: #D4BD9F; }
.cal-day.lv3 { background: var(--seal); border-color: var(--seal); color: #F9F3EA; font-weight: 600; }
.cal-day.is-today { box-shadow: 0 0 0 2px var(--ink); }
.cal-day.is-selected { box-shadow: 0 0 0 2px var(--seal); }

.cal-dots { display: flex; gap: 3px; min-height: 5px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 999px; }
.cal-dots i[data-u="A"] { background: var(--user-a); }
.cal-dots i[data-u="B"] { background: var(--user-b); }
.cal-day.lv3 .cal-dots i { background: #F9F3EA; }

/* ============================================================
   科目分布
   ============================================================ */

.rate-list { display: flex; flex-direction: column; gap: var(--s-3); }
.rate-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-note);
}
.rate-name { flex: 0 0 92px; display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 600; }
.rate-name em { font-style: normal; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }
.rate-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rate-bar { display: flex; align-items: center; gap: 6px; }
.rate-bar .who {
  width: 20px; height: 20px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--u-soft);
  color: var(--u-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-style: normal;
}
.rate-bar .track { flex: 1; height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.rate-bar .fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--u); transition: width var(--dur-slow) var(--ease); }
.rate-bar .pct { flex: 0 0 38px; text-align: right; font-size: var(--fs-xs); color: var(--ink-2); }

/* ============================================================
   设置
   ============================================================ */

#view-settings .card { margin-bottom: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .04em;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.field input {
  min-height: 48px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field input:focus { outline: none; border-color: var(--seal); background: var(--card); }

.note-text { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row .btn { flex: 1; min-width: 150px; }

/* ============================================================
   弹窗 / Toast / 印章庆祝 / 灯箱
   ============================================================ */

.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  background: rgba(36, 39, 46, .42);
  animation: fade-in var(--dur-fast) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: 100%;
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-pop);
  padding: var(--s-5);
  animation: pop-in var(--dur) var(--ease-spring);
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.93) rotate(.5deg); }
  to   { opacity: 1; transform: none; }
}
.modal-card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--s-2);
  letter-spacing: .03em;
}
.modal-card > p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; text-align: center; }
.modal-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.modal-actions .btn { flex: 1; min-height: 44px; }

/* 涂鸦弹窗 */
.doodle-card { max-width: 400px; }
.doodle-canvas {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: #fff;
  touch-action: none;
  margin-top: var(--s-3);
}
.doodle-tools { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.swatch {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--c, #333);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--line);
}
.swatch.is-active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2.5px var(--ink-2); }
.dd-btn.is-on { background: var(--seal-soft); color: var(--seal); border-color: var(--seal); }

/* Toast（顶部纸签） */
.toast-wrap {
  position: fixed;
  left: 50%; top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  pointer-events: none;
  width: max-content;
  max-width: 88vw;
}
.toast {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 88vw;
  padding: 10px var(--s-4);
  border-radius: var(--r-s);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-pop);
  animation: toast-in var(--dur) var(--ease-spring);
}
.toast.is-error { background: var(--error); }
.toast.is-out { opacity: 0; transform: translateY(-8px); transition: opacity 240ms, transform 240ms; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* 灯箱 */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 26, .9);
  padding: var(--s-4);
}
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.lightbox-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-hint {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.65);
}

/* ============================================================
   响应式：桌面（对坐布局）
   ============================================================ */

@media (min-width: 900px) {
  .app { max-width: 1020px; }

  /* 双栏：左 = 便签墙 + 打卡 + 桌缝；右 = 合写的一页（sticky，互不拉伸） */
  #view-today.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: var(--s-7);
    align-items: start;
  }
  #view-today .today-main { min-width: 0; }
  #view-today .timeline-wrap {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
    padding-right: 2px;
  }
  #view-today .timeline-wrap .section-head { margin-top: 0; }

  /* 桌面便签格稍大 */
  #view-today .note { min-height: 128px; }

  #view-footprint, #view-settings { max-width: 640px; margin: 0 auto; }
}

/* 小屏微调 */
@media (max-width: 360px) {
  .note-wall { gap: var(--s-2); }
  .note { min-height: 96px; }
  .fp-summary { grid-template-columns: minmax(0, 1fr); }
  .rec-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   减弱动态
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}