/* D·IARY —— 全站基础样式（一个世界：文具店的线描本）
   所有视觉走 theme.css 的令牌，这里只定义结构与行为。
   **线只画在插图上，控件是平的**：按钮/输入框/面板/卡片一律无描边的平涂色块，
   马克笔线（--line-2 / --mk）只描插图和图标。 */

@import url("theme.css?v=586215d4");
@import url("packs.css?v=b1e8500c");
@import url("library.css?v=99b55999");
@import url("room.css?v=34a24369");
@import url("room3d.css");

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

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: var(--w-ui);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* 双击不许放大网页。手帐是一页一页点着改的，双击很容易误触发，
     一放大整个界面就飘了。捏合另有三道拦在 api.js（浏览器的缩放和我们自己的
     画布缩放是两回事，叠在一起就是两套缩放打架）。
     `manipulation` 只关掉双击缩放，**滚动照常**；编辑器舞台上是更严的 `none`。 */
  touch-action: manipulation;
  overscroll-behavior-y: none;                 /* 顺手掐掉下拉刷新和回弹 */
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-title); font-weight: var(--w-title); letter-spacing: var(--ls-title); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 线描图标：一支笔 ────────────────────────────────────────────── */
.ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex: none; color: currentColor; }
.ic.sm { width: 18px; height: 18px; }
.ic.lg { width: 28px; height: 28px; }
/* 字标：一段胶带框着名字，所以**比只有字母的时候要高**——
   letters 只占这个框的四成高，照老的 18px 摆，字就剩 7px 了。 */
.wm { height: 28px; width: auto; aspect-ratio: 1340 / 350; display: block; color: var(--ink); border-radius: 4px; overflow: hidden; }

/* ── 按钮：药丸 ──────────────────────────────────────────────────
   默认是石色的平涂药丸；主动作是黑药丸配奶黄字（整站唯一的"重"）。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 17px; min-height: 36px;
  border: 0; border-radius: var(--r-btn);
  background: var(--btn-fill); color: var(--ink);
  font-family: var(--f-ui); font-size: var(--fs-md); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur) var(--ease), transform .1s var(--ease), opacity var(--dur) var(--ease);
}
@media (hover: hover) { .btn:hover { background: color-mix(in srgb, var(--btn-fill) 80%, var(--ink)); } }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.pri { background: var(--ink); color: var(--butter); font-weight: 600; }
@media (hover: hover) { .btn.pri:hover { background: var(--ink-2); } }
/* 一排里挑中的那颗：**压深自己那块粉彩**，不是换成黑（黑是动作的颜色，不是状态的颜色，
   见 DESIGN.md「选中就压深」）。一个框里三排选项要是都用黑药丸，
   跟真正要按的那颗「生成」就分不出主次了。 */
