:root {
  --paper: #f1ebdd;
  --paper-light: #f8f3e8;
  --paper-deep: #e8deca;
  --ink: #25241f;
  --ink-soft: rgba(37, 36, 31, 0.56);
  --ink-faint: rgba(37, 36, 31, 0.18);
  --cinnabar: #9f3528;
  --cinnabar-soft: rgba(159, 53, 40, 0.15);
  --book-cloth: #263a34;
  --white: #fffdf7;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #161814; }
body { min-height: 100%; margin: 0; color: var(--ink); background: #161814; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }
button, input, textarea { -webkit-tap-highlight-color: transparent; }

#app {
  position: relative;
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 14% 19%, rgba(106, 86, 50, 0.04) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 74% 62%, rgba(106, 86, 50, 0.035) 0 1px, transparent 1.6px),
    repeating-linear-gradient(4deg, transparent 0 27px, rgba(68, 58, 42, 0.018) 28px 29px);
  background-size: 17px 19px, 23px 21px, auto;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.34);
}

.screen { min-height: 100dvh; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.screen.no-nav { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.content { padding: 0 22px; }
.app-header {
  min-height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-faint);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-seal {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
  font: 600 13px/1 "STKaiti", "KaiTi", serif;
  transform: rotate(-2deg);
}
.brand-name { font: 500 21px/1 "Songti SC", "STSong", serif; letter-spacing: 0.22em; }
.folio { color: var(--ink-soft); font: 600 12px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.13em; }
.header-button { padding: 10px 0; color: var(--ink); background: transparent; border: 0; font: 13px/1 "Songti SC", serif; }
.header-button.accent { color: var(--cinnabar); }

h1, h2, h3, p { text-wrap: pretty; }
.date-note { margin-top: 33px; color: var(--cinnabar); font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.16em; }
.hero-title { margin: 14px 0 24px; font: 400 clamp(28px, 7vw, 34px)/1.35 "Songti SC", "STSong", serif; }
.section-title { margin: 34px 0 7px; font: 400 29px/1.34 "Songti SC", "STSong", serif; }
.section-subtitle { margin: 0 0 27px; color: var(--ink-soft); font: 14px/1.7 "Songti SC", serif; }
.small-label { color: var(--cinnabar); font: 700 12px/1.2 ui-monospace, monospace; letter-spacing: 0.12em; }

.folded-letter {
  position: relative;
  width: 100%;
  min-height: 338px;
  padding: 28px;
  color: var(--ink);
  text-align: left;
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(70, 54, 35, 0.11) 50%, transparent 50.25%),
    linear-gradient(180deg, var(--paper-light), #eee5d5);
  border: 1px solid rgba(64, 50, 31, 0.22);
  box-shadow: 0 18px 38px rgba(40, 33, 21, 0.12), inset 0 0 35px rgba(97, 70, 36, 0.04);
}
.folded-letter::before { content: ""; position: absolute; inset: 13px; border: 1px solid var(--cinnabar-soft); pointer-events: none; }
.folded-letter::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 69px; height: 1px; background: var(--ink-faint); }
.letter-kicker { color: var(--ink-soft); font: 13px/1.5 "Songti SC", serif; letter-spacing: 0.1em; }
.vertical-addressee { position: absolute; top: 30px; right: 30px; writing-mode: vertical-rl; font: 400 28px/1.45 "Songti SC", serif; letter-spacing: 0.08em; }
.arrival-copy { position: absolute; left: 28px; bottom: 27px; }
.arrival-copy strong { display: block; color: var(--cinnabar); font: 400 35px/0.9 Baskerville, Georgia, serif; }
.arrival-copy span { display: block; margin-top: 9px; color: var(--ink-soft); font-size: 12px; letter-spacing: 0.06em; }
.folded-letter .seal { position: absolute; left: 27px; top: 110px; }
.primary-line {
  width: 100%;
  margin-top: 18px;
  padding: 15px 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(37, 36, 31, 0.5);
  font: 600 15px/1 "Songti SC", serif;
}
.primary-line span:last-child { color: var(--cinnabar); }

.seal {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  color: var(--cinnabar);
  border: 2px solid currentColor;
  font: 600 14px/1.05 "STKaiti", "KaiTi", serif;
  writing-mode: vertical-rl;
  letter-spacing: 0.04em;
  clip-path: polygon(2% 8%, 10% 2%, 91% 4%, 98% 11%, 96% 91%, 88% 98%, 9% 96%, 3% 88%);
  transform: rotate(-4deg);
  opacity: 0.92;
}
.seal::before { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; clip-path: polygon(0 6%, 7% 0, 94% 3%, 100% 89%, 91% 100%, 4% 96%); }
.seal.small { width: 38px; height: 38px; font-size: 10px; opacity: 0.74; }

.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0;
  width: min(100%, 480px);
  min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 0 22px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  transform: translateX(-50%);
  background: rgba(241, 235, 221, 0.94);
  border-top: 1px solid var(--ink-faint);
  backdrop-filter: blur(15px);
}
.bottom-nav button { color: rgba(37, 36, 31, 0.43); background: transparent; border: 0; font: 13px/1 "Songti SC", serif; }
.bottom-nav button.active { color: var(--ink); }
.bottom-nav button.active::after { content: ""; display: block; width: 15px; height: 2px; margin: 8px auto 0; background: var(--cinnabar); }

