/* 手记 · A / 碎页主题
   以左侧书脊、撕纸日期、红斜条和编号导航构成。加载在 app.css 之后。 */
:root {
  --bg: #0d0d0e;
  --bg-2: #0a0a0b;
  --panel: #121211;
  --panel-2: #171614;
  --ink: #e7ddc9;
  --ink-2: #c7bfb1;
  --muted: #8a8175;
  --line: #2a2722;
  --black: #070707;
  --cyan: #e7ddc9;
  --cyan-d: #c9bca6;
  --red: #a6402e;
  --magenta: #a6402e;
  --magenta-d: #823124;
  --yellow: #e7ddc9;
  --white: #f3ead9;
  --paper: #e7ddc9;
  --green: #8f9c7c;
  --danger: #c65442;
  --display: "Arial Black", "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Microsoft YaHei", "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Microsoft YaHei", monospace;
}
html, body { background: #0d0d0e; }
body::before {
  background-image: radial-gradient(rgba(231,221,201,.055) 1px, transparent 1.5px);
  background-size: 8px 8px;
}
::selection { background: #a6402e; color: #f3ead9; }

.app {
  padding-left: 40px;
  max-width: 860px;
  background: #0d0d0e;
}

/* 左侧书脊 */
.spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 0 12px;
  gap: 11px;
  background: #070707;
  border-right: 1px solid #2a2722;
  overflow: hidden;
}
.spine::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #a6402e;
}
.spine-brand {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .24em;
  color: #e7ddc9;
}
.spine-date {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.08em;
  color: #e7ddc9;
}
.spine-month {
  font-family: var(--sans);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #a6402e;
}
.spine-rule {
  width: 1px;
  flex: 1;
  min-height: 22px;
  background: linear-gradient(#3a342c, rgba(58,52,44,.1));
}
.spine-word {
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #766e62;
}

/* 顶栏 */
.top {
  height: calc(45px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0 12px;
  background: #0a0a0b;
  border-bottom: 1px solid #2a2722;
}
.top::after { display: none; }
.brand { gap: 8px; }
.seal {
  width: 23px;
  height: 23px;
  background: #e7ddc9;
  color: #0d0d0e;
  border: 1px solid #2a2722;
  box-shadow: 2px 2px 0 #a6402e;
  font-size: 12px;
  transform: rotate(-3deg);
}
.wordmark {
  font-size: 14px;
  color: #e7ddc9;
  letter-spacing: .06em;
  transform: none;
}
.tagline {
  color: #7e7568;
  font-size: 6px;
  letter-spacing: .16em;
  padding-top: 2px;
  transform: none;
}
.top-right { gap: 0; }
.status { font-size: 8px; color: #a79d8d; }
.status::before { background: #a6402e; box-shadow: 0 0 0 3px rgba(166,64,46,.12); }
.iconbtn { color: #c7bfb1; width: 33px; height: 33px; }
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn:active { border-color: #a6402e; background: rgba(166,64,46,.1); }

/* 日期：撕纸 + 红斜条 */
.datebar {
  grid-template-columns: 26px 1fr 26px auto;
  min-height: 128px;
  padding: 14px 8px 12px 2px;
  background: #101011;
  background-image: none;
  border-bottom: 1px solid #2a2722;
  overflow: hidden;
}
.datebar::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 13px;
  width: min(272px, calc(100% - 68px));
  height: 98px;
  background: #e7ddc9;
  clip-path: polygon(0 8%, 100% 0, 98% 67%, 83% 72%, 75% 100%, 57% 91%, 39% 98%, 13% 89%, 0 94%);
  transform: rotate(-2deg);
  z-index: 0;
}
.datebar::after {
  content: "";
  position: absolute;
  right: -32px;
  top: 95px;
  width: 202px;
  height: 29px;
  background: #a6402e;
  transform: rotate(-13deg);
  clip-path: polygon(0 18%, 100% 0, 94% 100%, 7% 82%);
  z-index: 0;
  opacity: .92;
}
.datebar .dateArrow { z-index: 4; color: #c7bfb1; }
.datebar .dateArrow:active { color: #0d0d0e; background: #e7ddc9; }
.dateMain {
  position: relative;
  z-index: 2;
  min-height: 94px;
  gap: 12px;
  padding: 6px 6px 4px 14px;
  align-items: center;
}
.daynum,
.datebar.is-today .daynum,
.datebar:not(.is-today) .daynum {
  width: auto;
  height: auto;
  font-family: var(--display);
  font-size: 66px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: .85;
  color: #0d0d0e;
  text-shadow: none;
  transform: rotate(-2deg);
}
.daynum::before, .daynum::after { display: none; }
.datemeta { gap: 4px; }
.month {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #7b5a42;
  padding: 0;
  font-size: 9px;
  letter-spacing: .18em;
  transform: none;
}
.week {
  color: #5e5141;
  font-size: 8px;
  letter-spacing: .12em;
  font-weight: 700;
  text-shadow: none;
}
.todaySeal {
  z-index: 4;
  margin-left: 5px;
  background: #a6402e;
  color: #f3ead9;
  border: 0;
  box-shadow: 2px 2px 0 #070707;
  font-size: 9px;
  padding: 6px 7px;
  transform: rotate(2deg);
}
.datebar.compact {
  min-height: 54px;
  padding: 4px 8px 4px 2px;
  border-bottom-color: #2a2722;
}
.datebar.compact::before { display: none; }
.datebar.compact::after { top: 20px; right: -66px; opacity: .6; }
.datebar.compact .dateMain { min-height: 0; padding: 2px 4px 2px 9px; gap: 8px; }
.datebar.compact .daynum,
.datebar.compact.is-today .daynum {
  width: auto; height: auto;
  font-size: 30px;
  color: #e7ddc9;
  transform: none;
}
.datebar.compact .daynum::before { display: none; }
.datebar.compact .month { font-size: 8px; color: #a6402e; }
.datebar.compact .week { font-size: 8px; color: #8a8175; }
.datebar.compact .dateArrow { height: 38px; }
.datebar.compact .todaySeal { font-size: 8px; padding: 4px 5px; box-shadow: none; transform: none; }
.datebar.slide .dateMain { animation: dayFlip .2s ease; }

/* 草稿页日期票根 */
.draft-top {
  margin: 14px 12px 0;
  gap: 6px;
  position: relative;
}
.draft-date {
  background: #e7ddc9;
  color: #0d0d0e;
  border: 0;
  padding: 10px 13px;
  clip-path: polygon(0 4%, 97% 0, 100% 86%, 91% 94%, 82% 100%, 65% 95%, 47% 100%, 21% 95%, 0 99%);
  transform: rotate(-.7deg);
  box-shadow: 0 7px 18px rgba(0,0,0,.18);
}
#draftDateLabel { color: #0d0d0e; font-size: 20px; letter-spacing: -.02em; }
#draftDateSub { color: #6f5c47; font-size: 8px; letter-spacing: .02em; }
.draft-arrow {
  width: 34px;
  background: #0a0a0b;
  border: 1px solid #2a2722;
  color: #e7ddc9;
  font-size: 18px;
}
.draft-ai {
  min-width: 62px;
  background: #a6402e;
  color: #f3ead9;
  border: 0;
  box-shadow: 3px 3px 0 #070707;
  font-size: 9px;
  transform: rotate(1deg);
}
.draft-meta { margin: 8px 14px 0; color: #8a8175; }
.draft-meta b { color: #e7ddc9; }
.draft-meta .off { color: #a6402e; }
.draft-scroll { padding: 8px 12px 4px; }
.frag {
  background: #101011;
  border: 1px solid #2a2722;
  border-left: 3px solid #a6402e;
  padding: 10px 12px 8px;
  margin-bottom: 10px;
}
.frag::before { display: none; }
.frag-time { color: #c7bfb1; font-family: var(--sans); font-size: 9px; letter-spacing: .08em; }
.frag-text { color: #d3c8b6; font-size: 14px; line-height: 1.8; }
.frag-actions button { border-color: #2a2722; color: #8a8175; }
.frag-actions button:active { border-color: #a6402e; color: #e7ddc9; }
.frag-flag { color: #a6402e; border-color: #a6402e; }
.draft-empty { color: #8a8175; }
.draft-empty b { color: #e7ddc9; }
.draft-compose { margin: 0 12px 8px; border-top: 1px solid #2a2722; }
#draftInput {
  background: #101011;
  border: 1px solid #2a2722;
  color: #e7ddc9;
  caret-color: #e7ddc9;
  font-size: 13.5px;
}
#draftInput:focus { border-color: #a6402e; }
#draftInput::placeholder { color: #6f665b; }
.draft-send {
  background: #e7ddc9;
  color: #0d0d0e;
  border: 0;
  box-shadow: 3px 3px 0 #a6402e;
  font-size: 10px;
}
.draft-after { background: rgba(166,64,46,.1); border-left-color: #a6402e; color: #e7ddc9; }

/* 编辑器 */
.write-body { background: #0d0d0e; }
.editor-wrap { background: #0d0d0e; }
.editor-wrap::before { width: 5px; background: #a6402e; }
.editor-wrap::after { opacity: .035; }
.editor {
  color: #c9c0b1;
  caret-color: #e7ddc9;
  font-family: var(--sans);
  font-size: 15.8px;
  line-height: 1.92;
  padding: 21px 20px calc(34px + env(safe-area-inset-bottom)) 23px;
}
.editor::placeholder { color: #6f665b; }
.editor-mount .cm-content {
  font-family: var(--sans);
  font-size: 15.8px;
  line-height: 1.92;
  color: #c9c0b1;
  caret-color: #e7ddc9;
}
.editor-mount .cm-placeholder { color: #6f665b !important; }
.cm-line.cm-md-h1 { color: #e7ddc9; font-weight: 900; letter-spacing: -.03em; }
.cm-line.cm-md-h2 {
  color: #e7ddc9;
  border-left: 4px solid #a6402e;
  padding-left: 12px !important;
  font-weight: 800;
}
.cm-line.cm-md-h3 { color: #c7bfb1; }
.cm-line.cm-md-quote {
  border-left: 2px solid #a6402e;
  color: #c7bfb1;
  background: linear-gradient(90deg, rgba(166,64,46,.08), transparent 60%);
}
.cm-image { border: 1px solid #3a342c; border-radius: 2px; }
.wordcount {
  border: 0;
  border-left: 1px solid #3a342c;
  border-radius: 0;
  background: rgba(13,13,14,.82);
  color: #8a8175;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .08em;
}
.stamp { background: #e7ddc9; box-shadow: 0 0 0 4px rgba(231,221,201,.08); }

/* 编辑模式标题栏：窄书脊 + 标题签 */
.headingbar {
  width: 42px;
  padding: 7px 4px 6px;
  background: #0a0a0b;
  border-right: 1px solid #2a2722;
  gap: 7px;
}
.headingbar.open { width: 150px; }
.headingbar-tag {
  width: auto;
  min-height: 72px;
  margin: 0 auto;
  writing-mode: vertical-rl;
  border: 0;
  background: transparent;
  color: #a6402e;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  padding: 5px 0;
  justify-content: flex-start;
}
.headingbar-chev { display: none; }
.headingbar-tag::after {
  content: "+";
  writing-mode: horizontal-tb;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: #e7ddc9;
  margin-top: 8px;
  opacity: .65;
}
.headingbar.open .headingbar-tag::after { content: "−"; }
.headingbar:not(.open) .headingbar-list { display: none; }
.headingbar-list { gap: 5px; padding-bottom: 6px; }
.hchip {
  background: #101011;
  border: 1px solid #2a2722;
  border-left: 2px solid #3a342c;
  border-radius: 0;
  color: #b9af9e;
  font-size: 9.5px;
  padding: 5px;
}
.hchip b { background: #a6402e; color: #f3ead9; }
.hchip.h2 b { background: #e7ddc9; color: #0d0d0e; }
.hchip.h3 b { background: #574c3f; color: #e7ddc9; }
.hchip.current { border-color: #a6402e; background: #151412; box-shadow: none; }
.heading-dots { gap: 8px; padding: 6px 0; }
.heading-dot { width: 5px; height: 5px; background: #5e5141; opacity: .8; }
.heading-dot.h2 { background: #a6402e; }
.heading-dot.current { transform: scale(1.6); box-shadow: none; background: #e7ddc9; }

/* 工具栏与编号导航 */
.toolbar {
  background: #0a0a0b;
  border-top: 1px solid #2a2722;
  padding: 4px 6px;
  gap: 1px;
}
.toolbar button { min-width: 41px; height: 36px; color: #b9af9e; border: 1px solid transparent; }
.toolbar button:active, .toolbar button.on {
  background: #e7ddc9;
  border-color: #e7ddc9;
  color: #0d0d0e;
  box-shadow: 2px 2px 0 #a6402e;
}
.toolbar .txt { font-family: var(--sans); font-size: 11px; }
.tabbar {
  background: #070707;
  border-top: 1px solid #2a2722;
  height: 58px;
}
.tab {
  height: 58px;
  color: #7e7568;
  font-family: var(--sans);
  font-size: 9px;
  gap: 2px;
  padding-top: 11px;
}
.tab svg { display: none; }
.tab::after {
  content: "01";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .55;
}
.tab:nth-child(2)::after { content: "02"; }
.tab:nth-child(3)::after { content: "03"; }
.tab:nth-child(4)::after { content: "04"; }
.tab:nth-child(5)::after { content: "05"; }
.tab.active { color: #e7ddc9; }
.tab.active::before {
  left: 22%;
  right: 22%;
  top: 0;
  bottom: auto;
  width: auto;
  height: 2px;
  background: #a6402e;
  box-shadow: none;
}
.tab.active::after { color: #a6402e; opacity: 1; }
.tab-badge { background: #a6402e; color: #f3ead9; border-color: #070707; }

/* 笔记 / 搜索 / 设置 */
.subbar, .searchbar {
  background: #0a0a0b;
  border-bottom: 1px solid #2a2722;
}
.crumb { color: #e7ddc9; font-family: var(--sans); letter-spacing: .04em; }
.mini { color: #e7ddc9; }
.mini:active { border-color: #a6402e; }
.sect { color: #a6402e; font-family: var(--sans); letter-spacing: .08em; }
.sect::before { background: #a6402e; border: 0; border-radius: 50%; }
.sect::after { background: #2a2722; height: 1px; }
.item { border-bottom: 1px solid #2a2722; }
.item:active { background: #151412; }
.item .ico { background: #e7ddc9; color: #0d0d0e; border-radius: 0; }
.item[data-type="dir"] .ico { background: #a6402e; color: #f3ead9; }
.item .name { color: #e7ddc9; }
.item .sub { color: #8a8175; }
.item .chev { color: #a6402e; }
.searchbar input {
  background: #101011;
  border: 1px solid #2a2722;
  color: #e7ddc9;
  caret-color: #e7ddc9;
}
.searchbar input:focus { border-color: #a6402e; }
.searchIcon { color: #8a8175; }
.scope { background: #101011; border-color: #2a2722; color: #c7bfb1; }
.scope.all { background: #e7ddc9; color: #0d0d0e; }
.settings .opt, .settings .set-row { border-color: #2a2722; }
.settings { color: #c7bfb1; }

/* 配对与弹层 */
.gate { background: #0d0d0e; background-image: none; }
.gate::before {
  width: 280px; height: 280px;
  border-radius: 0;
  background: #a6402e;
  border: 0;
  clip-path: polygon(0 12%, 100% 0, 86% 100%, 9% 86%);
  top: -100px; right: -80px;
}
.gate-card {
  background: #e7ddc9;
  border: 0;
  box-shadow: 7px 7px 0 #a6402e;
  color: #0d0d0e;
  clip-path: polygon(0 3%, 100% 0, 99% 94%, 84% 100%, 63% 96%, 40% 100%, 18% 95%, 0 99%);
}
.gate-card h1 { color: #0d0d0e; transform: none; }
.gate-card p { color: #5e5141; }
.gate-card input { background: #f3ead9; border-color: #b9af9e; color: #0d0d0e; }
.gate-card input:focus { border-color: #a6402e; }
.gate-card .primary { background: #a6402e; color: #f3ead9; border: 0; box-shadow: 3px 3px 0 #0d0d0e; }
.gate-hint { color: #a6402e; }
.gate .seal.big { background: #a6402e; color: #f3ead9; border: 0; box-shadow: 4px 4px 0 #0d0d0e; }

/* 网络条和 toast */
.netbar { background: #151412; border-color: #a6402e; color: #e7ddc9; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.toast { background: #e7ddc9; color: #0d0d0e; }

/* 宽屏时保留书脊，不要让内容重新居中 */
@media (min-width: 820px) {
  .app { border-left: 0; border-right: 1px solid #2a2722; }
}
@media (max-width: 360px) {
  .spine { width: 34px; }
  .app { padding-left: 34px; }
  .datebar::before { left: 19px; width: calc(100% - 58px); }
  .daynum { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .datebar.slide .dateMain, .view.active { animation: none; }
}