.btn.on { background: color-mix(in srgb, var(--p-butter) 82%, var(--ink)); font-weight: 600; }
.btn.ghost { background: transparent; }
@media (hover: hover) { .btn.ghost:hover { background: var(--surface-2); } }
.btn.sm { padding: 6px 13px; min-height: 30px; font-size: var(--fs-sm); }
.btn.danger { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
@media (hover: hover) { .btn.danger:hover { background: var(--danger); color: #FFF; } }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn .ic { width: 18px; height: 18px; }
/* 粉彩药丸：给按钮配一个色就变成名牌 */
.btn.sage { background: var(--p-sage); } .btn.peach { background: var(--p-peach); }
.btn.butter { background: var(--p-butter); } .btn.mint { background: var(--p-mint); }
.btn.pink { background: var(--p-pink); } .btn.lilac { background: var(--p-lilac); }

/* ── 输入：奶油底、软边、聚焦变黑边 ──────────────────────────────── */
.inp {
  width: 100%; padding: 10px 13px;
  border: 2px solid var(--line); border-radius: var(--r-inp);
  background: var(--surface); color: var(--ink);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
@media (pointer: coarse) {
  /* iOS：输入框字号 < 16px 一聚焦就把整页放大且不缩回来 */
  input, textarea, select, .inp, .ttl, .gatecard .inp, .catsearch, .sld input.nv { font-size: 16px; }
}
.inp::placeholder { color: var(--muted); }
.inp:focus { border-color: var(--ink); }
label.fld { display: block; margin-bottom: 13px; }
label.fld > span { display: block; margin-bottom: 5px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 容器 ────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 0; border-radius: var(--r-card); position: relative; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
/* 名牌：粉彩药丸，字是黑的 */
.tag {
  display: inline-block; padding: 3px 11px;
  border-radius: var(--r-chip);
  background: var(--p-stone); color: var(--ink);
  font-size: var(--fs-sm);
}
.tag.on { background: color-mix(in srgb, var(--p-butter) 82%, var(--ink)); color: var(--ink); font-weight: 600; }
.tag.sage { background: var(--p-sage); } .tag.peach { background: var(--p-peach); }
.tag.butter { background: var(--p-butter); } .tag.mint { background: var(--p-mint); }
.tag.pink { background: var(--p-pink); } .tag.lilac { background: var(--p-lilac); }

/* ── 顶栏：奶油，一根软线 ────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: var(--rule);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo .mk { width: 22px; height: 22px; flex: none; color: var(--ink); display: block; }
.logo .wm { display: block; height: 26px; }
.logo .wt { display: none; }       /* 字标是画的，不排字 */
.auth .brand .mk { width: 27px; height: 27px; }

/* 提意见带的附件：一排小方片，右上角一个叉 */
.fbchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fbchips:empty { margin: 0; }
.fbchip { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--surface-2); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 12%, transparent); }
.fbchip img, .fbchip video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 视频片子上压一个播放三角，一眼分得出这格是视频不是图 */
.fbchip.vid::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: #FFF; font-size: 20px; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.fbchip .x { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border: 0;
  border-radius: 50%; background: rgba(27,27,27,.72); color: #FFF; cursor: pointer; line-height: 1; }
.fbchip .x::before { content: "×"; font-size: 15px; }

/* 材质那一行：挑了图片封面就整行按灰（图上再压一层纹是把画弄脏） */
.texrow { flex-wrap: wrap; }
.texrow.off { opacity: .4; }

/* ── 提示：黑药丸 ────────────────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; top: 22px; z-index: 9999;
  transform: translate(-50%, -24px);
  padding: 10px 18px;
  border-radius: var(--r-chip);
  background: var(--ink); color: var(--butter);
  font-size: var(--fs-md); max-width: 80vw;
  opacity: 0; pointer-events: none;
  box-shadow: var(--sh-2);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 弹窗：一张奶油纸片 ──────────────────────────────────────────── */
.mask {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: var(--mask);
}
.modal {
  width: min(460px, 100%); max-height: 86vh; padding: 22px;
  /* 滑到头之后**不许再传给外面**：手机上会表现成"在弹窗里滑，底下那页跟着晃"。
     html/body 上那条 overscroll-behavior 管不到内层滚动容器，各写各的。 */
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface);
  border: 0; border-radius: 22px;
  box-shadow: var(--sh-2);
}
.modal h3 { margin-bottom: 15px; font-size: var(--fs-lg); }
.modal .foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.modal.long { padding-bottom: 0; }
.modal.long .foot {
  position: sticky; bottom: 0; z-index: 3;
  margin: 18px -22px 0; padding: 13px 22px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: var(--rule);
  border-radius: 0 0 22px 22px;
}
[hidden] { display: none !important; }

/* ── 无障碍 ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 小屏：手指点得着 ────────────────────────────────────────────── */
@media (max-width: 620px) {
  .btn { min-height: var(--tap); padding: 10px 17px; }
  .btn.sm { min-height: 40px; padding: 9px 13px; }
  .ico { min-width: 40px; height: 40px; }
  .chip { min-height: 36px; display: inline-flex; align-items: center; }
  .sw i { width: 30px; height: 30px; }
  .inp { min-height: var(--tap); }
  select.inp { min-height: var(--tap); }
}

/* ── 挂历近景：一排粉彩圆片 ──────────────────────────────────────── */
.calwrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; min-width: 0; }
.calwrap > * { min-width: 0; }
.calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.calhead b { font-size: var(--fs-sm); }
.calhead .grow { margin-left: auto; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; min-width: 0; }
.calgrid .w { text-align: center; font-size: var(--fs-xs); color: var(--muted); padding-bottom: 4px; }
.calgrid .d {
  position: relative; height: 38px; min-width: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--p-sage); color: var(--ink-2);
  font-family: var(--f-num); font-size: var(--fs-sm);
}
.calgrid .d.cal-pad { visibility: hidden; }
@media (hover: hover) { .calgrid .d:hover { background: color-mix(in srgb, var(--p-sage) 70%, var(--ink)); } }
.calgrid .d.today { background: color-mix(in srgb, var(--p-sage) 78%, var(--ink)); font-weight: 700; }   /* 今天：圆片压深，不描圈 */
.calgrid .d.on { background: color-mix(in srgb, var(--butter) 82%, var(--ink)); color: var(--ink); font-weight: 600; }
.calgrid .d .dot {
  position: absolute; right: 3px; bottom: 2px; min-width: 8px; height: 8px;
  padding: 0 2px; border-radius: 4px; background: var(--ink);
  font-size: 9px; line-height: 8px; color: var(--butter); font-style: normal;
}
.calgrid .d.on .dot { background: var(--ink); color: var(--butter); }
/* 那天写过手帐：左下角一张小纸。右下角那颗黑点是日程件数，两个记号各管各的。
   纸是"画出来的东西"，所以描一道线（控件才不描）。 */