.empty-sheet { padding: 42px 24px; border: 1px solid var(--ink-faint); text-align: center; }
.empty-sheet p { margin: 0 0 20px; color: var(--ink-soft); font: 14px/1.8 "Songti SC", serif; }
.ink-button, .cinnabar-button, .quiet-button {
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  font: 600 14px/1.2 "Songti SC", serif;
}
.ink-button { color: var(--paper-light); background: var(--book-cloth); }
.cinnabar-button { color: var(--paper-light); background: var(--cinnabar); }
.quiet-button { color: var(--ink); background: transparent; border: 1px solid rgba(37, 36, 31, 0.26); }
.full-button { width: 100%; }

.compose-meta { display: flex; align-items: center; justify-content: space-between; padding: 17px 0 12px; }
.layout-toggle { display: flex; border: 1px solid rgba(37, 36, 31, 0.22); }
.layout-toggle button { padding: 7px 10px; color: var(--ink-soft); background: transparent; border: 0; font-size: 12px; }
.layout-toggle button.active { color: var(--paper-light); background: var(--book-cloth); }
.letter-form { position: relative; min-height: 425px; padding: 18px 25px 22px; background:
  repeating-linear-gradient(90deg, transparent 0 41px, rgba(159, 53, 40, 0.14) 42px 43px),
  linear-gradient(var(--paper-light), rgba(248, 243, 232, 0.77)); border-top: 1px solid rgba(159, 53, 40, 0.32); border-bottom: 1px solid rgba(159, 53, 40, 0.32); }
.letter-form::before, .letter-form::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(159, 53, 40, 0.42); }
.letter-form::before { left: 8px; } .letter-form::after { right: 8px; }
.form-label { display: block; margin: 0 0 7px; color: var(--cinnabar); font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.12em; }
.title-input, .body-input { width: 100%; padding: 8px 0; color: var(--ink); background: rgba(248, 243, 232, 0.76); border: 0; border-bottom: 1px solid var(--ink-faint); border-radius: 0; outline: none; }
.title-input { font: 500 24px/1.4 "Songti SC", serif; }
.body-input { min-height: 248px; margin-top: 13px; resize: vertical; font: 400 17px/2 "Songti SC", serif; }
.letter-form.vertical { height: 456px; }
.letter-form.vertical .field-body { height: 352px; }
.letter-form.vertical .body-input { height: 100%; min-height: 0; padding: 9px 0; writing-mode: vertical-rl; text-orientation: upright; resize: none; line-height: 2.45; letter-spacing: 0.06em; }
.date-panel { margin-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.date-panel label { display: block; font: 500 14px/1.4 "Songti SC", serif; }
.date-panel input { width: 100%; margin-top: 8px; padding: 11px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--ink-faint); border-radius: 0; }
.stamp-action { width: 66px; height: 66px; padding: 0; background: transparent; border: 0; }

.letter-box { padding: 17px 14px 20px; background: var(--book-cloth); border: 1px solid rgba(15, 22, 20, 0.42); box-shadow: inset 0 0 0 3px rgba(241, 235, 221, 0.04), 0 13px 28px rgba(53, 46, 31, 0.14); }
.box-label { margin-bottom: 14px; color: rgba(241, 235, 221, 0.66); font: 600 12px/1 ui-monospace, monospace; letter-spacing: 0.15em; }
.archive-letter { width: 100%; min-height: 96px; margin-top: 8px; padding: 14px; display: grid; grid-template-columns: 62px 1fr 43px; gap: 9px; align-items: center; color: var(--ink); background: var(--paper-light); border: 0; text-align: left; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.14); }
.archive-letter time { color: var(--cinnabar); font: 700 11px/1.5 ui-monospace, monospace; }
.archive-letter strong { display: block; font: 500 16px/1.35 "Songti SC", serif; }
.archive-letter small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 12px; }
.archive-letter.available { outline: 2px solid rgba(159, 53, 40, 0.52); outline-offset: -4px; }
.arrived-list { margin-top: 28px; }
.arrived-list h3 { margin: 0 0 6px; color: var(--cinnabar); font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.14em; }
.arrived-row { width: 100%; padding: 17px 0; display: grid; grid-template-columns: 63px 1fr auto; gap: 9px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-faint); text-align: left; }
.arrived-row time { color: var(--ink-soft); font: 11px/1.5 ui-monospace, monospace; }
.arrived-row strong { font: 500 15px/1.4 "Songti SC", serif; }
.arrived-row span { color: var(--cinnabar); font-size: 12px; }

