/* Loaded after the legacy stylesheet so the focused interaction redesign wins the cascade. */
body.modal-open { overflow: hidden; }

/* Recipe editor */
.recipe-dialog { width: min(76vw, 1080px); height: min(82vh, 820px); max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); padding: 0; overflow: visible; border: 0; background: transparent; }
.recipe-dialog::backdrop { background: rgba(27, 40, 35, .46); backdrop-filter: blur(3px); }
.recipe-modal-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; gap: 0; overflow: hidden; padding: 0; border: 1px solid #d8e2d8; border-radius: 8px; background: #fbfcf8; box-shadow: 0 24px 60px rgba(12, 30, 23, .2); }
.recipe-modal-card .modal-header { flex: 0 0 auto; padding: 21px 25px 16px; border-bottom: 1px solid #e4e9e2; }
.recipe-modal-card .modal-header h3 { margin-bottom: 2px; }
.recipe-draft-status { min-height: 16px; color: #89988e; font-size: 11px; font-weight: 400; }
.recipe-form-body { container: recipe-body / inline-size; flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 19px 25px 23px; scrollbar-color: #b6c7b9 transparent; }
.recipe-form-body textarea { min-height: 88px; resize: vertical; }
.recipe-modal-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; min-height: 69px; margin: 0; padding: 13px 25px; border-top: 1px solid #e1e8e1; background: rgba(247, 250, 245, .96); }
.recipe-modal-actions > span { flex: 1 1 auto; min-width: 12px; }
.recipe-modal-actions button { white-space: nowrap; }
.modal-resize-handle { position: absolute; right: 7px; bottom: 7px; z-index: 3; width: 15px; height: 15px; border-right: 1px solid #92aa98; border-bottom: 1px solid #92aa98; opacity: .62; cursor: nwse-resize; transition: opacity .16s ease, border-color .16s ease; }
.modal-resize-handle::before, .modal-resize-handle::after { content: ""; position: absolute; right: 2px; bottom: 3px; width: 9px; border-top: 1px solid currentColor; transform: rotate(-45deg); transform-origin: right center; }
.modal-resize-handle::after { right: 0; bottom: 7px; width: 6px; }
.modal-resize-handle:hover, .modal-resize-handle.is-dragging { color: #46745a; border-color: #46745a; opacity: 1; }
@container recipe-body (max-width: 690px) { .recipe-form-body .form-grid { grid-template-columns: 1fr; } }

/* Couple time header */
.calendar-stats { grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr); gap: 18px; align-items: stretch; margin: 16px 0 18px; }
.calendar-memory-hero { position: relative; display: flex; flex-direction: column; min-height: 207px; overflow: hidden; padding: 19px 22px 17px; border: 1px solid #d6e1d7; border-radius: 7px; background: #f8fbf6; }
.calendar-memory-hero::after { content: ""; position: absolute; right: -34px; bottom: -50px; width: 170px; height: 170px; border: 1px solid rgba(153, 134, 87, .17); border-radius: 50%; box-shadow: 0 0 0 16px rgba(153, 134, 87, .035), 0 0 0 33px rgba(153, 134, 87, .025); pointer-events: none; }
.calendar-memory-hero-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; color: #9b8b69; font: 10px "DM Mono", monospace; letter-spacing: .08em; }
.calendar-memory-hero-top span:last-child { color: #8b9a90; letter-spacing: .02em; }
.calendar-stat-label { color: #6f8376; font-size: 12px; letter-spacing: .13em; }
.calendar-relationship-count { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 7px; margin-top: 3px; color: #315c48; font: 500 55px/.98 "DM Mono", monospace; letter-spacing: -.08em; }
.calendar-relationship-count small { color: #7a8e81; font: 13px "Source Han Sans SC", sans-serif; letter-spacing: 0; }
.calendar-memory-duration { position: relative; z-index: 1; margin: 9px 0 0; color: #536c5c; font: 15px "Noto Serif SC", serif; }
.calendar-memory-meta { display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: auto; color: #89988e; font-size: 10px; line-height: 1.5; }
.calendar-memory-progress { position: relative; z-index: 1; height: 2px; margin: 12px 0 8px; overflow: hidden; background: #dbe7dc; }
.calendar-memory-progress span { display: block; height: 100%; background: #8aaa91; transition: width .35s ease; }
.calendar-memory-copy { position: relative; z-index: 1; margin: 0; color: #9a8157; font-size: 11px; line-height: 1.6; }
.calendar-memory-list { display: grid; align-content: stretch; min-width: 0; border-top: 1px solid #dbe5dc; border-bottom: 1px solid #dbe5dc; }
.calendar-memory-item { display: grid; grid-template-columns: minmax(0, 1fr) 29px; gap: 12px; align-items: center; min-width: 0; padding: 10px 5px 10px 17px; border-bottom: 1px solid #e5ebe5; }
.calendar-memory-item:last-child { border-bottom: 0; }
.calendar-memory-item.is-featured { background: rgba(239, 247, 239, .62); }
.calendar-memory-item div { display: grid; min-width: 0; gap: 4px; }
.calendar-memory-item span { color: #89978e; font-size: 10px; letter-spacing: .08em; }
.calendar-memory-item strong { overflow: hidden; color: #456552; font: 600 16px/1.3 "Noto Serif SC", serif; text-overflow: ellipsis; white-space: nowrap; }
.calendar-memory-item small { overflow: hidden; color: #8c998f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-memory-item em { color: #b59c68; font: 11px "DM Mono", monospace; font-style: normal; text-align: right; }

/* Compact archival month view */
.calendar-toolbar { margin-bottom: 12px; }
.calendar-nav { gap: 6px; }
.calendar-nav strong { min-width: 112px; font-size: 16px; }
.calendar-nav .calendar-today-button { padding: 3px 4px; color: #7d8f83; font-size: 11px; }
.calendar-month-view { padding: 0; border: 0; background: transparent; }
.calendar-month-caption { margin: 0 2px 9px; }
.calendar-month-caption strong { font-size: 20px; }
.calendar-month-caption span, .calendar-month-caption small { font-size: 10px; }
.calendar-grid { gap: 1px; overflow: hidden; border: 0; border-radius: 5px; background: #e4ebe4; }
.calendar-cell { min-height: 91px; padding: 7px 7px 5px; border: 0; background: #fffefa; }
.calendar-cell:hover { background: #f7fbf5; box-shadow: inset 0 0 0 1px #b5cbb8; }
.calendar-cell.is-weekend { background: #fcfbf7; }
.calendar-cell.is-today { background: #fffef8; box-shadow: inset 0 0 0 1px #a08659, inset 0 0 0 3px rgba(160, 134, 89, .1); }
.calendar-cell.muted-day { min-height: 91px; background: #f8faf6; }
.calendar-date-button { gap: 5px; }
.calendar-date-button strong { color: #405d4d; font-size: 16px; font-weight: 500; }
.calendar-date-button small { color: #a18f69; font-size: 9px; }
.calendar-day-notes { min-height: 0; margin-top: 4px; }
.calendar-day-notes:empty { display: none; }
.calendar-day-note { font-size: 9px; }
.calendar-event-stack { gap: 2px; margin-top: 5px; }
.calendar-event { min-height: 19px; padding: 3px 4px; border-left-width: 2px; font-size: 9px; }
.calendar-event i { width: 4px; height: 4px; }
.calendar-more { padding: 1px 2px; border: 0; color: #a18758; background: transparent; font-size: 9px; text-align: left; cursor: pointer; }
.calendar-more:hover { color: #557861; }
.calendar-rest-badge { position: absolute; top: 6px; right: 6px; color: #a16f55; font: 9px "DM Mono", monospace; font-style: normal; }
.calendar-rest-badge.is-work { color: #8b8b72; }
.calendar-countdown-inline { display: inline-flex; align-items: baseline; gap: 3px; margin-left: 7px; color: #8e7956; font-style: normal; }
.calendar-countdown-lead { color: #8e978e; font-size: 10px; font-weight: 400; }
.calendar-countdown-number { color: #9b713b; font: 600 15px/1.1 "DM Mono", monospace; letter-spacing: -.03em; }
.calendar-memory-item small .calendar-countdown-number, .calendar-memory-copy .calendar-countdown-number { font-size: 14px; }
.calendar-memory-birthdays { margin: 0 5px 0 17px; padding: 11px 0 10px; border-top: 1px solid #e5ebe5; }
.calendar-memory-birthdays-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 7px; }
.calendar-memory-birthdays-head span { color: #7f8f84; font-size: 10px; letter-spacing: .08em; }
.calendar-memory-birthdays-head small { color: #a18d68; font-size: 9px; }
.calendar-memory-birthdays article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 9px; align-items: baseline; padding: 5px 0; }
.calendar-memory-birthdays article + article { border-top: 1px dotted #e2e9e2; }
.calendar-memory-birthdays article strong { color: #536c5d; font: 500 13px "Noto Serif SC", serif; }
.calendar-memory-birthdays article > span { grid-column: 2; grid-row: 1; }
.calendar-memory-birthdays article small { grid-column: 1 / -1; color: #9a9b8c; font-size: 10px; }
.calendar-memory-birthdays .calendar-countdown-number { font-size: 13px; }
.calendar-memory-birthdays > p { margin: 0; color: #929d95; font-size: 10px; line-height: 1.6; }

/* Date details read like a quiet side drawer instead of a centered admin dialog. */
#calendar-day-dialog { width: min(470px, calc(100vw - 18px)); height: 100vh; max-width: min(470px, calc(100vw - 18px)); max-height: 100vh; margin: 0 0 0 auto; padding: 0; overflow: visible; }
#calendar-day-dialog::backdrop { background: rgba(27, 40, 35, .28); backdrop-filter: blur(2px); }
#calendar-day-dialog .calendar-day-dialog-card { width: 100%; min-height: 100vh; max-height: 100vh; overflow-y: auto; border-radius: 10px 0 0 10px; box-shadow: -14px 0 38px rgba(12, 30, 23, .12); }
.calendar-month-view { position: relative; padding: 14px 15px 15px; border: 1px solid #d9e2d9; border-radius: 9px; background: linear-gradient(135deg, rgba(255, 255, 251, .96), rgba(247, 249, 242, .93)); box-shadow: 0 8px 22px rgba(45, 62, 51, .055), inset 0 0 0 1px rgba(255, 255, 255, .72); }
.calendar-month-view::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(171, 157, 121, .13); border-radius: 5px; pointer-events: none; }
.calendar-view, #calendar-view { width: 100%; max-width: 1480px; margin-inline: auto; box-sizing: border-box; }
.calendar-month-caption { position: relative; z-index: 1; padding: 0 2px 9px; border-bottom: 1px solid #e0e7df; }
.calendar-month-caption strong { font-size: 21px; }
.calendar-grid { position: relative; z-index: 1; gap: 1px; padding: 1px; border: 1px solid #d8e3d9; border-radius: 5px; background: #d8e3d9; box-shadow: 0 2px 6px rgba(55, 72, 60, .04); }
.calendar-weekdays { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 31px; padding: 0 2px 7px; color: #536d5d; font: 600 13px/1.3 "Source Han Sans SC", sans-serif; letter-spacing: .08em; text-align: center; }
.calendar-weekdays span { display: grid; place-items: center; }
.calendar-weekdays span:nth-child(6), .calendar-weekdays span:nth-child(7) { color: #a4664f; }
.calendar-cell { min-height: 86px; padding: 6px 6px 5px; }
.calendar-cell.muted-day { min-height: 86px; background: rgba(247, 249, 243, .78); }
.calendar-date-button strong { font-size: 17px; }
.calendar-date-button small { color: #968661; font-size: 10px; }
.calendar-cell.is-weekend { background: #fcf8f0; }
.calendar-cell.is-weekend .calendar-date-button strong { color: #966e59; }
.calendar-cell.is-today { background: #fffdf4; box-shadow: inset 0 0 0 1px #ad8b58, inset 0 0 0 3px rgba(173, 139, 88, .12); }
.calendar-cell.is-today .calendar-date-button strong { color: #805d35; }
.calendar-day-note { color: #c27b3d; font-size: 12px; font-weight: 700; line-height: 1.25; }
.calendar-day-note.note-term { color: #b86f32; }
.calendar-day-note.note-festival, .calendar-day-note.note-couple-festival { color: #b55643; }
.calendar-day-note.note-holiday { color: #a4672d; }
.calendar-day-note.note-workday { color: #8a8e76; }
.calendar-event { min-height: 23px; padding: 3px 5px; font-size: 11px; }
.calendar-event span { font-weight: 600; }
.calendar-more { font-size: 10px; font-weight: 600; }
.calendar-event.event-anniversary, .calendar-event.event-first_meet, .calendar-event.event-first_date { border-left-color: #5d8b6d; color: #315e48; background: #eaf5ec; }
.calendar-event.event-couple-festival, .calendar-event.event-festival { border-left-color: #d06b50; color: #a04f3b; background: #fff0e9; }
.calendar-event.event-holiday, .calendar-event.event-workday, .calendar-event.is-system { border-left-color: #cc9346; color: #975d2e; background: #fff5dc; }
.calendar-event.event-birthday { border-left-color: #aa8255; color: #7c6546; background: #fbf4e5; }
.calendar-rest-badge { padding: 1px 3px; border: 1px solid rgba(163, 111, 85, .35); border-radius: 2px; background: rgba(255, 249, 239, .75); }
.calendar-rest-badge.is-work { border-color: rgba(139, 139, 114, .3); background: rgba(246, 247, 236, .78); }
.calendar-countdown-number { color: #d35f38; font-size: 18px; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.calendar-countdown-inline .calendar-countdown-number { font-size: 16px; }
.calendar-memory-item small .calendar-countdown-number, .calendar-memory-copy .calendar-countdown-number { font-size: 17px; }
.calendar-stats strong.calendar-countdown-number { color: #d35f38; font-size: 18px; font-weight: 800; }
.calendar-birthday-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calendar-birthday-field { display: grid; gap: 8px; min-width: 0; padding: 11px 12px; border: 1px solid #dfe7df; border-radius: 5px; background: #fbfcf8; }
.calendar-birthday-field > strong { color: #4c6958; font: 600 14px "Noto Serif SC", serif; }
.calendar-birthday-type { display: flex; gap: 13px; color: #7d8d82; font-size: 11px; }
.calendar-birthday-type label { display: inline-flex; align-items: center; gap: 4px; }
.calendar-birthday-type input { accent-color: #6e987b; }
.calendar-birthday-lunar { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.calendar-birthday-lunar[hidden] { display: none; }
.calendar-birthday-lunar .checkbox-line { min-height: 34px; white-space: nowrap; }

@media (max-width: 980px) and (min-width: 721px) {
  .calendar-stats { grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr); gap: 12px; }
  .calendar-memory-hero { padding-inline: 17px; }
  .calendar-memory-item { padding-left: 13px; }
  .calendar-cell { min-height: 82px; padding-inline: 5px; }
  .calendar-cell, .calendar-cell.muted-day { min-height: 75px; }
  .calendar-weekdays { min-height: 29px; padding-bottom: 6px; font-size: 12px; }
  .calendar-day-note { font-size: 10px; }
  .calendar-event { min-height: 20px; font-size: 9px; }
  .calendar-more { font-size: 9px; }
  .calendar-memory-birthdays { margin-left: 13px; }
}
@media (max-width: 720px) {
  .recipe-dialog { inset: auto 0 0; width: 100%; max-width: 100%; height: min(94vh, 760px); max-height: 94dvh; margin: 0; border-radius: 14px 14px 0 0; }
  .recipe-modal-card { border-radius: 14px 14px 0 0; }
  .recipe-modal-card .modal-header { padding: 17px 18px 13px; }
  .recipe-form-body { padding: 16px 18px 19px; }
  .recipe-modal-actions { min-height: 63px; padding: 11px 18px; }
  .recipe-modal-actions .outline-button:first-child { margin-right: auto; }
  .modal-resize-handle { display: none; }
  .calendar-stats { grid-template-columns: 1fr; gap: 12px; margin-top: 13px; }
  .calendar-memory-hero { min-height: 185px; padding: 17px 18px 15px; }
  .calendar-relationship-count { font-size: 47px; }
  .calendar-memory-item { padding-block: 9px; }
  .calendar-toolbar { align-items: stretch; }
  .calendar-toolbar .segmented-control { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .calendar-toolbar .segment { flex: 0 0 auto; }
  .calendar-nav { width: 100%; justify-content: space-between; }
  .calendar-nav strong { flex: 1; min-width: 0; }
  .calendar-nav .calendar-today-button { margin-inline: auto; }
  .calendar-month-caption small { display: none; }
  .calendar-cell, .calendar-cell.muted-day { min-height: 72px; padding: 5px 4px 4px; }
  .calendar-month-view { padding: 11px 9px 10px; }
  .calendar-cell, .calendar-cell.muted-day { min-height: 68px; }
  .calendar-date-button { display: grid; gap: 1px; }
  .calendar-date-button strong { font-size: 14px; }
  .calendar-date-button small { font-size: 8px; }
  .calendar-day-note { font-size: 8px; }
  .calendar-event { min-height: 16px; padding: 2px; font-size: 8px; }
  .calendar-event i { width: 3px; height: 3px; }
  .calendar-rest-badge { top: 4px; right: 4px; font-size: 8px; }
  .calendar-weekdays { min-height: 27px; padding: 0 1px 5px; font-size: 11px; letter-spacing: .03em; }
  .calendar-day-note { font-size: 9px; }
  .calendar-event { min-height: 18px; font-size: 9px; }
  .calendar-more { font-size: 9px; }
  .calendar-birthday-grid { grid-template-columns: 1fr; }
  .calendar-memory-birthdays { margin-left: 0; }
  #calendar-day-dialog { inset: auto 0 0; width: 100%; height: min(88vh, 760px); max-width: 100%; max-height: 88dvh; margin: 0; }
  #calendar-day-dialog .calendar-day-dialog-card { min-height: 100%; max-height: 100%; border-radius: 14px 14px 0 0; }
}

/* Read-only guest pass: keep the shared archive calm and remove owner actions. */
.guest-dialog-card { width: min(520px, calc(100vw - 32px)); }
.guest-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guest-result { margin-top: 18px; padding: 14px; border: 1px solid rgba(73, 94, 80, .18); background: rgba(249, 246, 237, .78); }
.guest-result input { font-family: "DM Mono", monospace; font-size: 12px; }
.guest-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted, #7b8176); font-size: 12px; }
.guest-mode .topbar-actions #share-button,
.guest-mode .topbar-actions #upload-button,
.guest-mode [data-view="profiles"],
.guest-mode [data-view="vault"],
.guest-mode [data-view="settings"],
.guest-mode .gallery-actions,
.guest-mode .diary-toolbar-tools,
.guest-mode #new-diary-button,
.guest-mode .travel-hero-actions,
.guest-mode .plan-actions,
.guest-mode .menu-toolbar,
.guest-mode .calendar-actions,
.guest-mode [data-edit-travel],
.guest-mode [data-delete-travel],
.guest-mode [data-edit-recipe],
.guest-mode [data-delete-recipe],
.guest-mode [data-edit-diary],
.guest-mode [data-delete-diary],
.guest-mode [data-edit-event],
.guest-mode [data-delete-event] { display: none !important; }
.guest-mode .shared-status::after { content: " · 只读访客"; color: #9c744c; }

@media (max-width: 720px) {
  .guest-options-grid { grid-template-columns: 1fr; }
  .guest-result-actions { align-items: flex-start; flex-direction: column; }
}

/* Diary editor media and emoji library. */
#diary-dialog .diary-content-editor { overflow-x: hidden; overflow-y: auto; }
#diary-dialog .diary-content-editor.is-drop-target { outline: 2px dashed #c58a3c; outline-offset: -7px; background: #fff9ed; }
#diary-dialog .diary-content-editor img { max-width: 100%; height: auto; object-fit: contain; cursor: pointer; }
#diary-dialog .diary-content-editor .diary-inline-sticker { display: inline-block; width: auto; max-width: 150px; max-height: 150px; margin: 3px 5px; vertical-align: middle; box-shadow: none; }
#diary-dialog .editor-toolbar-last { gap: 4px; }
#diary-dialog .editor-toolbar-last button#diary-image-button { color: #b77842; font-size: 20px; line-height: 1; }
#diary-dialog .diary-emoji-panel { display: block; max-height: 280px; overflow: hidden; padding: 9px 10px 8px; }
#diary-dialog .diary-emoji-panel[hidden] { display: none; }
#diary-dialog .diary-emoji-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#diary-dialog .diary-emoji-tools input[type="search"] { flex: 1; min-width: 0; min-height: 32px; padding: 6px 9px; border: 1px solid #d8e1d7; border-radius: 4px; background: #fff; }
#diary-dialog .diary-sticker-import { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 9px; border: 1px solid #d5c6a6; border-radius: 4px; color: #8b6e38; background: #fffaf0; font-size: 11px; cursor: pointer; white-space: nowrap; }
#diary-dialog .diary-sticker-import input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#diary-dialog .diary-emoji-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
#diary-dialog .diary-emoji-tabs button { flex: 0 0 auto; padding: 5px 8px; border: 0; border-bottom: 2px solid transparent; color: #7b8b82; background: transparent; font-size: 11px; cursor: pointer; }
#diary-dialog .diary-emoji-tabs button.active { border-bottom-color: #b97849; color: #7d5931; background: #fff7e5; }
#diary-dialog .diary-emoji-grid { display: grid; grid-template-columns: repeat(12, minmax(30px, 1fr)); gap: 3px; max-height: 166px; overflow-y: auto; padding: 2px 1px; }
#diary-dialog .diary-emoji-option { position: relative; min-height: 32px; padding: 3px; border: 0; border-radius: 4px; background: transparent; font-size: 22px; cursor: pointer; }
#diary-dialog .diary-emoji-option:hover, #diary-dialog .diary-emoji-option:focus-visible { background: #f4e8c8; }
#diary-dialog .diary-emoji-option > span { position: absolute; right: 0; bottom: 0; color: #b97849; font: 9px sans-serif; }
#diary-dialog .diary-sticker-option { position: relative; min-width: 0; }
#diary-dialog .diary-sticker-option > button:first-child { display: grid; place-items: center; width: 100%; min-height: 54px; padding: 4px; border: 1px solid #e0e6dd; border-radius: 5px; background: #fff; cursor: pointer; }
#diary-dialog .diary-sticker-option img { width: 48px; height: 48px; object-fit: contain; }
#diary-dialog .diary-sticker-delete { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; padding: 0; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #a97365; font-size: 12px; cursor: pointer; }
#diary-dialog .diary-emoji-empty, #diary-dialog .diary-emoji-footer { grid-column: 1 / -1; margin: 8px 0; color: #8a978f; font-size: 11px; line-height: 1.6; }
#diary-dialog .diary-emoji-footer { margin: 7px 0 0; padding-top: 6px; border-top: 1px solid #edf0e9; }
#diary-dialog .diary-upload-status { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-top: 1px solid #eadfca; color: #8b6e38; background: #fff9eb; font-size: 11px; }
#diary-dialog .diary-upload-status button { margin-left: auto; padding: 3px 7px; border: 1px solid #d4b779; border-radius: 3px; color: #795d2c; background: transparent; cursor: pointer; }
#diary-dialog .diary-photo-missing { display: grid; place-items: center; height: 92px; color: #9a7566; background: #fbf1ec; font-size: 10px; }
#diary-dialog .diary-selected-photo-tools button[data-diary-photo-insert] { border-color: #d5c28b; color: #8b6e38; background: #fff9e9; }
@media (max-width: 720px) {
  #diary-dialog .diary-emoji-grid { grid-template-columns: repeat(8, minmax(30px, 1fr)); }
  #diary-dialog .diary-emoji-panel { max-height: 245px; }
}

/* Diary image nodes, crop workspace and draft exit flow. */
#diary-dialog .diary-content-editor img.is-selected {
  outline: 2px solid #bd7a42;
  outline-offset: 4px;
  box-shadow: 0 0 0 1px rgba(255, 250, 237, .95), 0 5px 16px rgba(63, 67, 55, .12);
}
#diary-dialog .diary-content-editor img[data-align="center"],
#diary-dialog .diary-content-editor img[data-align="block"] { display: block; margin-left: auto; margin-right: auto; }
#diary-dialog .diary-content-editor img[data-align="right"] { display: block; margin-left: auto; margin-right: 0; }
#diary-dialog .diary-content-editor img[data-align="left"] { display: block; margin-left: 0; margin-right: auto; }
#diary-dialog .diary-image-tools {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 7px;
  max-width: min(560px, calc(100% - 24px));
  padding: 8px 10px;
  border: 1px solid #d7c7a8;
  background: rgba(255, 252, 244, .97);
  box-shadow: 0 7px 18px rgba(52, 63, 54, .13);
  font-size: 11px;
}
#diary-dialog .diary-image-tools[hidden],
#diary-dialog .diary-image-overlay[hidden] { display: none; }
#diary-dialog .diary-image-tools-title { color: #657263; font: 600 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
#diary-dialog .diary-image-tool-row { display: flex; flex-wrap: wrap; gap: 4px; }
#diary-dialog .diary-image-tool-row button {
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #ded5c2;
  border-radius: 3px;
  color: #45574b;
  background: #fffdf8;
  cursor: pointer;
}
#diary-dialog .diary-image-tool-row button:hover,
#diary-dialog .diary-image-tool-row button:focus-visible { border-color: #ba7e4b; color: #8e5a2f; background: #fff3d7; }
#diary-dialog .diary-image-ratio-toggle { display: flex; align-items: center; gap: 5px; color: #69766b; }
#diary-dialog .diary-image-caption { min-width: 180px; max-width: 100%; padding: 5px 7px; border: 1px solid #ded5c2; color: #4d5e51; background: #fffdf8; font-size: 11px; }
#diary-dialog .diary-image-scale { width: min(220px, 100%); accent-color: #b97849; }
#diary-dialog .diary-image-overlay { position: absolute; z-index: 7; pointer-events: none; border: 1px dashed #b97849; }
#diary-dialog .diary-image-handle { position: absolute; width: 10px; height: 10px; padding: 0; border: 1px solid #fff; background: #b97849; pointer-events: auto; cursor: nwse-resize; }
#diary-dialog .diary-image-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
#diary-dialog .diary-image-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
#diary-dialog .diary-image-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
#diary-dialog .diary-image-handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
#diary-dialog .diary-editor-shell { position: relative; overflow-x: hidden; }
#diary-dialog .diary-clear-draft { margin-left: 8px; padding: 0; color: #9a765d; font-size: 11px; vertical-align: middle; }
#diary-dialog .diary-draft-confirm-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 9px; padding-top: 18px; }
#diary-crop-dialog { z-index: 120; }
#diary-crop-dialog .diary-crop-card { display: grid; gap: 13px; min-width: min(760px, calc(100vw - 28px)); }
#diary-crop-dialog .diary-crop-stage { display: grid; place-items: center; min-height: 260px; padding: 10px; background: #e8e0d2; overflow: hidden; }
#diary-crop-dialog #diary-crop-canvas { display: block; width: 100%; max-height: 52vh; object-fit: contain; cursor: move; }
#diary-crop-dialog .diary-crop-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
#diary-crop-dialog .diary-crop-controls label { display: inline-flex; align-items: center; gap: 5px; color: #667066; font-size: 11px; }
#diary-crop-dialog .diary-crop-controls button,
#diary-crop-dialog .diary-crop-controls select { min-height: 29px; padding: 4px 8px; border: 1px solid #d7cbb7; border-radius: 3px; color: #536456; background: #fffdf7; }
#diary-crop-dialog .diary-crop-controls input[type="range"] { width: 130px; accent-color: #b97849; }
@media (max-width: 720px) {
  #diary-dialog .diary-image-overlay { display: none; }
  #diary-dialog .diary-image-tools { position: sticky; right: auto; bottom: auto; margin: 8px 0; max-width: 100%; }
  #diary-dialog .diary-image-tool-row { overflow-x: auto; flex-wrap: nowrap; }
  #diary-dialog .diary-image-scale { display: block; width: 100%; }
  #diary-dialog .diary-image-caption { min-width: 0; width: 100%; }
  #diary-crop-dialog .diary-crop-card { min-width: 0; }
  #diary-crop-dialog .diary-crop-stage { min-height: 210px; }
  #diary-crop-dialog .diary-crop-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #diary-crop-dialog .diary-crop-controls label,
  #diary-crop-dialog .diary-crop-controls button { min-width: 0; }
  #diary-dialog .diary-draft-confirm-actions { display: grid; grid-template-columns: 1fr; }
}

/* Compact diary image toolbar: keep the editing surface visible and the controls close at hand. */
#diary-dialog .diary-image-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 4px;
  width: max-content;
  max-width: min(760px, calc(100% - 18px));
  padding: 5px 6px;
  border: 1px solid rgba(183, 120, 73, .42);
  border-radius: 6px;
  background: rgba(255, 253, 247, .98);
  box-shadow: 0 5px 14px rgba(52, 63, 54, .12);
}
#diary-dialog .diary-image-tools-title { display: none; }
#diary-dialog .diary-image-tool-row { display: contents; }
#diary-dialog .diary-image-tool-row button {
  min-height: 23px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.2;
}
#diary-dialog .diary-image-ratio-toggle {
  min-height: 23px;
  padding: 2px 5px;
  border: 1px solid #ded5c2;
  border-radius: 3px;
  background: #faf7ee;
  color: #59675b;
  font-size: 10px;
  white-space: nowrap;
}
#diary-dialog .diary-image-ratio-toggle input { width: 12px; height: 12px; margin: 0; accent-color: #b97849; }
#diary-dialog .diary-image-caption {
  width: 126px;
  min-width: 108px;
  min-height: 23px;
  height: 23px;
  box-sizing: border-box;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
}
#diary-dialog .diary-image-scale { width: 116px; max-width: 116px; height: 23px; margin: 0 2px; }
#diary-dialog .diary-content-editor img.is-selected { outline-width: 1px; outline-offset: 3px; }
#diary-dialog .diary-selected-photo.is-cover { border-color: #b97849; box-shadow: 0 0 0 2px rgba(185, 120, 73, .16); }
#diary-dialog .diary-cover-toggle.is-active { color: #8f5d2e; border-color: #c38b54; background: #fff0d2; }

/* The draft decision is deliberately smaller than the editor it protects. */
#diary-draft-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  min-width: 0;
  max-width: calc(100vw - 32px);
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
#diary-draft-confirm-dialog .diary-draft-confirm-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 20px 22px 16px;
  border: 1px solid #dfd3bd;
  border-radius: 9px;
  background: #fffdf8;
  box-shadow: 0 18px 50px rgba(45, 57, 47, .2);
}
#diary-draft-confirm-dialog .modal-header { padding: 0 0 10px; border: 0; }
#diary-draft-confirm-dialog .modal-header h3 { margin: 0 0 5px; font-size: 19px; }
#diary-draft-confirm-dialog .modal-header small { color: #70786e; font-size: 12px; line-height: 1.6; }
#diary-draft-confirm-dialog .diary-draft-confirm-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid #eee6d8;
}
#diary-draft-confirm-dialog .diary-draft-confirm-actions button { min-height: 30px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }

/* Recipe cards open from their whole surface; action controls remain delegated independently. */
#menu-view .recipe-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
#menu-view .recipe-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(71, 63, 48, .1); border-color: #d9b88f; }
#menu-view .recipe-cover { cursor: pointer; }
#recipe-detail-dialog {
  width: min(760px, calc(100vw - 28px));
  min-width: 0;
  max-width: calc(100vw - 28px);
  height: min(760px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 0;
  background: transparent;
}
#recipe-detail-dialog .recipe-detail-card { box-sizing: border-box; min-height: 100%; padding: 22px 24px 18px; overflow: auto; }
#recipe-detail-dialog .recipe-detail-layout { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
#recipe-detail-dialog .recipe-detail-cover img { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 5px; }
#recipe-detail-dialog .recipe-detail-summary { margin: 0 0 13px; color: #526257; line-height: 1.75; }
#recipe-detail-dialog .recipe-detail-copy section { padding-top: 10px; border-top: 1px solid #ece4d5; }
#recipe-detail-dialog .recipe-detail-copy h4 { margin: 0 0 5px; color: #8d633b; font-size: 12px; }
#recipe-detail-dialog .recipe-detail-copy p { margin: 0 0 10px; color: #576257; line-height: 1.75; white-space: normal; }
#recipe-detail-dialog .recipe-detail-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
#recipe-detail-dialog .recipe-detail-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
#recipe-detail-dialog .modal-actions { position: sticky; bottom: -1px; margin-top: 15px; padding-top: 12px; background: linear-gradient(to bottom, rgba(255, 253, 248, .65), #fffdf8 14px); }

@media (max-width: 720px) {
  #diary-dialog .diary-image-tools { position: sticky; right: auto; bottom: auto; display: flex; width: 100%; max-width: 100%; margin: 7px 0; }
  #diary-dialog .diary-image-tool-row { display: contents; overflow: visible; flex-wrap: wrap; }
  #diary-dialog .diary-image-caption { width: 100%; min-width: 0; }
  #diary-dialog .diary-image-scale { width: 100%; max-width: none; }
  #diary-draft-confirm-dialog { width: calc(100vw - 28px); max-width: calc(100vw - 28px); }
  #diary-draft-confirm-dialog .diary-draft-confirm-actions { grid-template-columns: 1fr; }
  #diary-draft-confirm-dialog .diary-draft-confirm-actions button { width: 100%; }
  #recipe-detail-dialog { width: calc(100vw - 14px); max-width: calc(100vw - 14px); height: calc(100dvh - 14px); max-height: calc(100dvh - 14px); margin: 0 7px; }
  #recipe-detail-dialog .recipe-detail-card { padding: 16px; }
  #recipe-detail-dialog .recipe-detail-layout { grid-template-columns: 1fr; }
}

/* Travel notebook rebuild — scoped to #travel-view so the other archive sections keep
   their existing visual language and layout. */
#travel-view {
  --travel-ink: #213d47;
  --travel-muted: #72817e;
  --travel-paper: #fbfaf5;
  --travel-paper-deep: #f1eee4;
  --travel-line: #d8d5c7;
  --travel-accent: #4f8994;
  --travel-warm: #cf7f48;
  --travel-shadow: 0 16px 34px rgba(57, 71, 63, .08);
}
#travel-view .travel-section-heading,
#travel-view .travel-toolbar,
#travel-view .travel-hero,
#travel-view .travel-book-layout,
#travel-view .travel-info-modules,
#travel-view .travel-plan-library { width: 100%; }
#travel-view .travel-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
#travel-view .travel-section-heading h3 { margin: 4px 0 8px; color: var(--travel-ink); font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(30px, 3.2vw, 47px); letter-spacing: .03em; }
#travel-view .travel-section-heading p:not(.eyebrow) { max-width: 590px; margin: 0; color: var(--travel-muted); line-height: 1.8; }
#travel-view .travel-heading-actions { display: grid; justify-items: end; gap: 10px; }
#travel-view .travel-sync-mark,
#travel-view .travel-toolbar-index { color: var(--travel-muted); font: 10px "DM Mono", monospace; letter-spacing: .08em; }
#travel-view .travel-toolbar-index { display: flex; align-items: baseline; gap: 10px; }
#travel-view .travel-toolbar-index strong { color: var(--travel-ink); font: 600 13px "Source Han Sans SC", sans-serif; letter-spacing: 0; }
#travel-view .travel-archive-toolbar { align-items: center; justify-content: space-between; padding: 11px 0 14px; border-bottom: 1px solid var(--travel-line); margin-bottom: 18px; }
#travel-view .travel-archive-toolbar .segmented-control { background: #f2f0e8; border: 1px solid #dfdccf; }
#travel-view .travel-archive-toolbar .segment { color: #6c7772; }
#travel-view .travel-archive-toolbar .segment.active { color: var(--travel-ink); background: #fffdf7; box-shadow: 0 3px 10px rgba(63, 75, 68, .08); }
#travel-view .travel-hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 205px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--travel-theme) 45%, #d8d5c7); border-radius: 5px; background: var(--travel-paper); box-shadow: var(--travel-shadow); isolation: isolate; }
#travel-view .travel-hero-card::before { position: absolute; inset: 0; z-index: -1; content: ""; opacity: .72; background: radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--travel-theme) 13%, transparent), transparent 28%), linear-gradient(115deg, rgba(255,255,255,.7), transparent 58%); }
#travel-view .travel-hero-cover { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 34%; height: 100%; object-fit: cover; opacity: .2; mask-image: linear-gradient(90deg, transparent, #000 35%); }
#travel-view .travel-hero-copy { padding: 26px 30px 24px; }
#travel-view .travel-hero-kicker { display: flex; align-items: center; gap: 12px; color: var(--travel-muted); font: 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
#travel-view .travel-hero-kicker .status-label { color: var(--travel-theme); font: 600 11px "Source Han Sans SC", sans-serif; letter-spacing: 0; }
#travel-view .travel-hero-copy h4 { max-width: 750px; margin: 13px 0 4px; color: var(--travel-ink); font: 600 clamp(26px, 3vw, 40px) "Noto Serif SC", serif; letter-spacing: .04em; }
#travel-view .travel-hero-subtitle { margin: 0 0 14px; color: var(--travel-warm); font: 500 14px "Noto Serif SC", serif; }
#travel-view .travel-hero-meta { display: flex; flex-wrap: wrap; gap: 7px 20px; color: #526f72; font-size: 12px; }
#travel-view .travel-hero-summary { max-width: 680px; margin: 16px 0 10px; color: var(--travel-muted); font-size: 12px; line-height: 1.8; }
#travel-view .travel-hero-actions { display: flex; flex-direction: column; align-items: end; justify-content: end; gap: 7px; min-width: 150px; padding: 20px 22px; border-left: 1px dashed var(--travel-line); }
#travel-view .travel-book-layout { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); align-items: start; gap: 18px; margin-top: 18px; }
#travel-view .travel-route-book,
#travel-view .travel-itinerary-book,
#travel-view .travel-plan-library { min-width: 0; }
#travel-view .travel-route-book,
#travel-view .travel-itinerary-book { position: relative; padding: 18px; border: 1px solid var(--travel-line); background: rgba(255,255,255,.35); box-shadow: 0 8px 24px rgba(57, 71, 63, .035); }
#travel-view .travel-route-book { background: #f6f4eb; }
#travel-view .travel-itinerary-book { background: #fbfaf5; }
#travel-view .travel-book-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
#travel-view .travel-book-heading > div:first-child { display: flex; align-items: center; gap: 11px; min-width: 0; }
#travel-view .travel-book-heading h4 { margin: 3px 0 0; color: var(--travel-ink); font: 600 22px "Noto Serif SC", serif; }
#travel-view .travel-book-heading .eyebrow { margin: 0; color: var(--travel-accent); }
#travel-view .travel-section-number { display: grid; place-items: center; width: 30px; height: 30px; color: #fffdf6; background: var(--travel-ink); font: 600 11px "DM Mono", monospace; transform: rotate(-3deg); }
#travel-view .travel-route-actions { display: flex; align-items: center; gap: 10px; color: var(--travel-muted); font-size: 11px; }
#travel-view .travel-route-actions span { max-width: 230px; text-align: right; line-height: 1.5; }
#travel-view .travel-map-paper { min-height: 540px; overflow: hidden; border: 10px solid #d2c3a0; border-radius: 2px; background-color: #dbe7df; background-image: radial-gradient(rgba(54, 80, 69, .11) .7px, transparent .8px), linear-gradient(150deg, rgba(255,255,255,.8), transparent 42%), repeating-linear-gradient(22deg, rgba(255,255,255,.18) 0 1px, transparent 1px 6px); background-size: 7px 7px, auto, auto; box-shadow: inset 0 0 0 1px rgba(93, 106, 88, .2), 0 10px 20px rgba(52, 68, 59, .08); }
#travel-view .travel-map-paper::after { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .28; background: linear-gradient(25deg, transparent 22%, rgba(255,255,255,.7) 22.2%, transparent 22.5% 66%, rgba(255,255,255,.5) 66.2%, transparent 66.5%); }
#travel-view .travel-map-paper-top { position: absolute; top: 17px; left: 22px; z-index: 2; display: grid; gap: 2px; }
#travel-view .travel-map-label { color: #527a78; font: 10px "DM Mono", monospace; letter-spacing: .12em; }
#travel-view .travel-map-paper-top strong { color: #294c58; font: 600 21px "Noto Serif SC", serif; }
#travel-view .travel-map-paper-top span:last-child { color: #718680; font-size: 11px; }
#travel-view .travel-route-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; overflow: visible; }
#travel-view .travel-route-path,
#travel-view .travel-route-dash { fill: none; stroke: var(--route-color); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#travel-view .travel-route-path { stroke-width: 1.6; opacity: .78; }
#travel-view .travel-route-dash { stroke-width: 3; stroke-dasharray: 1 7; opacity: .9; }
#travel-view .travel-route-path.is-muted,
#travel-view .travel-route-dash.is-muted { opacity: .12; }
#travel-view .travel-pin { position: absolute; z-index: 3; left: var(--pin-x); top: calc(var(--pin-y) * 1%); display: grid; grid-template-columns: 25px auto; gap: 5px; align-items: center; max-width: 155px; padding: 0; border: 0; color: #244d57; background: transparent; transform: translate(-50%, -50%); transition: opacity .22s, transform .22s; }
#travel-view .travel-pin-number { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; border: 2px solid #fffdf5; border-radius: 50%; background: var(--travel-pin-color); box-shadow: 0 3px 7px rgba(44, 67, 59, .24); font: 700 11px "DM Mono", monospace; }
#travel-view .travel-pin-icon { display: grid; place-items: center; width: 27px; height: 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: var(--travel-pin-color); background: #fffdf5; font-size: 17px; box-shadow: 0 3px 8px rgba(44, 67, 59, .12); }
#travel-view .travel-pin-icon img { width: 100%; height: 100%; object-fit: cover; }
#travel-view .travel-pin em { grid-column: 1 / -1; max-width: 150px; padding: 3px 6px; border-bottom: 1px solid rgba(58, 92, 88, .24); color: #2f5054; background: rgba(250, 248, 237, .78); font: 600 11px "Source Han Sans SC", sans-serif; font-style: normal; line-height: 1.35; white-space: normal; }
#travel-view .travel-pin.is-muted { opacity: .22; }
#travel-view .travel-pin:hover,
#travel-view .travel-pin.is-focused { z-index: 7; transform: translate(-50%, -50%) scale(1.08); }
#travel-view .travel-pin.is-focused .travel-pin-number { outline: 3px solid rgba(209, 130, 73, .3); }
#travel-view .travel-map-compass { position: absolute; right: 20px; top: 17px; z-index: 3; display: grid; place-items: center; color: #557977; font-size: 28px; line-height: 1; transform: rotate(45deg); }
#travel-view .travel-map-compass span { display: block; margin-top: -2px; color: #557977; font: 600 10px "DM Mono", monospace; transform: rotate(-45deg); }
#travel-view .travel-map-legend { position: absolute; right: 15px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: end; gap: 5px 10px; max-width: 70%; padding: 7px 9px; border: 1px solid rgba(77, 111, 102, .22); background: rgba(250, 249, 239, .78); color: #5b726d; font-size: 10px; }
#travel-view .travel-map-legend span { display: inline-flex; align-items: center; gap: 4px; }
#travel-view .travel-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--legend-color); }
#travel-view .travel-map-empty { position: absolute; inset: 50% auto auto 50%; z-index: 4; transform: translate(-50%, -50%); color: #5e7773; font: 14px "Noto Serif SC", serif; }
#travel-view .travel-route-footnote { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; color: var(--travel-muted); font: 12px "Noto Serif SC", serif; }
#travel-view .travel-route-footnote > span:first-child { color: var(--travel-warm); font-size: 17px; }
#travel-view .travel-day-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: thin; }
#travel-view .travel-day-tab { flex: 0 0 91px; display: grid; gap: 3px; padding: 8px 9px; border: 1px solid var(--travel-line); border-bottom: 3px solid var(--travel-day-color, #9ca69b); color: #6b7975; background: #f3f1e9; text-align: left; cursor: pointer; }
#travel-view .travel-day-tab span { font: 10px "DM Mono", monospace; }
#travel-view .travel-day-tab strong { overflow: hidden; color: var(--travel-ink); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#travel-view .travel-day-tab small { font-size: 10px; }
#travel-view .travel-day-tab.active { border-color: var(--travel-day-color, var(--travel-accent)); background: #fffdf7; box-shadow: 0 3px 8px rgba(63, 75, 68, .08); }
#travel-view .travel-day-tab.active span { color: var(--travel-day-color, var(--travel-accent)); }
#travel-view .travel-plan-list { display: grid; gap: 10px; max-height: 655px; overflow: auto; padding: 1px 3px 3px 0; }
#travel-view .travel-day-sheet { padding: 2px 0 5px; }
#travel-view .travel-day-sheet + .travel-day-sheet { padding-top: 12px; border-top: 1px dashed var(--travel-line); }
#travel-view .travel-day-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 4px 0 9px; cursor: grab; }
#travel-view .travel-day-sheet-head > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
#travel-view .travel-day-index { flex: 0 0 auto; display: grid; place-items: center; min-width: 53px; padding: 6px 7px; color: #fff; background: var(--travel-day-color); font: 600 10px "DM Mono", monospace; }
#travel-view .travel-day-sheet-head strong { display: block; overflow: hidden; color: var(--travel-ink); font: 600 15px "Noto Serif SC", serif; text-overflow: ellipsis; white-space: nowrap; }
#travel-view .travel-day-sheet-head span:not(.travel-day-index) { display: block; margin-top: 2px; color: var(--travel-muted); font: 10px "DM Mono", monospace; }
#travel-view .travel-day-sheet-title { margin: 0 0 6px 62px; color: #577577; font-size: 12px; }
#travel-view .travel-day-note { margin: 0 0 8px 62px; color: var(--travel-muted); font-size: 11px; line-height: 1.65; }
#travel-view .travel-stops { position: relative; display: grid; gap: 7px; padding-left: 18px; }
#travel-view .travel-stops::before { position: absolute; top: 8px; bottom: 8px; left: 29px; width: 1px; content: ""; background: color-mix(in srgb, var(--travel-accent) 34%, transparent); }
#travel-view .travel-stop-card { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 9px 10px 9px 0; border-bottom: 1px solid #e5e1d5; background: transparent; cursor: grab; transition: background .2s, transform .2s; }
#travel-view .travel-stop-card:hover,
#travel-view .travel-stop-card.is-focused { background: rgba(226, 237, 231, .58); transform: translateX(2px); }
#travel-view .travel-stop-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fffdf7; border-radius: 50%; color: #fff; background: var(--travel-day-color); box-shadow: 0 1px 4px rgba(55, 68, 62, .16); font: 10px "DM Mono", monospace; }
#travel-view .travel-stop-time { color: var(--travel-warm); font: 600 11px "DM Mono", monospace; }
#travel-view .travel-stop-type { margin-left: 7px; color: #78918c; font: 10px "Source Han Sans SC", sans-serif; }
#travel-view .travel-stop-content h5 { margin: 3px 0 2px; color: var(--travel-ink); font: 600 14px "Noto Serif SC", serif; }
#travel-view .travel-stop-place { margin: 0; color: #5f7470; font-size: 11px; }
#travel-view .travel-stop-description { margin: 4px 0 0; color: var(--travel-muted); font-size: 11px; line-height: 1.55; }
#travel-view .travel-stop-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; align-items: center; margin-top: 5px; color: #6c7f78; font-size: 10px; }
#travel-view .travel-stop-meta .tag-pill { padding: 2px 5px; border: 0; border-radius: 2px; background: #edf0e7; color: #657c71; font-size: 10px; }
#travel-view .travel-booking-status { color: #bd6746; }
#travel-view .travel-inline-empty { padding: 18px 12px; border: 1px dashed #d7d4c7; color: var(--travel-muted); background: rgba(255,255,255,.34); font: 12px "Noto Serif SC", serif; line-height: 1.7; }
#travel-view .travel-info-modules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
#travel-view .travel-info-module { min-height: 155px; padding: 15px; border: 1px solid var(--travel-line); border-top: 3px solid var(--travel-accent); background: #fbfaf5; }
#travel-view .travel-info-module:nth-child(2) { border-top-color: #d29152; }
#travel-view .travel-info-module:nth-child(3) { border-top-color: #789b72; }
#travel-view .travel-info-module:nth-child(4) { border-top-color: #8b79a5; }
#travel-view .travel-info-module:nth-child(5) { border-top-color: #bd6d5a; }
#travel-view .travel-info-module-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#travel-view .travel-info-icon { color: var(--travel-accent); font-size: 18px; }
#travel-view .travel-info-module h5 { margin: 2px 0 0; color: var(--travel-ink); font: 600 15px "Noto Serif SC", serif; }
#travel-view .travel-info-module .eyebrow { margin: 0; color: var(--travel-muted); font-size: 9px; }
#travel-view .travel-info-module ul { display: grid; gap: 5px; margin: 0; padding-left: 16px; color: #687974; font-size: 11px; line-height: 1.45; }
#travel-view .travel-module-empty { margin: 18px 0 0; color: #9a9e95; font-size: 11px; line-height: 1.6; }
#travel-view .travel-plan-library { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--travel-line); }
#travel-view .travel-library-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 11px; }
#travel-view .travel-library-heading h4 { margin: 4px 0 0; color: var(--travel-ink); font: 600 21px "Noto Serif SC", serif; }
#travel-view .travel-library-heading > span { color: var(--travel-muted); font-size: 11px; }
#travel-view .travel-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
#travel-view .travel-library-card { padding: 14px; border: 1px solid var(--travel-line); border-top: 3px solid var(--travel-accent); background: #fffdf8; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
#travel-view .travel-library-card.status-计划中 { border-top-color: var(--travel-warm); }
#travel-view .travel-library-card.status-已完成 { border-top-color: #729273; }
#travel-view .travel-library-card:hover, #travel-view .travel-library-card.is-active { border-color: color-mix(in srgb, var(--travel-accent) 50%, var(--travel-line)); box-shadow: 0 8px 16px rgba(57, 71, 63, .07); transform: translateY(-2px); }
#travel-view .travel-library-card-top { display: flex; justify-content: space-between; color: var(--travel-muted); font: 10px "DM Mono", monospace; }
#travel-view .travel-library-card h5 { margin: 8px 0 4px; color: var(--travel-ink); font: 600 16px "Noto Serif SC", serif; }
#travel-view .travel-library-card p { margin: 0; color: var(--travel-muted); font-size: 11px; }
#travel-view .travel-library-card .plan-tags { margin-top: 9px; }
#travel-view .travel-library-card .plan-actions { margin-top: 8px; }
#travel-view .travel-empty-state { margin-top: 18px; }
#travel-view .travel-empty-ticket { display: grid; justify-items: start; gap: 8px; min-height: 240px; padding: 40px; border: 1px dashed #c9b58c; background: #f6f0df; }
#travel-view .travel-empty-ticket > span { color: var(--travel-warm); font: 10px "DM Mono", monospace; letter-spacing: .14em; }
#travel-view .travel-empty-ticket strong { color: var(--travel-ink); font: 600 32px "Noto Serif SC", serif; }
#travel-view .travel-empty-ticket p { margin: 0 0 8px; color: var(--travel-muted); }

#travel-dialog .travel-editor-card { width: min(1080px, calc(100vw - 32px)); max-width: none; height: min(860px, calc(100vh - 32px)); padding: 0; overflow: hidden; }
#travel-dialog .travel-editor-card .modal-header { padding: 22px 26px 16px; }
#travel-dialog .travel-editor-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 26px 18px; }
#travel-dialog .travel-editor-section { padding: 17px 0 22px; border-top: 1px solid #e2ded1; }
#travel-dialog .travel-editor-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
#travel-dialog .travel-editor-section-heading > div { flex: 1; min-width: 0; }
#travel-dialog .travel-editor-section-heading strong { display: block; color: #2c4b52; font: 600 17px "Noto Serif SC", serif; }
#travel-dialog .travel-editor-section-heading small { display: block; margin-top: 4px; color: #82908b; font-size: 11px; line-height: 1.5; }
#travel-dialog .travel-editor-section-heading .travel-section-number { flex: 0 0 auto; }
#travel-dialog .travel-editor-inline { display: flex; align-items: end; gap: 15px; }
#travel-dialog .travel-editor-inline label { flex: 1; }
#travel-dialog .travel-editor-inline label:first-child { flex: 0 0 120px; }
#travel-dialog .travel-editor-inline input[type="color"] { width: 56px; height: 36px; padding: 3px; }
#travel-dialog .travel-existing-photos { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: #87918a; font-size: 10px; }
#travel-dialog .travel-existing-photos img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #d7d4c7; }
#travel-dialog .travel-editor-day { margin-top: 12px; padding: 14px; border: 1px solid #d8d5c8; border-left: 3px solid var(--travel-day-color, #69919a); background: #fcfbf6; }
#travel-dialog .travel-editor-day-head { display: flex; align-items: center; gap: 9px; }
#travel-dialog .travel-editor-day-head .travel-day-index { flex: 0 0 auto; }
#travel-dialog .travel-drag-mark { color: #9b9e91; cursor: grab; font-size: 18px; line-height: 1; }
#travel-dialog .travel-editor-day-title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1; gap: 7px; }
#travel-dialog .travel-editor-day-title input { min-width: 0; border: 0; border-bottom: 1px solid #ddd9cc; border-radius: 0; background: transparent; }
#travel-dialog .travel-editor-day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
#travel-dialog .travel-editor-day-grid label { color: #76817b; font-size: 10px; }
#travel-dialog .travel-editor-day-grid input { margin-top: 5px; }
#travel-dialog .travel-editor-stops { margin-top: 13px; padding-top: 10px; border-top: 1px dashed #dcd8ca; }
#travel-dialog .travel-editor-stops-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #59706d; font-size: 12px; }
#travel-dialog .travel-editor-stop { display: flex; gap: 7px; margin-top: 8px; padding: 9px; border: 1px solid #e1ddd2; background: #fffef9; }
#travel-dialog .travel-editor-stop-main { flex: 1; min-width: 0; }
#travel-dialog .travel-editor-stop-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
#travel-dialog .travel-editor-stop input, #travel-dialog .travel-editor-stop select, #travel-dialog .travel-editor-stop textarea { min-width: 0; padding: 7px 8px; border: 1px solid #e1ded4; border-radius: 2px; background: #fffefb; font-size: 11px; }
#travel-dialog .travel-editor-stop textarea { width: 100%; resize: vertical; }
#travel-dialog .travel-editor-stop .travel-remove-stop { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; color: #a06e61; }
#travel-dialog .travel-editor-empty { margin: 7px 0; color: #9a9e95; font-size: 11px; }
#travel-dialog .travel-editor-actions { position: relative; z-index: 2; margin: 0; padding: 13px 26px; border-top: 1px solid #dcd8ca; background: rgba(255,253,247,.97); box-shadow: 0 -5px 15px rgba(60, 70, 62, .05); }

#detail-dialog .travel-detail-hero { padding: 17px; border: 1px solid #d8d5c7; border-left: 3px solid var(--travel-accent); background: #f5f7ef; }
#detail-dialog .travel-detail-hero h4 { margin: 8px 0 5px; color: var(--travel-ink); font: 600 23px "Noto Serif SC", serif; }
#detail-dialog .travel-detail-hero p { margin: 0 0 8px; color: #70807a; font-size: 12px; }
#detail-dialog .travel-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 13px; margin-top: 13px; }
#detail-dialog .travel-detail-grid > section { padding: 15px; border: 1px solid #e1ded3; background: #fffdf8; }
#detail-dialog .travel-detail-grid h4 { margin: 0 0 10px; color: var(--travel-ink); font: 600 17px "Noto Serif SC", serif; }
#detail-dialog .travel-detail-day + .travel-detail-day { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #d8d5c7; }
#detail-dialog .travel-detail-day-head { display: flex; align-items: baseline; gap: 7px; color: #72837d; }
#detail-dialog .travel-detail-day-head span { color: var(--travel-warm); font: 10px "DM Mono", monospace; }
#detail-dialog .travel-detail-day-head strong { color: var(--travel-ink); font-size: 14px; }
#detail-dialog .travel-detail-day-head small { margin-left: auto; font-size: 10px; }
#detail-dialog .travel-detail-stop { display: grid; grid-template-columns: 68px 1fr; gap: 8px; padding: 9px 0 0; }
#detail-dialog .travel-detail-stop time { color: var(--travel-warm); font: 10px "DM Mono", monospace; }
#detail-dialog .travel-detail-stop strong, #detail-dialog .travel-detail-stop span { display: block; color: #334d53; font-size: 12px; }
#detail-dialog .travel-detail-stop span { margin-top: 2px; color: #74847e; font-size: 10px; }
#detail-dialog .travel-detail-stop p { margin: 3px 0 0; color: #7e8983; font-size: 10px; line-height: 1.5; }
#detail-dialog .travel-detail-info-grid { display: grid; gap: 8px; }
#detail-dialog .travel-detail-info-grid .travel-info-module { min-height: 0; padding: 10px; border-top-width: 2px; }
#detail-dialog .travel-detail-info-grid .travel-info-module ul { max-height: 90px; overflow: auto; }
#detail-dialog .travel-detail-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#detail-dialog .travel-detail-gallery:empty { display: none; }
#detail-dialog .travel-detail-gallery img { width: 105px; height: 78px; object-fit: cover; border: 1px solid #d8d5c7; }

@media (max-width: 1040px) {
  #travel-view .travel-book-layout { grid-template-columns: 1fr; }
  #travel-view .travel-plan-list { max-height: none; }
  #travel-view .travel-info-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #travel-view .travel-section-heading { align-items: start; flex-direction: column; gap: 13px; }
  #travel-view .travel-heading-actions { width: 100%; justify-items: stretch; }
  #travel-view .travel-sync-mark { text-align: right; }
  #travel-view .travel-archive-toolbar { align-items: stretch; flex-direction: column; }
  #travel-view .travel-toolbar-index { justify-content: space-between; }
  #travel-view .travel-hero-card { grid-template-columns: 1fr; }
  #travel-view .travel-hero-copy { padding: 20px; }
  #travel-view .travel-hero-actions { align-items: start; flex-direction: row; min-width: 0; padding: 0 20px 18px; border: 0; }
  #travel-view .travel-map-paper { min-height: 400px; border-width: 7px; }
  #travel-view .travel-route-book, #travel-view .travel-itinerary-book { padding: 13px; }
  #travel-view .travel-book-heading { align-items: start; flex-direction: column; }
  #travel-view .travel-route-actions { width: 100%; justify-content: space-between; }
  #travel-view .travel-route-actions span { max-width: none; text-align: left; }
  #travel-view .travel-info-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #travel-view .travel-library-grid { grid-template-columns: 1fr; }
  #travel-view .travel-empty-ticket { padding: 28px 22px; }
  #travel-view .travel-empty-ticket strong { font-size: 27px; }
  #travel-dialog .travel-editor-card { width: calc(100vw - 12px); height: calc(100dvh - 14px); }
  #travel-dialog .travel-editor-card .modal-header, #travel-dialog .travel-editor-scroll { padding-left: 16px; padding-right: 16px; }
  #travel-dialog .travel-editor-day-grid, #travel-dialog .travel-editor-stop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #travel-dialog .travel-editor-day-title { grid-template-columns: 1fr; }
  #travel-dialog .travel-editor-actions { padding-left: 16px; padding-right: 16px; }
  #detail-dialog .travel-detail-grid { grid-template-columns: 1fr; }
}

/* Global panel system: one interaction model for every modal and drawer. */
body.panel-open { overflow: hidden; }
dialog.modal.global-panel { box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
dialog.modal.global-panel > .global-panel-card { box-sizing: border-box; min-width: 0; min-height: 100%; max-width: none; }
dialog.modal.global-panel > .diary-reader-card { min-height: 100%; box-sizing: border-box; }
dialog.modal.global-panel:not(#recipe-dialog) .modal-actions { position: sticky; z-index: 8; bottom: -1px; margin-top: 4px; padding: 13px 0 1px; border-top: 1px solid rgba(205, 218, 207, .9); background: linear-gradient(to bottom, rgba(255, 254, 249, .78), #fffef9 14px); }
dialog.modal.global-panel .form-grid,
dialog.modal.global-panel .diary-author-row,
dialog.modal.global-panel .diary-publish-row,
dialog.modal.global-panel .calendar-date-mode,
dialog.modal.global-panel .calendar-birthday-grid,
dialog.modal.global-panel .travel-detail-grid,
dialog.modal.global-panel .photo-detail-layout { min-width: 0; }
.global-panel-card { container: panel-card / inline-size; }
dialog.modal.global-panel.is-resizing { user-select: none; }
dialog.modal.global-panel > .panel-resize-handle,
.global-floating-panel > .panel-resize-handle,
.global-panel-card > .panel-resize-handle,
.global-panel-card > .modal-resize-handle { position: absolute; right: 9px; bottom: 9px; z-index: 12; display: block; width: 17px; height: 17px; border-right: 1px solid #789987; border-bottom: 1px solid #789987; color: #789987; opacity: .72; cursor: nwse-resize; transition: opacity .16s ease, color .16s ease, border-color .16s ease; }
dialog.modal.global-panel > .panel-resize-handle::before,
dialog.modal.global-panel > .panel-resize-handle::after,
.global-floating-panel > .panel-resize-handle::before,
.global-floating-panel > .panel-resize-handle::after,
.global-panel-card > .panel-resize-handle::before,
.global-panel-card > .panel-resize-handle::after,
.global-panel-card > .modal-resize-handle::before,
.global-panel-card > .modal-resize-handle::after { content: ""; position: absolute; right: 1px; bottom: 4px; width: 10px; border-top: 1px solid currentColor; transform: rotate(-45deg); transform-origin: right center; }
dialog.modal.global-panel > .panel-resize-handle::after,
.global-floating-panel > .panel-resize-handle::after,
.global-panel-card > .panel-resize-handle::after,
.global-panel-card > .modal-resize-handle::after { right: -1px; bottom: 8px; width: 7px; }
dialog.modal.global-panel > .panel-resize-handle:hover,
dialog.modal.global-panel > .panel-resize-handle.is-dragging,
.global-floating-panel > .panel-resize-handle:hover,
.global-floating-panel > .panel-resize-handle.is-dragging,
.global-panel-card > .panel-resize-handle:hover,
.global-panel-card > .panel-resize-handle.is-dragging,
.global-panel-card > .modal-resize-handle:hover,
.global-panel-card > .modal-resize-handle.is-dragging { color: #3e7257; border-color: #3e7257; opacity: 1; }

@container panel-card (max-width: 700px) {
  .form-grid,
  .diary-author-row,
  .diary-publish-row,
  .calendar-date-mode,
  .calendar-birthday-grid,
  .travel-detail-grid,
  .photo-detail-layout,
  .live-motion { grid-template-columns: 1fr !important; }
  .calendar-date-mode label:first-child { grid-column: auto !important; }
  .calendar-event-options { align-items: start; flex-direction: column; gap: 9px; }
  .diary-author-picker { flex-wrap: wrap; }
}

/* Small, deliberate palette shifts keep the archive unified without making every module mint green. */
#diary-view { --module-accent: #527a64; --module-soft: #f4e9e8; --module-warm: #b77d7e; }
#travel-view { --module-accent: #5d8da0; --module-soft: #edf4f3; --module-warm: #d6a85b; }
#menu-view { --module-accent: #b97849; --module-soft: #fff1df; --module-warm: #8a9b69; }
#calendar-view { --module-accent: #557b63; --module-soft: #f4f0df; --module-warm: #c58a3c; }
.module-heading h3 { color: var(--module-accent, var(--green-dark)); }
.module-heading .eyebrow { color: color-mix(in srgb, var(--module-accent, var(--green)) 70%, #9d8d68); }
#diary-view .diary-tool-button[aria-expanded="true"], #diary-view .diary-card:hover { border-color: color-mix(in srgb, var(--module-accent) 48%, #dbe4dc); }
#diary-view .diary-side-card:first-child { border-top: 2px solid color-mix(in srgb, var(--module-warm) 58%, #dbe4dc); }
#diary-view .diary-month-node::after { border-color: var(--module-accent); }
#diary-view .diary-card.tone-zjy::after { background: var(--module-warm); }
#diary-view .diary-card.tone-together::after { background: #8298a0; }
#travel-view .travel-plan-card { border-left-color: var(--module-accent); }
#travel-view .travel-plan-card.status-计划中 { border-left-color: var(--module-warm); }
#travel-view .travel-plan-card.status-已完成 { border-left-color: #739b77; }
#travel-view .travel-detail-head { border-color: color-mix(in srgb, var(--module-accent) 35%, #d4e2d8); background: var(--module-soft); }
#travel-view .blackboard-title span { color: var(--module-warm); }
#menu-view .menu-feature-card { border-color: #ecd9bc; background: linear-gradient(135deg, #fff3e2, #fffaf0); }
#menu-view .menu-count-card { border-color: #d4dfc5; background: #f4f6e9; }
#menu-view .recipe-cover { background: linear-gradient(140deg, #f0d3b4, #fff2dd); }
#menu-view .recipe-category { background: color-mix(in srgb, var(--module-accent) 78%, #4b5145); }
#menu-view .recipe-favorite.active { background: #758d67; }
#calendar-view .calendar-memory-hero { border-top: 2px solid var(--module-warm); }
#calendar-view .calendar-memory-item.is-featured { background: var(--module-soft); }
#calendar-view .calendar-month-caption strong { color: var(--module-accent); }
.diary-search-popover.global-floating-panel, .diary-filter-popover.global-floating-panel { overflow: auto; min-width: 300px; max-width: calc(100vw - 24px); max-height: min(72vh, 640px); }
#leaflet-map.is-offline-map { background: #e8efe6; }
#leaflet-map.is-offline-map::after { content: "离线地图"; position: absolute; z-index: 450; top: 12px; left: 12px; padding: 4px 7px; border: 1px solid rgba(47, 115, 94, .25); border-radius: 3px; color: #356c58; background: rgba(255, 253, 247, .86); font: 10px "DM Mono", monospace; letter-spacing: .04em; pointer-events: none; }

@media (max-width: 720px) {
  dialog.modal.global-panel,
  dialog.modal.global-panel#detail-dialog,
  dialog.modal.global-panel#diary-dialog,
  dialog.modal.global-panel#diary-reader-dialog,
  dialog.modal.global-panel#travel-dialog,
  dialog.modal.global-panel#event-dialog,
  dialog.modal.global-panel#calendar-settings-dialog,
  dialog.modal.global-panel#upload-dialog,
  dialog.modal.global-panel#baidu-netdisk-dialog { width: calc(100vw - 12px) !important; min-width: 0 !important; max-width: calc(100vw - 12px) !important; height: calc(100dvh - 14px) !important; max-height: calc(100dvh - 14px) !important; margin: 0 6px !important; border-radius: 14px 14px 0 0; }
  dialog.modal.global-panel > .global-panel-card,
  dialog.modal.global-panel > .diary-reader-card { min-height: 100%; border-radius: 14px 14px 0 0; }
  dialog.modal.global-panel > .panel-resize-handle,
  .global-floating-panel > .panel-resize-handle,
  .global-panel-card > .panel-resize-handle,
  .global-panel-card > .modal-resize-handle { display: none; }
  dialog.modal.global-panel:not(#recipe-dialog) .modal-actions { padding-bottom: 5px; }
}