.calgrid .d.wrote::before {
  content: ""; position: absolute; left: 4px; bottom: 3px; width: 6px; height: 8px;
  background: var(--paper-white); border-radius: 1px;
  box-shadow: 0 0 0 1px var(--line-2);
}
/* 这天的手帐：一行一页，点了翻过去 */
.calpg { margin-top: 14px; }
.calpgrow {
  all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer;
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-top: 6px;
  border-radius: 14px; background: var(--surface-2); min-height: var(--tap, 44px);
}
@media (hover: hover) { .calpgrow:hover { background: color-mix(in srgb, var(--surface-2) 82%, var(--ink)); } }
.calpgrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.calpgrow .nm { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calpgrow .no { flex: none; font-family: var(--f-num); font-size: var(--fs-xs); color: var(--muted); }
.calpgrow .mgo { flex: none; color: var(--muted); display: flex; }

.callist { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.calrow { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-2); border-radius: 14px; }
.calrow .tx { flex: 1; font-size: var(--fs-sm); word-break: break-word; }
.calrow.done .tx { text-decoration: line-through; color: var(--muted); }
.calrow .tick {
  flex: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--ink); background: var(--surface); color: var(--butter); font-size: 13px; line-height: 1;
}
.calrow.done .tick { background: var(--ink); }
.calrow .del { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer; background: none; color: var(--muted); font-size: 16px; line-height: 1; }
.calrow .del:hover { background: var(--surface); color: var(--danger); }
.calempty, .calpg-empty { color: var(--muted); font-size: var(--fs-sm); padding: 14px 2px; }
.caladd { display: flex; gap: 8px; margin-top: 10px; }
.caladd .inp { flex: 1; min-height: var(--tap, 44px); }
@media (max-width: 700px) {
  .calwrap { grid-template-columns: 1fr; gap: 12px; }
  .calgrid .d { height: 42px; }
  .calgrid .w { font-size: 11px; }
  .callist { min-height: 84px; }
  .caladd { position: sticky; bottom: 0; padding-top: 8px; background: linear-gradient(180deg, transparent, var(--surface) 30%); }
}

.fontrow { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 收纳框近景 ──────────────────────────────────────────────────── */
.scbox { width: 100%; }
.scgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px; padding: 14px; border-radius: var(--r-card);
  background: var(--surface-2);
}
.sccell {
  position: relative; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 12px; background: var(--paper-white);
}
.sccell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sccell .x {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; border: 0; background: var(--ink); color: var(--butter);
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s var(--ease);
}
.sccell:hover .x, .sccell:focus-within .x { opacity: 1; }
@media (hover: none) { .sccell .x { opacity: .85; width: 26px; height: 26px; } }
.schint { grid-column: 1 / -1; text-align: center; padding: 18px 8px; color: var(--muted); }
.schint .sub { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.6; }
.scact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scact .btn { min-width: 0; flex: 1; }