.locked-sheet { margin-top: 28px; padding: 34px 26px; background: var(--paper-light); border: 1px solid rgba(37, 36, 31, 0.2); text-align: center; box-shadow: 0 16px 34px rgba(47, 39, 25, 0.1); }
.locked-sheet .seal { margin-bottom: 22px; }
.locked-sheet h2 { margin: 0; font: 500 27px/1.35 "Songti SC", serif; }
.locked-sheet p { margin: 12px 0 0; color: var(--ink-soft); font: 14px/1.75 "Songti SC", serif; }
.days-counter { margin: 28px 0 8px; color: var(--cinnabar); font: 400 54px/0.9 Baskerville, Georgia, serif; }
.test-clock { margin-top: 27px; padding-top: 20px; border-top: 1px solid var(--ink-faint); }
.test-clock p { margin: 0 0 13px; font-size: 12px; }

.handscroll { position: relative; min-height: 590px; margin-top: 22px; padding: 28px 29px; overflow: hidden; background: linear-gradient(90deg, rgba(159, 53, 40, 0.06), transparent 12%, transparent 88%, rgba(159, 53, 40, 0.06)), var(--paper-light); border-top: 9px solid var(--book-cloth); border-bottom: 9px solid var(--book-cloth); box-shadow: 0 10px 28px rgba(47, 39, 25, 0.13); }
.handscroll::before { content: ""; position: absolute; inset: 13px; border: 1px solid var(--cinnabar-soft); pointer-events: none; }
.reader-title { position: absolute; top: 29px; right: 27px; margin: 0; writing-mode: vertical-rl; font: 500 25px/1.35 "Songti SC", serif; letter-spacing: 0.08em; }
.reader-meta { position: absolute; top: 31px; left: 26px; color: var(--ink-soft); font: 11px/1.6 ui-monospace, monospace; writing-mode: vertical-rl; letter-spacing: 0.08em; }
.reader-copy { position: absolute; top: 120px; right: 84px; height: 390px; margin: 0; overflow-x: auto; writing-mode: vertical-rl; text-orientation: upright; white-space: pre-wrap; font: 400 16px/2.25 "Songti SC", serif; letter-spacing: 0.05em; }
.reader-sign { position: absolute; left: 56px; bottom: 76px; color: var(--cinnabar); writing-mode: vertical-rl; font: 500 14px/1.4 "STKaiti", "KaiTi", serif; }
.handscroll .seal { position: absolute; left: 31px; bottom: 27px; width: 44px; height: 44px; font-size: 11px; }
.reader-actions { display: flex; justify-content: space-between; gap: 15px; margin-top: 19px; }
.reader-actions button { flex: 1; }

.settings-card { margin-top: 15px; padding: 19px; border: 1px solid var(--ink-faint); background: rgba(248, 243, 232, 0.6); }
.settings-card h3 { margin: 0 0 8px; font: 500 18px/1.4 "Songti SC", serif; }
.settings-card p { margin: 0 0 17px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.settings-row { width: 100%; min-height: 55px; padding: 13px 0; display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-faint); text-align: left; }
.settings-row span:first-child { font: 14px/1.4 "Songti SC", serif; }
.settings-row span:last-child { color: var(--ink-soft); font-size: 12px; }
.danger { color: var(--cinnabar) !important; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 26px; background: rgba(24, 25, 21, 0.82); backdrop-filter: blur(8px); }
.modal { width: min(100%, 410px); padding: 34px 27px 27px; color: var(--ink); background: var(--paper-light); text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36); }
.modal .seal { width: 76px; height: 76px; margin-bottom: 23px; font-size: 18px; }
.modal h2 { margin: 0; font: 500 26px/1.35 "Songti SC", serif; }
.modal p { margin: 12px 0 23px; color: var(--ink-soft); font: 14px/1.75 "Songti SC", serif; }
.modal .quiet-button { margin-top: 11px; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(calc(100% - 44px), 436px); padding: 13px 17px; transform: translateX(-50%); color: var(--paper-light); background: var(--book-cloth); text-align: center; font: 13px/1.45 "Songti SC", serif; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.privacy-note { margin: 22px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; text-align: center; }

@media (min-width: 620px) {
  body { padding: 24px 0; }
  #app { min-height: calc(100dvh - 48px); border-radius: 28px; }
  .screen { min-height: calc(100dvh - 48px); }
  .bottom-nav { bottom: 24px; border-radius: 0 0 28px 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  .folded-letter, .archive-letter, .seal { transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
  .folded-letter:active, .archive-letter:active { transform: translateY(2px); box-shadow: 0 8px 18px rgba(40, 33, 21, 0.1); }
  .stamp-action:active .seal, .modal .cinnabar-button:active + .seal { transform: rotate(-4deg) scale(0.94); opacity: 1; }
}