@font-face {
  font-family: "SmileySans";
  src: url("./assets/fonts/SmileySans-Oblique.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LXGWMarkerGothic";
  src: url("./assets/fonts/LXGWMarkerGothic-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LXGWWenKai";
  src: url("./assets/fonts/LXGWWenKai-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "HongLeiZhuoShu";
  src: url("./assets/HongLeiZhuoShuJianTi-2.ttf") format("truetype");
  font-display: swap;
}

:root {
  --desk: #eee7db;
  --paper: #fff9eb;
  --board-pink: #f5dfe1;
  --ink: #3f4746;
  --muted: #747c78;
  --blue: #477ca6;
  --select: #244f73;
  --song: #ea7b71;
  --ran: #65b7bc;
  --line: #dad9ca;
  --toolbar: rgba(255, 252, 244, 0.94);
  --paper-edge: rgba(119, 103, 78, .24);
  --paper-pencil: rgba(91, 80, 66, .16);
  --tool-paper: rgba(255, 251, 241, .9);
  --toolbar-border: #b9b9b9;
  --toolbar-hover-border: #202020;
  --toolbar-active: #202020;
  --asset-border: #111;
  --board-w: 1400px;
  --board-h: 991px;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--desk);
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

button, select { font: inherit; color: inherit; }
.toolbar, .sticker-dock, .sticker-dialog { font-family: "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }
.calendar-board { font-family: "HongLeiZhuoShu", "LXGWWenKai", "STKaiti", "KaiTi", cursive; }
.tool-icon, .icon-button, .compact-action, .brand-mark, .handle, .color-dot, .text-color-dot { font-family: sans-serif; }

button {
  min-height: 36px;
  border: 1px solid #d6d0c3;
  border-radius: 10px;
  padding: 6px 11px;
  background: #fffdf7;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(70, 61, 47, .08);
}

button:hover:not(:disabled) { background: #f5f9fa; border-color: #9db7c8; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, select:focus-visible, .calendar-board:focus-visible {
  outline: 3px solid rgba(71, 124, 166, .38);
  outline-offset: 2px;
}
button:disabled { opacity: .42; cursor: not-allowed; }
button[aria-pressed="true"] { color: #202020; border-color: var(--toolbar-active); background: #fff; }
button.danger:not(:disabled) { color: #a54843; }

.app-header {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 20px;
  overflow: hidden;
  border-bottom: 1px solid rgba(83, 75, 62, .12);
  background-color: rgba(246, 241, 232, .92);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.brand, .header-actions { position: relative; z-index: 4; }
.brand { display: flex; align-items: center; }
.brand h1 { margin: 0; font-size: 18px; letter-spacing: .08em; font-family: "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }
.header-actions { display: flex; align-items: center; gap: 12px; font-family: "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }
.user-picker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.user-picker select { height: 36px; border: 1px solid #d6d0c3; border-radius: 10px; background: #fffdf7; padding: 0 28px 0 10px; }
.mode-toggle { display: flex; gap: 7px; align-items: center; font-weight: 700; }
.mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--song); box-shadow: 0 0 0 3px rgba(234,123,113,.18); }

#app-shell { height: 100%; min-height: 0; }
.workspace { height: calc(100% - 64px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 196px; grid-template-rows: auto minmax(0, 1fr) auto; }
.toolbar {
  min-height: 50px; display: flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-bottom: 1px solid rgba(83, 75, 62, .12); background: var(--toolbar); overflow-x: auto; grid-column: 1 / -1;
}
.tool-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tool-divider { width: 1px; height: 28px; background: #d8d1c4; flex: 0 0 auto; }
.toolbar-spacer { flex: 1 1 auto; }
.tool-icon, .icon-button, .month-button, .compact-action { min-width: 40px; width: 40px; height: 54px; min-height: 54px; padding: 4px 3px 3px; display: grid; grid-template-rows: 28px auto; place-items: center; align-content: center; color: var(--blue); border-color: #a9bfd0; border-radius: 9px; font-weight: 800; }
.toolbar-icon { display: block; width: 24px; height: 24px; object-fit: contain; pointer-events: none; }
.month-tools .toolbar-icon { width: 25px; height: 25px; }
.tool-label { display: block; max-width: 100%; overflow: hidden; color: #000000; font: 400 11px/14px "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-synthesis: none; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
#app-shell [data-raster-label], #app-shell .sticker-category-label { color: #000; font-family: "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-weight: 400; font-synthesis: none; }
[data-raster-label].is-rasterized { display: inline-block; vertical-align: middle; }
.tool-label.is-rasterized, [data-raster-label].is-rasterized, .sticker-category-label.is-rasterized, .sticker-category-tab-add.is-rasterized { position: relative; }
.is-rasterized > .tool-label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.toolbar-label-image { display: block; max-width: none; image-rendering: auto; pointer-events: none; }
#storage-mode .toolbar-label-image { margin-left: auto; }
@media (forced-colors: active), print {
  .is-rasterized > .tool-label-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .toolbar-label-image { display: none; }
}
.export-action { width: 40px; }
.mode-toggle-icon { display: block; width: 28px; height: 24px; object-fit: contain; pointer-events: none; }
.toolbar button:hover:not(:disabled) { box-shadow: inset 0 -3px 0 #202020; }
.toolbar button[aria-pressed="true"] { color: #202020; background: #fff; border-color: var(--toolbar-active); box-shadow: inset 0 -3px 0 var(--toolbar-active); }
.toolbar button:disabled { opacity: .35; }
.toolbar-month-title { min-width: 58px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #202020; text-align: center; font-family: "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.toolbar-month-year, .toolbar-month-number { display: block; color: #202020; }
.toolbar-month-year { font-size: 15px; }
.toolbar-month-number { font-size: 15px; }
.icon-button { font-size: 24px; line-height: 1; }
.month-button { font-size: 12px; }
.compact-action { font-size: 11px; }
.header-background-action { width: 48px; font-size: 11px; }
.brush-size { display: flex; align-items: center; gap: 3px; color: var(--blue); }
.brush-size input { width: 58px; accent-color: var(--blue); }
.color-picker { position: relative; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; }
.color-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.color-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--song); border: 2px solid #fff; box-shadow: 0 0 0 1px #9db7c8; }
.view-tools output { min-width: 44px; text-align: center; font-size: 12px; color: var(--muted); }
.export-image-settings { display: grid; gap: 8px; }
.export-image-settings[hidden] { display: none; }

.canvas-viewport {
  position: relative; overflow: hidden; min-height: 0; touch-action: none;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 55%);
}
.sticker-dock { position: relative; grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; overflow: visible; padding: 14px 10px; border-left: 1px solid rgba(83,75,62,.14); background: rgba(248,243,233,.92); }
.sticker-dock-main { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: rgba(248,243,233,.98); }
.sticker-category-tabs { position: absolute; left: -25px; top: 30px; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 24px; min-width: 24px; padding-top: 0; font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }
.sticker-category-tab { position: relative; min-width: 0; min-height: 0; height: auto; box-sizing: border-box; padding: 3px 4px; border: 1px solid var(--toolbar-border); border-radius: 11px 0 0 11px; color: var(--ink); background: #fff; box-shadow: 1px 1px 0 rgba(113,91,59,.08); font: 11px/1.15 "Microsoft YaHei", "微软雅黑", Arial, sans-serif; cursor: pointer; writing-mode: vertical-rl; text-orientation: mixed; }
.sticker-category-label { position: static; writing-mode: inherit; text-orientation: inherit; white-space: nowrap; }
.sticker-category-tab-add, .sticker-category-tab-edit { display: grid; place-items: center; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin: 0 auto; padding: 0; border: 1px solid var(--toolbar-border); border-radius: 50%; color: var(--ink); background: #fff; font: 700 15px/1 sans-serif; }
.sticker-category-tab-edit { position: absolute; right: -3px; top: -5px; z-index: 2; width: 16px; height: 16px; min-width: 16px; min-height: 16px; font-size: 10px; opacity: 0; writing-mode: horizontal-tb; }
.sticker-category-tabs button:hover:not(:disabled) { background: #fff; border-color: var(--toolbar-hover-border); box-shadow: inset 0 -2px 0 var(--toolbar-hover-border); }
.sticker-category-tab:focus-visible { outline: 3px solid rgba(32,32,32,.3); outline-offset: 2px; }
.sticker-category-tab:hover .sticker-category-tab-edit, .sticker-category-tab:focus-within .sticker-category-tab-edit { opacity: 1; }
.sticker-dock.is-active { box-shadow: inset 0 0 0 1px var(--toolbar-active); }
.sticker-dock-heading { display: flex; flex-direction: column; gap: 3px; margin: 0 2px 10px; color: var(--ink); font-size: 15px; }
.sticker-dock-heading small { display: none; }
.sticker-import-actions { display: flex; gap: 6px; }
.sticker-import-actions[hidden] { display: none; }
.auto-cutout-button { flex: 1; min-width: 0; min-height: 34px; padding: 7px 8px; border: 1px solid var(--toolbar-border); border-radius: 9px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.auto-cutout-button:focus-visible, .sticker-delete:focus-visible { outline: 3px solid #ea7b71; outline-offset: 2px; }
.auto-cutout-button[disabled] { opacity: .58; cursor: wait; }
.sticker-delete { position: absolute; top: 3px; right: 3px; z-index: 2; display: grid; place-items: center; width: 19px; height: 19px; min-width: 19px; min-height: 19px; max-width: 19px; max-height: 19px; box-sizing: border-box; flex: 0 0 19px; padding: 0; aspect-ratio: 1; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #d9534f; box-shadow: none; font-size: 12px; line-height: 1; text-align: center; cursor: pointer; }
.sticker-delete:hover:not(:disabled), .sticker-delete:active:not(:disabled) {
  color: #fff !important;
  background: #d9534f !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
.sticker-choice.is-user { border-color: var(--asset-border); }
.sticker-palette { display: grid; flex: 1 1 0; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 78px; align-content: start; gap: 5px; max-height: none; overflow-y: auto; padding: 2px; }
.sticker-choice { position: relative; min-width: 0; height: 78px; padding: 4px; border: 1px solid var(--asset-border); border-radius: 10px; background-color: #fff9eb; cursor: pointer; overflow: hidden; }
.sticker-add { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.sticker-add img, .sticker-choice > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(1px 2px 2px rgba(82,67,42,.18)); }
.note-loading { grid-column: 1 / -1; padding: 18px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.note-content { position: relative; overflow: hidden; }
.note-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; }
.note-text { position: absolute; inset: 18% 13% 12%; overflow: hidden; white-space: pre-wrap; word-break: break-word; line-height: 1.35; text-align: left; pointer-events: none; }
/* Note copy is deliberately kept in the model and rendered in the reader
   dialog on browse double-click; it must not cover the artwork on the board. */
.edit-mode .type-note .note-text, .browse-mode .type-note .note-text { visibility: hidden; }
.sticker-dialog.note-reader-dialog { width: min(680px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.note-editor-dialog { width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.note-reader-stage { display: grid; place-items: center; width: min(620px, 80vw); min-height: min(300px, 52vh); max-height: 62vh; margin-top: 12px; padding: 24px; box-sizing: border-box; overflow: auto; border: 1px solid #e1d5c2; border-radius: 12px; background: #fffdf8; }
.note-reader-text { width: 100%; white-space: pre-wrap; word-break: break-word; line-height: 1.5; text-align: center; }
.note-rich-editor { display: block; width: 100%; min-height: 220px; max-height: 46vh; overflow-y: auto; box-sizing: border-box; padding: 12px; border: 1px solid #d8cdbb; border-radius: 10px; color: var(--ink); background: #fff; font: 25px/1.55 "LXGWWenKai", "Microsoft YaHei", "微软雅黑", sans-serif; white-space: pre-wrap; word-break: break-word; outline: none; }
.note-rich-editor:focus { border-color: #65b7bc; box-shadow: 0 0 0 3px rgba(101,183,188,.16); }
.note-rich-editor:empty::before { content: attr(data-placeholder); color: #aaa298; pointer-events: none; }
.note-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.note-editor-toolbar label { display: flex; align-items: center; gap: 4px; margin: 0; }
.note-editor-toolbar select { width: 112px; margin: 0; padding: 6px; border: 1px solid #d8cdbb; border-radius: 8px; background: #fff; }
.note-editor-toolbar input[type="number"] { width: 64px; margin: 0; padding: 6px; }
.note-editor-toolbar input[type="color"] { width: 34px; height: 30px; margin: 0; padding: 2px; }
.note-editor-toolbar input[type="checkbox"] { width: auto; margin: 0; }
.note-editor-toolbar span { margin-left: auto; }
.sticker-dialog { width: min(720px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-x: hidden; overflow-y: auto; border: 1px solid #ded5c4; border-radius: 16px; padding: 22px; color: var(--ink); background: #fffaf0; box-shadow: 0 18px 60px rgba(61,49,31,.22); }
.sticker-dialog::backdrop { background: rgba(39,34,25,.38); }
.sticker-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.sticker-dialog p { margin: 8px 0 14px; line-height: 1.5; }
.sticker-dialog label { display: block; margin-top: 12px; font-size: 13px; }
.sticker-dialog input { width: 100%; box-sizing: border-box; margin: 5px 0; padding: 9px 10px; border: 1px solid #d8cdbb; border-radius: 8px; background: #fff; }
.sticker-model-note { color: #8a5a45; font-size: 12px; }
.sticker-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.sticker-dialog-actions button { padding: 9px 13px; border: 1px solid #cbbca5; border-radius: 9px; color: var(--ink); background: #fff; cursor: pointer; }
.sticker-dialog-actions button:first-child { border-color: var(--ran); background: #e6f4f1; }
.sticker-dialog-actions button:focus-visible { outline: 3px solid #ea7b71; outline-offset: 2px; }

/* 跨区域控件只复用工具栏的颜色状态，不改变尺寸或交互结构。 */
#mode-toggle, .sticker-import-actions .auto-cutout-button {
  color: var(--ink);
  border-color: var(--toolbar-border);
  background: #fff;
  box-shadow: 1px 1px 0 rgba(113, 91, 59, .08);
}
#sticker-category-tabs .sticker-category-tab {
  border-color: var(--toolbar-border);
}
#mode-toggle:hover:not(:disabled), .sticker-import-actions .auto-cutout-button:hover:not(:disabled) {
  color: var(--ink);
  background: #fff;
  border-color: var(--toolbar-hover-border);
  box-shadow: inset 0 -3px 0 var(--toolbar-hover-border);
}
#sticker-category-tabs .sticker-category-tab:hover {
  background: #fff;
  border-color: var(--toolbar-hover-border);
  box-shadow: inset 0 -3px 0 var(--toolbar-hover-border);
}
#mode-toggle[aria-pressed="true"], .sticker-import-actions .auto-cutout-button[aria-pressed="true"], #sticker-category-tabs .sticker-category-tab[aria-pressed="true"], #sticker-category-tabs .sticker-category-tab.is-active {
  color: #202020;
  background: #fff;
  border-color: var(--toolbar-active);
  box-shadow: inset 0 -3px 0 var(--toolbar-active);
}
#mode-toggle:disabled, .sticker-import-actions .auto-cutout-button:disabled, #sticker-category-tabs .sticker-category-tab[aria-disabled="true"] {
  color: var(--ink);
  opacity: .35;
  cursor: not-allowed;
}
.canvas-viewport.browse-mode { cursor: grab; }
.canvas-viewport.browse-mode.is-panning { cursor: grabbing; }
.scene { position: absolute; width: var(--board-w); height: var(--board-h); transform-origin: 0 0; }

.calendar-board {
  position: relative; width: var(--board-w); height: var(--board-h); overflow: hidden;
  isolation: isolate;
  border: 1px solid #ded5c4; border-radius: 20px; background-color: var(--board-pink); background-repeat: no-repeat; background-position: center bottom; background-size: 46% auto;
  box-shadow: 0 18px 45px rgba(71, 62, 47, .16), 0 3px 8px rgba(71, 62, 47, .08);
  user-select: none;
}
.calendar-board.calendar-image-mode { background: #fff; }
.calendar-board.calendar-image-mode::before,
.calendar-board.calendar-image-mode::after { display: none; }
.calendar-image { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; pointer-events: none; user-select: none; }
.calendar-board.has-custom-background .calendar-image { mix-blend-mode: multiply; }
.calendar-board::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.62) 0 3px, transparent 3.5px), radial-gradient(circle, rgba(255,255,255,.38) 0 2px, transparent 2.5px);
  background-position: 8px 10px, 21px 23px;
  background-size: 34px 34px, 34px 34px;
}
.calendar-board.has-custom-background::before { display: none; }
.paper-tape { position: absolute; z-index: 6; top: -10px; width: 100px; height: 32px; opacity: .8; background: rgba(221, 205, 161, .55); transform: rotate(-4deg); }
.tape-left { left: 85px; } .tape-right { left: auto; right: 85px; transform: rotate(4deg); }
.board-heading { position: absolute; z-index: 2; left: 45px; right: 45px; top: 24px; height: 82px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.year-title { margin: 0 0 -4px; color: #8099a8; text-align: center; font-size: 13px; letter-spacing: .35em; }
.board-heading h2 {
  position: relative; margin: 0; color: var(--blue); font-family: "HongLeiZhuoShu", "LXGWWenKai", "STKaiti", "KaiTi", cursive;
  font-size: 48px; line-height: 1; letter-spacing: .12em; transform: rotate(-1deg);
}
.board-heading h2::after { content: ""; position: absolute; left: 12%; right: 8%; bottom: -10px; height: 4px; border-top: 2px solid rgba(71,124,166,.55); border-radius: 50%; transform: rotate(.8deg); }
.heading-doodle, .board-note { display: none; }

.calendar-grid { position: absolute; z-index: 1; left: 40px; right: 40px; top: 122px; bottom: 40px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 42px repeat(6, 1fr); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--paper); }
.weekday, .day-cell { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.weekday:nth-child(7), .day-cell:nth-child(7n) { border-right: 0; }
.day-cell:nth-last-child(-n + 7) { border-bottom: 0; }
.weekday { display: grid; place-items: center; background: rgba(224, 228, 216, .28); color: #73817c; font-size: 13px; letter-spacing: .12em; }
.weekday.weekend { color: #b36f69; background: rgba(234,123,113,.06); }
.day-cell { background: rgba(255,255,255,.12); }
.day-cell.weekend { background: rgba(234,123,113,.025); }
.day-cell.outside { background: rgba(211,208,193,.12); }
.day-number { position: absolute; top: 8px; left: 10px; color: #69726e; font-size: 14px; font-weight: 700; }
.day-cell.outside .day-number { color: #c0bdb2; }
.day-cell.today .day-number { display: grid; place-items: center; width: 28px; height: 28px; top: 3px; left: 5px; border-radius: 50%; color: #fff; background: var(--blue); transform: rotate(-4deg); }

.elements-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.journal-element { position: absolute; transform-origin: center; pointer-events: auto; touch-action: none; cursor: move; }
.journal-element.type-text { overflow: visible; }
.browse-mode .journal-element { pointer-events: auto; cursor: zoom-in; }
.element-content { width: 100%; height: 100%; overflow: hidden; border-radius: 8px; }
.type-text .element-content { display: grid; place-items: center; padding: 4px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-family: "SmileySans", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-size: 25px; line-height: 1.38; white-space: pre-wrap; text-align: center; }
.curved-text-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.curved-text-svg text { dominant-baseline: middle; font: inherit; fill: currentColor; text-decoration: inherit; }
.arc-handle { cursor: ns-resize; background: #6d9fbd; }
.text-style-control[hidden] { display: none; }
.text-color-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--song); border: 2px solid #fff; box-shadow: 0 0 0 1px #9db7c8; }
.type-text.is-editing { cursor: text; }
.inline-text-editor { width: 100%; height: 100%; min-width: 0; padding: 4px; resize: none; overflow: auto; border: 1px solid rgba(36,79,115,.38); border-radius: 3px; outline: 2px solid rgba(36,79,115,.18); outline-offset: 1px; color: inherit; background: transparent; font: inherit; line-height: inherit; text-align: inherit; white-space: pre-wrap; user-select: text; }
.inline-text-editor:focus { border-color: var(--select); outline-color: rgba(36,79,115,.28); }
.type-image .element-content { box-sizing: border-box; display: block; width: 100%; height: 100%; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.type-image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border: 0; border-radius: 0; pointer-events: none; image-rendering: auto; }
.type-sticker .element-content { display: grid; place-items: center; padding: 0; background: transparent; }
.type-sticker .sticker-content { padding: 0; border: 0; background: transparent; overflow: visible; }
.sticker-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(2px 4px 4px rgba(82,67,42,.18)); pointer-events: none; }
.type-sticker small { display: block; margin-top: 5px; font-family: sans-serif; font-size: 10px; }
.image-loading-placeholder, .image-failure-placeholder { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; padding: 10px; border: 1px dashed #c9bba8; border-radius: 8px; color: #766856; background: rgba(243,238,229,.92); font: 13px/1.4 "Microsoft YaHei", "微软雅黑", sans-serif; text-align: center; }
.image-failure-placeholder { gap: 8px; color: #8a5a45; }
.image-failure-placeholder button { min-height: 28px; padding: 4px 10px; border: 1px solid #c59a7a; border-radius: 7px; color: #70452f; background: #fffaf0; cursor: pointer; }
.image-failure-placeholder button:hover, .image-failure-placeholder button:focus-visible { background: #f8e5d7; }
.type-drawing .element-content { overflow: visible; pointer-events: auto; }
.type-drawing svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: bounding-box; }
.type-drawing svg path { pointer-events: stroke; }
.type-drawing { cursor: default; }
.calendar-board.brush-cursor, .calendar-board.brush-cursor * { cursor: none !important; }
.brush-cursor-layer { position: absolute; z-index: 40; width: var(--brush-cursor-size, 6px); height: var(--brush-cursor-size, 6px); border-radius: 50%; background: var(--brush-cursor-color, #ea7b71); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 2px rgba(32,32,32,.6); transform: translate(-50%, -50%); pointer-events: none; }
.calendar-board.eraser-cursor, .calendar-board.eraser-cursor * { cursor: none !important; }
/* eraser-cursor.svg remains the self-contained black-ring/tool PNG source. */
.eraser-cursor-layer { position: absolute; z-index: 40; display: none; width: var(--eraser-cursor-size, 24px); height: var(--eraser-cursor-size, 24px); transform: translate(-50%, -50%); pointer-events: none; }
.eraser-cursor-layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.canvas-viewport.eraser-active .eraser-cursor-layer { display: block; }
.eraser-size { display:flex; align-items:center; gap:5px; color:#4f8797; font-size:11px; }
.eraser-size input { width:74px; accent-color:#4f8797; cursor:ew-resize; }
.eraser-size output { min-width:40px; }
.selection-frame { display: none; position: absolute; inset: -2px; border: 1px solid var(--select); border-radius: 2px; pointer-events: none; }
.journal-element.selected .selection-frame { display: block; }
.handle {
  position: absolute;
  box-sizing: border-box;
  /* Keep the visible affordance circular. The former percentage height was
     resolved against the text box height (while width used its width),
     turning controls on rectangular text boxes into ellipses. */
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  aspect-ratio: 1;
  border: 2px solid #fff;
  background: var(--select);
  box-shadow: 0 1px 4px rgba(20,35,45,.35);
  pointer-events: auto;
}
/* Keep a practical pointer target without making the visible affordance
   dominate very small images, text, stickers, notes, or drawings. */
.handle::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; min-width: 18px; min-height: 18px; transform: translate(-50%, -50%); }
.resize-handle { right: calc(clamp(6px, 20%, 18px) / -2); bottom: calc(clamp(6px, 20%, 18px) / -2); border-radius: 50%; cursor: nwse-resize; }
.rotate-line { position: absolute; width: 1px; height: clamp(8px, 24%, 25px); left: 50%; top: calc(clamp(8px, 24%, 25px) * -1 - 1px); background: var(--select); transform: translateX(-50%); }
.rotate-handle { left: 50%; top: calc(clamp(6px, 20%, 18px) * -1 - clamp(8px, 24%, 25px)); border-radius: 50%; transform: translateX(-50%); cursor: grab; }
.delete-handle { right: calc(clamp(6px, 20%, 18px) / -2); top: calc(clamp(6px, 20%, 18px) * -1 - 2px); display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d9534f; font: 700 13px/1 sans-serif; cursor: pointer; }
.delete-handle:hover, .delete-handle:active {
  color: #fff !important;
  background: #d9534f !important;
  border-color: #fff !important;
}

.mode-hint { position: absolute; left: 50%; bottom: 16px; z-index: 10; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; color: #fff; background: rgba(45,67,74,.82); box-shadow: 0 4px 18px rgba(45,55,56,.22); font-size: 12px; pointer-events: none; white-space: nowrap; }
.statusbar { grid-column: 1 / -1; min-height: 46px; display: grid; grid-template-columns: auto minmax(200px, 1fr) minmax(330px, auto); align-items: center; gap: 18px; padding: 6px 16px; border-top: 1px solid rgba(83,75,62,.12); background: rgba(246,241,232,.96); font-size: 11px; font-family: "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }
#status-main { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.selection-meta { overflow: hidden; color: #5e6966; text-overflow: ellipsis; white-space: nowrap; }
.prototype-warning { color: #8b655f; text-align: right; }
.toast { position: fixed; z-index: 1000; left: 50%; bottom: 64px; max-width: min(90vw, 520px); padding: 10px 16px; border-radius: 12px; color: #fff; background: rgba(53,69,70,.94); box-shadow: 0 8px 26px rgba(40,35,29,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s ease; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.image-preview { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 5vmin; background: rgba(21, 31, 35, .88); }
.image-preview[hidden] { display: none; }
.image-preview img { display: block; max-width: none; max-height: none; width: auto; height: auto; object-fit: contain; image-rendering: auto; transform-origin: center; transition: transform .18s ease; }
.image-preview-close { position: absolute; top: 18px; right: 22px; z-index: 1; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(30,45,50,.72); font-size: 30px; line-height: 1; cursor: pointer; }
.image-preview-rotate { position: absolute; right: 22px; bottom: 20px; z-index: 1; min-width: 88px; height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; background: rgba(30,45,50,.72); font-size: 15px; cursor: pointer; }
.image-preview-rotate:hover, .image-preview-close:hover { background: rgba(45,67,74,.96); }
.image-preview-rotate:focus-visible,
.image-preview-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) {
  .app-header { height: 56px; padding: 6px 10px; }
  .brand-mark, .brand p, .user-picker > span { display: none; }
  .brand h1 { font-size: 15px; }
  .header-actions { gap: 7px; }
  .user-picker select { max-width: 128px; }
  .workspace { height: calc(100% - 56px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .canvas-viewport { grid-column: 1; grid-row: 2; }
  .sticker-dock { grid-column: 1; grid-row: 3; height: 112px; padding: 7px 9px; border-left: 0; border-top: 1px solid rgba(83,75,62,.14); }
  .sticker-dock-heading { flex-direction: row; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
  .sticker-palette { display: flex; overflow-x: auto; overflow-y: hidden; gap: 8px; }
  .sticker-choice { flex: 0 0 86px; height: 72px; }
  .statusbar { grid-row: 4; }
  .toolbar { min-height: 50px; padding: 6px 8px; }
  .tool-divider, .toolbar-spacer { display: none; }
  .toolbar button { min-height: 34px; padding: 5px 9px; font-size: 12px; }
  .toolbar .tool-icon, .toolbar .icon-button, .toolbar .month-button, .toolbar .compact-action { padding: 5px 3px; }
  .edit-tools.disabled { opacity: .35; }
  .statusbar { grid-template-columns: 1fr auto; min-height: 58px; gap: 5px 10px; padding: 5px 10px; }
  .selection-meta { text-align: right; }
  .prototype-warning { grid-column: 1 / -1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toast { bottom: 72px; }
}

@media (max-width: 560px) {
  .brand { display: none; }
  .app-header { justify-content: center; }
  .tool-group { gap: 4px; }
  .layer-tools { display: none; }
  .sticker-dock { height: 104px; }
  .statusbar { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Sketchbook UI 提取：低对比度纸张、铅笔线与分组层次。装饰层不参与命中测试。 */
.canvas-viewport::before,
#canvas-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(113, 94, 69, .08) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 62%, rgba(255, 255, 255, .52) 0 1px, transparent 1.8px),
    linear-gradient(112deg, rgba(255,255,255,.2), transparent 38%, rgba(139,117,85,.06) 72%, transparent);
  background-size: 19px 19px, 27px 27px, 100% 100%;
}
.scene { z-index: 1; }
.calendar-board {
  border-color: rgba(117, 99, 74, .24);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 0 11px 28px rgba(71, 62, 47, .12), 0 2px 5px rgba(71, 62, 47, .07);
}
.calendar-board::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 4px;
  pointer-events: none;
  border: 1px solid var(--paper-edge);
  border-radius: 17px 14px 19px 15px;
  transform: rotate(.12deg);
  opacity: .72;
}
.calendar-board::before {
  opacity: .52;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.58) 0 1.4px, transparent 1.9px),
    radial-gradient(circle, rgba(106,89,65,.08) 0 1px, transparent 1.6px),
    repeating-linear-gradient(17deg, transparent 0 8px, rgba(255,255,255,.07) 8px 9px);
  background-position: 8px 10px, 21px 23px, 0 0;
  background-size: 29px 29px, 37px 37px, 100% 13px;
}
.calendar-board.has-custom-background::before { display: none; }
.board-heading { top: 21px; }
.year-title { color: #82939a; font-size: 12px; letter-spacing: .42em; }
.board-heading h2 { text-shadow: 1px 1px 0 rgba(255,255,255,.52); }
.board-heading h2::after { border-top-color: rgba(71,124,166,.44); border-bottom: 1px solid rgba(71,124,166,.18); }
.calendar-grid {
  border-color: rgba(132, 125, 108, .34);
  background-color: rgba(255, 251, 239, .9);
  background-image: radial-gradient(rgba(112, 99, 78, .06) .7px, transparent .8px);
  background-size: 13px 13px;
}
.weekday, .day-cell { border-color: rgba(132, 125, 108, .26); }
.weekday { background: rgba(224, 228, 216, .34); color: #687872; font-weight: 700; }
.day-cell { background-color: rgba(255,255,255,.08); }
.day-number { color: #5e6c68; }
.day-cell.today .day-number { box-shadow: 1px 1px 0 rgba(36,79,115,.2); }

.toolbar {
  gap: 9px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(255,253,247,.98), rgba(247,241,230,.94));
}
.tool-group {
  gap: 5px;
  padding: 3px 5px;
  border: 1px solid rgba(175, 158, 131, .28);
  border-radius: 13px 11px 12px 10px;
  background: var(--tool-paper);
  box-shadow: 0 1px 0 rgba(113, 91, 59, .07);
}
.month-tools, .storage-tools, .view-tools { background: rgba(255,249,236,.72); }
.tool-divider { height: 30px; background: rgba(133, 116, 90, .28); }
.tool-icon, .icon-button, .month-button, .compact-action {
  border-color: var(--toolbar-border);
  border-radius: 10px 8px 9px 8px;
  background: #fff;
  box-shadow: 1px 1px 0 rgba(113,91,59,.08);
}
.toolbar button:not(:disabled) {
  border-color: var(--toolbar-border);
  background: #fff;
}
.tool-icon:hover:not(:disabled), .icon-button:hover:not(:disabled), .month-button:hover:not(:disabled), .compact-action:hover:not(:disabled) { color: var(--ink); background: #fff; border-color: var(--toolbar-hover-border); box-shadow: inset 0 -3px 0 var(--toolbar-hover-border); }
.toolbar button[aria-pressed="true"] { color: #202020; background: #fff; border-color: var(--toolbar-active); box-shadow: inset 0 -3px 0 var(--toolbar-active); }
.tool-icon[aria-pressed="true"] { color: #202020; background: #fff; border-color: var(--toolbar-active); }
.toolbar .tool-icon[aria-pressed="true"]:hover:not(:disabled), .toolbar button[aria-pressed="true"]:hover:not(:disabled) { color: #202020; background: #fff; border-color: var(--toolbar-active); box-shadow: inset 0 -3px 0 var(--toolbar-active); }
.tool-icon:focus-visible, .icon-button:focus-visible, .month-button:focus-visible, .compact-action:focus-visible { outline: 3px solid rgba(71,124,166,.3); outline-offset: 2px; }
.brush-size, .color-picker { border-color: var(--toolbar-border); }
.brush-size:hover, .color-picker:hover { border-color: var(--toolbar-hover-border); }
.brush-size, .color-picker { min-height: 32px; padding: 3px 6px; border: 1px solid var(--toolbar-border); border-radius: 10px 8px 9px 8px; background: #fff; }
.brush-size { gap: 5px; }
.brush-size > span { color: var(--song); font-size: 17px; line-height: 1; text-shadow: 1px 1px 0 rgba(113,91,59,.18); }
.brush-size input { accent-color: #4f8797; cursor: ew-resize; }
.brush-size:focus-within, .color-picker:focus-within { border-color: #72a6af; box-shadow: 0 0 0 3px rgba(101,183,188,.14); }
.color-dot, .text-color-dot { box-shadow: 0 0 0 1px rgba(111,145,162,.72), inset 0 0 0 1px rgba(255,255,255,.55); }

/* Text settings share one compact row; loading replaces the selected name. */
.text-style-controls { display: grid; grid-template-columns: 24px 108px 26px 32px 60px; align-items: start; gap: 4px; flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--toolbar-border); border-radius: 9px; background: rgba(255,255,255,.65); color: #000; font: 400 11px/14px "LXGWMarkerGothic", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-synthesis: none; }
.text-style-controls .color-picker { width: 24px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.text-font-control { position: relative; display: block; min-width: 0; height: 28px; }
.text-font-control select { width: 100%; min-width: 0; height: 28px; padding: 2px 3px; border: 1px solid #ddd6ca; border-radius: 5px; background: #fffdf8; font: inherit; }
.font-load-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.toolbar .text-style-controls button { display: grid; place-items: center; width: 100%; min-width: 0; height: 28px; min-height: 28px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; box-shadow: none; font: inherit; }
.toolbar .text-style-controls button:hover:not(:disabled) { border-color: var(--toolbar-hover-border); background: #fff; box-shadow: inset 0 -3px 0 var(--toolbar-hover-border); }
.toolbar .text-style-controls button[aria-pressed="true"] { border-color: var(--toolbar-active); background: #fff; box-shadow: inset 0 -3px 0 var(--toolbar-active); }
.toolbar .text-style-controls #text-underline { font: 400 14px/1 Arial, sans-serif; text-decoration: underline; text-underline-offset: 2px; }
.text-size-control { display: flex; align-items: center; gap: 3px; height: 28px; font-size: 10px; }
.text-size-control input { width: 35px; min-width: 0; height: 28px; padding: 1px; border: 1px solid #ddd6ca; border-radius: 5px; color: #000; background: #fffdf8; font: 400 11px/1 Arial, sans-serif; text-align: center; }
.text-style-controls input:focus-visible { outline: 2px solid rgba(36,79,115,.4); outline-offset: 1px; }
.type-drawing svg path { stroke-linecap: round; stroke-linejoin: round; }

/* 认证入口：欢迎、登录与注册共用同一张柔和粉色手帐卡片。 */
.entry-layer { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; place-items: center; width: 100%; height: min(100dvh, var(--entry-viewport-height, 100dvh)); max-height: min(100dvh, var(--entry-viewport-height, 100dvh)); overflow: hidden; padding: 16px 18px; color: #51464a; background: #FBF7F4; pointer-events: auto; isolation: isolate; }
.entry-card { position: relative; z-index: 1; box-sizing: border-box; width: min(100%, 560px); height: min(650px, calc(min(100dvh, var(--entry-viewport-height, 100dvh)) - 68px)); max-height: calc(min(100dvh, var(--entry-viewport-height, 100dvh)) - 68px); min-height: 0; overflow: auto; padding: 54px clamp(26px, 8vw, 72px) 48px; border-radius: 42px; text-align: center; background: #FBF7F4; box-shadow: 0 20px 60px rgba(201,135,143,.23), 0 3px 10px rgba(185,125,135,.1); transition: box-shadow .3s ease, transform .3s ease; pointer-events: auto; }
.entry-icp { margin: 0; color: #796a6b; font-size: 12px; line-height: 20px; text-align: center; }
.entry-icp a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; text-underline-offset: 3px; }
.entry-icp a:hover { text-decoration: underline; }
.entry-icp a:focus-visible { outline: 3px solid #a96772; outline-offset: 3px; border-radius: 3px; }
.entry-illustration { width: min(100%, 260px); margin: 0 auto 24px; color: #bb8589; }
.entry-illustration img { display: block; width: 100%; height: auto; }
.entry-card h1, .login-heading h2 { margin: 0; color: #6d5559; font-family: "HongLeiZhuoShu", "KaiTi", cursive; font-weight: 400; letter-spacing: .08em; }
.entry-card h1 { position: relative; top: -8px; font-size: clamp(42px, 8vw, 58px); }
.entry-welcome { margin: 18px 0 30px; color: #796a6b; font-size: 15px; line-height: 2; }
.entry-primary { position: relative; z-index: 2; min-width: 174px; min-height: 48px; padding: 10px 28px; border: 0; border-radius: 999px; color: #fffaf6; background: #d99198; box-shadow: 0 7px 16px rgba(201,126,137,.24); font: inherit; font-size: 16px; cursor: pointer; transition: transform .2s ease, background .2s ease; pointer-events: auto; }
.entry-primary:hover { background: #c9828b; transform: translateY(-1px); }
.entry-primary:hover:not(:disabled), .login-submit:hover:not(:disabled) { color: #fffaf6; background: #c9828b; }
.entry-primary:focus-visible, .entry-secondary:focus-visible, .entry-link:focus-visible, .entry-back:focus-visible, .login-form input:focus-visible { outline: 3px solid #a96772; outline-offset: 3px; }
.login-form { margin-top: 8px; text-align: left; }
.login-heading { margin-bottom: 22px; text-align: center; }
.login-heading h2 { font-size: 34px; }
.login-heading p { margin: 8px 0 0; color: #897779; font-size: 13px; }
.login-form label { display: block; margin: 14px 0 7px; color: #665659; font-size: 13px; }
.login-form input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 1px solid #ead5d2; border-radius: 13px; color: #51464a; background: #fffdf9; font: inherit; }
.login-form input::placeholder { color: #b9a8a9; }
.login-submit { display: block; width: 100%; margin-top: 24px; }
.entry-secondary { position: relative; z-index: 2; min-height: 42px; padding: 8px 22px; border: 1px solid #d8a0a6; border-radius: 999px; color: #9d616b; background: rgba(255,253,249,.72); box-shadow: 0 4px 12px rgba(201,126,137,.1); font: inherit; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; pointer-events: auto; }
.entry-secondary:hover:not(:disabled) { color: #824f58; border-color: #c9828b; background: #fffaf6; transform: translateY(-1px); }
.entry-primary:disabled, .entry-secondary:disabled { opacity: .58; cursor: wait; transform: none; }
.auth-mode-switch { display: block; width: 100%; margin-top: 10px; }
.auth-field-hint { margin: 5px 2px 0; color: #947f81; font-size: 12px; line-height: 1.5; }
.entry-link, .entry-back { display: block; border: 0; color: #a56771; background: transparent; font: inherit; cursor: pointer; }
.entry-link { margin: 15px auto 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.entry-back { margin: 22px auto 0; color: #8e7b7d; font-size: 13px; }
.entry-layer.is-login .entry-card { padding-top: 20px; padding-bottom: 16px; }
.entry-layer.is-login .entry-illustration { width: min(100%, 150px); margin-bottom: 4px; }
.entry-layer.is-login .login-heading { margin-bottom: 6px; }
.entry-layer.is-login .login-heading h2 { font-size: 28px; }
.entry-layer.is-login .login-heading p { margin-top: 4px; }
.entry-layer.is-login .login-form label { margin: 5px 0 2px; }
.entry-layer.is-login .login-form input { height: 36px; }
.entry-layer.is-login .login-submit { margin-top: 8px; min-height: 38px; }
.entry-layer.is-login .auth-mode-switch { min-height: 34px; margin-top: 6px; padding-top: 5px; padding-bottom: 5px; }
.entry-layer.is-login .entry-link { margin-top: 4px; }
.entry-layer.is-login .entry-back { margin-top: 6px; }
.entry-layer.is-login .login-form:not([hidden]) { animation: entry-content-in .3s ease both; }
/* Registration notices can exceed the usual 650px card. Grow into available
   space before scrolling; the shared max-height still protects the footer. */
.entry-layer.is-register .entry-card { height: auto; min-height: min(650px, calc(min(100dvh, var(--entry-viewport-height, 100dvh)) - 68px)); padding-top: 12px; padding-bottom: 12px; }
.entry-layer.is-register .entry-illustration { width: min(100%, 112px); margin-bottom: 0; }
.entry-layer.is-register .login-heading { margin-bottom: 3px; }
.entry-layer.is-register .login-form label { margin-top: 4px; }
.entry-layer.is-register .login-form input { height: 34px; }
.entry-layer.is-register .login-status { margin-top: 6px; }
.entry-layer.is-reset .entry-card { padding-top: 28px; padding-bottom: 24px; }
.entry-layer.is-reset .entry-illustration { width: min(100%, 138px); margin-bottom: 4px; }
.entry-layer:not(.is-login) .entry-welcome:not([hidden]) { animation: entry-content-in .3s ease both; }
@keyframes entry-content-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.app-sign-out { margin: 0 8px 0 0; color: #8e6f74; font-size: 13px; white-space: nowrap; }
.login-status { min-height: 22px; margin: 14px 0 0; color: #a45e69; font-size: 13px; line-height: 1.6; text-align: center; }
.login-status.is-info { color: #8b7071; }
/* Keep the welcome action inside the card on short visual viewports (for
   example 1280x577), while leaving the login form's spacing untouched. */
@media (max-height: 650px) {
  .entry-layer:not(.is-login) .entry-card { padding: 24px clamp(26px, 8vw, 72px); }
  .entry-layer:not(.is-login) .entry-illustration { width: min(100%, 200px); margin-bottom: 10px; }
  .entry-layer:not(.is-login) .entry-card h1 { top: -4px; font-size: 42px; }
  .entry-layer:not(.is-login) .entry-welcome { margin: 8px 0 16px; font-size: 14px; line-height: 1.6; }
}
.hand-drawn-divider { display: block; height: 0; margin: 14px 0; border: 0; border-top: 2px dashed rgba(101,183,188,.42); }
#brush-settings-dialog input[type="range"] { width: 100%; accent-color: #4f8797; }
#brush-size-preview { display: block; margin-top: 8px; color: #4f8797; font-weight: 600; }
@media (max-width: 560px) { .entry-layer { padding: 16px; } .entry-card { min-height: 0; padding: 36px 25px 32px; border-radius: 30px; } .entry-illustration { margin-bottom: 17px; } }

/* Whole-canvas backgrounds: isolated draft preview, then explicit month scope. */
.background-dialog { width: min(960px, calc(100vw - 32px)); box-sizing: border-box; padding: 26px; }
.background-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.background-heading h2 { margin: 0; font-size: 25px; letter-spacing: 2px; }
.background-heading .background-eyebrow { margin: 0 0 8px; color: #827c70; font-size: 12px; letter-spacing: 2px; }
.background-heading > button { width: 34px; height: 34px; padding: 0; font: 24px/1 sans-serif; background: transparent; }
.background-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, 1fr); gap: 26px; }
.background-preview-column { align-self: start; padding: 18px; border-radius: 14px; background: #eee9de; }
.background-preview { position: relative; width: 100%; aspect-ratio: 1400 / 991; overflow: hidden; background-color: #fff; background-position: center; background-repeat: no-repeat; box-shadow: 0 5px 20px #63564012; }
.background-preview > img { width: 100%; height: 100%; object-fit: contain; }
.background-preview > span { position: absolute; inset: 0; display: grid; place-items: center; color: #7c7468; font-size: 13px; }
.background-preview > [hidden] { display: none; }
.background-preview-column p { text-align: center; }
.background-preview-note { color: #837968; font-size: 11px; line-height: 1.8; }
.background-muted { color: #777165; font-size: 12px; line-height: 1.7; }
.background-source { display: flex; gap: 6px; margin: 0 0 18px; border: 0; padding: 0; }
.background-source legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.background-source label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 10px 5px; border: 1px solid #d6d0c3; border-radius: 9px; font-size: 12px; cursor: pointer; background: #fff; }
.background-source label:has(:checked) { background: #eaf0e9; border-color: #93a28f; color: #3d563f; }
.background-source input { width: auto; margin: 0; accent-color: #72876c; }
.background-controls h3 { margin: 0 0 8px; font-size: 14px; }
.background-badge { display: inline-block; padding: 3px 5px; border-radius: 4px; background: #eee9dd; color: #7e735f; font-size: 10px; font-weight: 400; }
.background-colors { display: grid; gap: 8px; margin: 17px 0 22px; }
.background-colors .background-color-row { display: grid; grid-template-columns: 1fr 32px 65px; gap: 8px; align-items: center; margin: 0; font-size: 12px; }
.background-colors input[type="color"] { width: 32px; height: 30px; padding: 2px; margin: 0; border: 1px solid #d6d0c3; border-radius: 6px; cursor: pointer; }
.background-colors output { color: #827c71; font: 11px/1 monospace; }
.background-photo-heading { display: flex; align-items: baseline; justify-content: space-between; }
.background-photo-heading button { border: 0; padding: 3px 0; background: transparent; color: #7e7467; font-size: 11px; }
.background-upload { width: 100%; padding: 13px 8px; border: 1px dashed #b9b3a7; border-radius: 9px; font-size: 12px; background: #fffdf9; }
#header-background-file-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.background-fit-label { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.background-fit-label select { flex: 1; min-width: 0; margin: 0; padding: 7px 6px; font-size: 11px; }
.background-official-card { border: 1px solid #dcd4c5; border-radius: 12px; padding: 18px; background: #fffdf8; margin: 10px 0; }
.background-official-card::before { content: attr(data-collection); display: block; margin-bottom: 14px; color: #8c8273; letter-spacing: 2px; font-size: 10px; }
.background-official-card p { font-size: 12px; color: #777165; line-height: 1.8; }
.background-official-card button { width: 100%; margin-top: 8px; padding: 9px; font-size: 12px; }
.background-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 18px; margin: 16px 0; color: #65765c; font-size: 12px; line-height: 1.7; }
.background-status progress { flex: 1; min-width: 80px; max-width: 220px; height: 8px; accent-color: #809577; }
.background-status button { font-size: 11px; padding: 5px 8px; }
.background-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 17px; border-top: 1px solid #ded8cc; }
.background-footer > span { color: #888072; font-size: 11px; }
.background-footer > button { background: #e8efdf; border-color: #aab89c; padding: 12px 20px; border-radius: 10px; font-size: 13px; }
.background-scope-dialog { width: min(510px, calc(100vw - 32px)); box-sizing: border-box; }
.background-scope-options { display: flex; gap: 12px; margin: 20px 0; }
.background-scope-options button { flex: 1; display: grid; gap: 8px; padding: 20px 10px; border: 1px solid #b3c0a6; border-radius: 12px; background: #f4f7ed; }
.background-scope-options span { color: #7c7e6b; font-size: 12px; }
.background-dialog input:focus-visible, .background-dialog button:focus-visible, .background-scope-dialog button:focus-visible { outline: 3px solid #7193a3; outline-offset: 3px; }
.calendar-background-status { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); padding: 10px 14px; border: 1px solid #d8c7a7; border-radius: 10px; background: #fffaf0; color: #7f6441; font: 16px/1.6 "LXGWMarkerGothic", sans-serif; }
.calendar-background-status[hidden] { display: none; }
.calendar-background-status button { margin-left: 12px; }
@media (max-width: 700px) {
  .background-dialog { padding: 18px; max-height: calc(100dvh - 24px); }
  .background-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .background-heading { margin-bottom: 16px; }
  .background-preview-column { padding: 12px; }
  .background-preview { max-width: 370px; margin: 0 auto; }
  .background-preview-note { margin-bottom: 0; }
  .background-footer { align-items: stretch; flex-direction: column; }
  .background-footer > button { width: 100%; }
}