/* ── 照片盒：拍立得 ──────────────────────────────────────────────
   白框是纸（--paper-white，深色模式也不变），下沿宽一截写名字和日子；
   歪一个小角度叠在盒底。盒底是深一号奶油，不描边（容器不描线，见 DESIGN.md）。
   首页的照片盒和编辑器的「照片」都是这套。 */
.pbox { width: 100%; }
.pbgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 18px 14px; padding: 18px 16px 16px; border-radius: var(--r-card);
  background: var(--surface-2);
}
.pbgrid.scroll { max-height: 48vh; overflow: auto; overscroll-behavior: contain; }
.pola {
  position: relative; box-sizing: border-box;
  background: var(--paper-white); color: #6F6B65;
  padding: 7% 7% 0; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(27, 27, 27, .12), 0 6px 14px -6px rgba(27, 27, 27, .30);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  cursor: pointer; outline: 0;
}
.pola .ph { aspect-ratio: 1; background: #EFEBE0; overflow: hidden; }
.pola .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pola .cap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 34px; padding: 0 2px; overflow: hidden; text-align: center;
}
.pola .nm { font-size: 10.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pola .dt { font-family: var(--f-num); font-size: 9.5px; line-height: 1.3; opacity: .8; }
@media (hover: hover) {
  .pola:hover, .pola:focus-visible { transform: rotate(0deg) translateY(-3px) scale(1.03); z-index: 2;
    box-shadow: 0 2px 4px rgba(27, 27, 27, .12), 0 14px 24px -10px rgba(27, 27, 27, .38); }
}
.pola .x {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; border: 0; background: var(--ink); color: var(--butter);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity .15s var(--ease);
}
.pola .x .ic { width: 14px; height: 14px; }
.pola:hover .x, .pola:focus-within .x { opacity: 1; }
@media (hover: none) { .pola .x { opacity: .85; width: 26px; height: 26px; } }
/* 拿起来看的那一张：正着、大一号、下沿再宽些 */
.pola.big { max-width: 300px; margin: 0 auto; cursor: default; padding: 5% 5% 0; }
.pola.big .cap { height: 56px; }
.pola.big .nm { font-size: 13px; }
.pola.big .dt { font-size: 11px; }
.pblook .scact { justify-content: center; }
.pblook .scact .btn { flex: 0 0 auto; min-width: 140px; }

/* 封面编辑时显示书脊遮挡区域，只作预览，不参与透明装饰导出。 */
.coveredit #page::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 13%;
  background: rgba(27,27,27,.12); border-right: 1px solid rgba(27,27,27,.28);
  pointer-events: none; z-index: 3;
}

.password-field { display:flex; align-items:stretch; gap:8px; min-width:0; }
.password-field > .inp { flex:1; min-width:0; width:0; }
.password-toggle { flex:none; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.password-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.vip-locked {position:relative;}
.vip-lock {position:absolute;right:3px;top:3px;background:#fff9dfed;border-radius:20px;padding:3px 5px;font:12px sans-serif;pointer-events:none;z-index:2;}
.vip-materials {max-height:55svh;overflow:auto;}
.vip-material-row {display:flex;align-items:center;gap:12px;padding:8px 0;}
.vip-material-row img {width:64px;height:64px;object-fit:contain;background:#f5efde;border-radius:8px;}

.combine-pickbar{position:fixed;z-index:220;left:50%;bottom:100px;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));padding:14px;border-radius:22px;background:var(--paper,#fff9eb);box-shadow:0 4px 24px #0003;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.combine-pickbar p{width:100%;margin:0}.combine-pickbar span{flex:1}.lay.combine-picked{outline:3px solid #b29345;outline-offset:3px}.combine-progress{position:fixed;inset:0;z-index:250;background:#fffaeedd;display:grid;place-items:center;color:#514d40;padding:28px;text-align:center}
.lay:not(.binding-selected) .binding-controls,.lay:not(.binding-selected)>.binding-move-grip{display:none}

.binding-controls,.binding-controls button{color:#514d40}

/* Audio feedback must remain playable on narrow screens. */
.fbchip.aud{width:min(100%,320px);height:76px;padding:22px 4px 0}
.fbchip.aud audio{width:100%;height:50px}
.fbatt audio{max-width:100%}