/* === 個人平台 PWA 樣式 === */

:root {
  --bg: #fff8f0;
  --card: #ffffff;
  --text: #3d2c1e;
  --text2: #8b7355;
  --accent: #f59e0b;
  --accent2: #d97706;
  --border: #f0e0cc;
  --danger: #ef4444;
  --success: #10b981;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --text3: #A28E77;            /* meta：日期、計數、輔助說明 */
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(61,44,30,.05), 0 6px 16px rgba(61,44,30,.07);
  --shadow-float: 0 -12px 40px rgba(60,50,40,.18);

}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-top: 16px;
  padding-bottom: 80px;
  -webkit-tap-highlight-color: transparent;
}

/* 語音區 */
/* 麥克風按鈕（獨立一顆在輸入框上方，整條好按） */
#micBtn {
  width: 100%;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 12px 0;
}
#micBtn.listening {
  background: var(--danger);
  color: white;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 16px rgba(239,68,68,0); }
}

/* 內容區 */
main {
  padding: 0 20px;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
.tab-content h2 {
  font-size: 1.1rem;
  margin: 16px 0 10px;
  color: var(--accent2);
}

/* 首頁（整合五項目摘要） */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.home-card {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  min-height: 88px;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.home-card:active {
  transform: scale(0.97);
}
.home-card-expense {
  grid-column: span 2;
}
.home-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
/* 首頁「X月收支」右邊的今日日期 */
.home-today {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text2);
  opacity: 0.9;
  white-space: nowrap;
}
.home-line {
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.55;
}
.home-line b {
  color: var(--text);
}
/* 首頁日記卡：只顯示日期，日期字小一點 */
.home-date {
  font-size: 0.68rem;
  color: var(--text2);
  opacity: 0.85;
  margin-right: 5px;
}
.home-line-more { opacity: 0.72; }
/* 首頁養成好習慣卡：總項目／已完成／今日進度（半寬卡片，上下排列） */
#habitStats { margin-top: 2px; }
.habit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.76rem;
  color: var(--text2);
  line-height: 1.7;
}
.habit-row b { color: var(--text); font-size: 0.86rem; }
/* 習慣資料要登入：卡片裡的登入提示按鈕 */
.habit-login-btn {
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--accent2);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.home-pos { color: #047857; }
.home-neg { color: #dc2626; }

/* 收支卡：摘要列 + 餅狀圖 + 最新消費 */
.home-sum-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.home-sum {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 8px;
  min-width: 0;
}
.home-sum-label {
  font-size: 0.7rem;
  color: var(--text2);
}
.home-sum b {
  font-size: clamp(0.64rem, 2.9vw, 0.8rem);   /* 隨螢幕寬度縮放，避免金額被格子切掉 */
  white-space: nowrap;
}
.home-sec-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text2);
  margin: 10px 0 6px;
}
/* 首頁頂部：標題 + 常用連結同一排 */
.home-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;      /* 空間不夠時連結整排換行，不再撐出畫面外 */
  row-gap: 6px;
  margin: 16px 0 12px;
}
.home-top h2 {
  margin: 0;
  flex-shrink: 0;
}
.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  margin-left: auto; border-radius: var(--r-md);}
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 9px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.home-link:active { transform: scale(0.92); }
.pie-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pie-svg {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}
.pie-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text);
}
.pie-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pie-empty {
  font-size: 0.78rem;
  color: var(--text2);
  padding: 6px 0;
}
.home-latest {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.latest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.latest-item:last-child {
  border-bottom: none;
}
.latest-store {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-badge {
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}
.latest-amt {
  font-weight: 600;
  color: var(--danger);
  flex-shrink: 0;
}
.latest-date {
  font-size: 0.68rem;
  color: var(--text2);
  flex-shrink: 0;
}
.latest-empty {
  font-size: 0.78rem;
  color: var(--text2);
  padding: 4px 0;
}

/* 清單 */
ul {
  list-style: none;
}
li, .card {
  background: var(--card);
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  line-height: 1.4;
}
.todo-check {
  width: 20px; height: 20px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
}
.todo-check.done {
  background: var(--accent);
  color: white;
}
.todo-text.done {
  text-decoration: line-through;
  color: var(--text2);
}
.todo-marker {
  color: var(--accent);
  margin-right: 6px;
  font-weight: 700;
}
.card .meta {
  font-size: 0.75rem;
  color: var(--text2);
  margin-top: 4px;
}
.card .del-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
}

/* 收支摘要 */
#expenseSummary {
  background: #fff8f0;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  text-align: center;
}
#expenseSummary .amount {
  font-size: 2rem;
  font-weight: 700;
}
#expenseSummary .label {
  font-size: 0.8rem;
  color: var(--text2);
}
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}
.month-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.month-nav-label {
  font-size: 1.05rem;
  font-weight: 700;
}
.month-back {
  font-size: 0.78rem;
  color: var(--accent, #2f855a);
  cursor: pointer;
  margin-bottom: 4px;
}
.summary-row {
  display: flex;
  justify-content: space-around;
  margin: 12px 0;
  gap: 6px;
  padding: 0 2px;   /* 左右各留一點，避免最右側「結餘」貼到框邊 */
}
.sum-col {
  flex: 1 1 0;      /* 可壓縮：三個格子一定塞得進摘要框 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
  padding: 8px 3px;
}
/* 三區塊不同淡色 */
.sum-inc { background: #d1fae5; }
.sum-exp { background: #ffedd5; }
.sum-bal { background: #ede9fe; }
.sum-label {
  font-size: 0.72rem;
  opacity: .75;
}
/* 金額字級隨螢幕寬度縮放（窄機／系統字體放大時不會擠出框外） */
.sum-income { font-size: clamp(0.72rem, 3.4vw, 1rem); font-weight: 700; color: #047857; white-space: nowrap; }
.sum-expense { font-size: clamp(0.72rem, 3.4vw, 1rem); font-weight: 700; color: #c2410c; white-space: nowrap; }
.sum-balance { font-size: clamp(0.72rem, 3.4vw, 1rem); font-weight: 700; white-space: nowrap; }
.sum-balance.pos { color: #047857; }
.sum-balance.neg { color: #dc2626; }
/* 最近消費（顯示在「支出分類總額」下方）*/
.recent-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  line-height: 1.5;
}
.recent-tag {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fde68a;
  color: #92400e;
  transform: translateY(-1px);
}
.recent-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-amt {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--danger);
  white-space: nowrap;
}
.recent-meta {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text2);
  white-space: nowrap;
}

.cat-stats-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 6px;
}

/* 分類統計 */
.cat-stats {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.85rem;
}
.cat-name {
  width: 40px;
  font-weight: 700;
  flex-shrink: 0;
}
.cat-bar {
  flex: 1;
  height: 10px;
  background: #f5ede0;
  border-radius: 999px;
  overflow: hidden;
}
.cat-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 999px;
}
.cat-amt {
  width: 70px;
  text-align: right;
  font-weight: 600;
  flex-shrink: 0;
}

/* 每日花費曲線圖 */
.chart-box {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.chart-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 8px;
}

/* 分類徽章 */
.cat-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.cat-食 { background: #fef3c7; color: #b45309; }
.cat-衣 { background: #fce7f3; color: #be185d; }
.cat-住 { background: #e0e7ff; color: #4338ca; }
.cat-行 { background: #d1fae5; color: #047857; }
.cat-道場 { background: #fef9c3; color: #a16207; }
.cat-其他 { background: #e5e7eb; color: #4b5563; }
.cat-income { background: #d1fae5; color: #047857; }

/* 發票消費明細（直接顯示在每筆下） */
.inv-items {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--text2);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  margin-top: 2px;
}
.inv-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}
.inv-item .inv-name { flex: 1; }
.inv-item .inv-qty { color: var(--text2); font-size: 0.72rem; flex-shrink: 0; }
.inv-item .inv-amt { font-weight: 600; flex-shrink: 0; }

/* 分類明細 toggle（每個分類下方） */
.cat-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 1px 0 3px;
  text-align: left;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  user-select: none; border-radius: var(--r-sm);}
.cat-toggle::before {
  content: '▸ ';
}
.cat-toggle.open::before {
  content: '▾ ';
}
.cat-detail {
  display: none;
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}
.cat-detail.show {
  display: block;
}
.cat-detail li {
  margin-bottom: 6px;
  box-shadow: none;
  border: 1px solid var(--border);
}

/* 同一天的消費用一個框框起來（2026-09-30 前賢要求）*/
.cat-detail li.day-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fffdf9;
}
.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.day-date {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: 0.02em;
}
.day-sum {
  font-size: 0.7rem;
  color: var(--text2);
  white-space: nowrap;
}
.cat-detail .day-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-detail .day-items li strong,
.cat-detail .day-items li span {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.cat-detail .day-items li {
  border: none;
  border-bottom: 1px dashed #f0e6d8;
  border-radius: 0;
  margin-bottom: 0;
  padding: 5px 0;
  background: transparent;
}
.cat-detail .day-items li:first-child {
  padding-top: 2px;
}
.cat-detail .day-items li:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}
.cat-detail .cat-empty,
.cat-detail .cat-fixed {
  background: none;
  box-shadow: none;
  border: none;
  font-size: 0.8rem;
  color: var(--text2);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

/* === 行事曆 === */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.cal-nav button {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 2px 10px;
  color: var(--text);
}
.cal-moy {
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.cal-lunmon {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent2);
}
.cal-lunar {
  display: block;
  font-size: 0.58rem;
  color: #b0a08c;
  line-height: 1.1;
  margin-bottom: 2px;
}
.cal-lunar.lunar-mstart {
  color: #d97706;
  font-weight: 700;
}
.cal-today-btn {
  font-size: 0.8rem !important;
  color: var(--accent2) !important;
  font-weight: 700;
}
.cal-add-btn {
  font-size: 1.4rem !important;
  color: white !important;
  background: var(--accent);
  border-radius: 50%;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1;
  box-shadow: var(--shadow-card);
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text2);
  margin-bottom: 4px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-cell {
  background: var(--card);
  border-radius: 8px;
  min-height: 52px;
  padding: 3px;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.cal-cell.empty {
  background: transparent;
  box-shadow: none;
}
.cal-cell.today .cal-num {
  background: var(--accent);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cal-cell.selected {
  outline: 2px solid var(--accent2);
}
.cal-num {
  font-size: 0.75rem;
  color: var(--text);
  display: inline-block;
  margin-bottom: 2px;
}
.cal-chip {
  display: block;
  font-size: 0.6rem;
  color: white;
  border-radius: 4px;
  padding: 1px 4px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-more {
  font-size: 0.6rem;
  color: var(--text2);
}
.day-detail {
  background: var(--card);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
  box-shadow: var(--shadow);
}
.day-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.ev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.88rem;
}
.ev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ev-title { flex: 1; }
.ev-cal {
  font-size: 0.7rem;
  color: var(--text2);
}
.ev-del {
  font-size: 0.9rem;
}
.ev-empty {
  color: var(--text2);
  font-size: 0.85rem;
  padding: 6px 0;
}
.add-event-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.add-event-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
}
.add-event-row button {
  width: 40px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
}

/* 養成好習慣 iframe（內嵌保留底部導航） */
#dashFrame {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  bottom: 55px;
  z-index: 80;
  background: #fff;
}
#dashFrame.hidden { display: none; }
#dashFrame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 底部導航 */
nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  z-index: 100;
}
.nav-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 2px;
  font-size: 0.72rem;
  color: var(--text2);
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-btn.active {
  color: var(--accent2);
  font-weight: 600;
}

/* 日記卡片 */
.diary-card {
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.diary-card .date {
  font-size: 0.75rem;
  color: var(--text2);
  margin-bottom: 6px;
}
.diary-card .content {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* 新增輸入框（麥克風在上、輸入框＋新增在下） */
.add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 24px;
}
.add-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* 剛新增（重整前先顯示在輸入框下方，重整後才歸位） */
.pending-box {
  margin: 0 0 14px;
  padding: 10px 12px 4px;
  border: 1px solid var(--success);
  border-radius: 12px;
  background: #f0fdf4;
}
.pending-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #047857;
  margin-bottom: 8px;
}
.pending-list li {
  box-shadow: none;
  border: 1px solid #bbf7d0;
}
/* 日記編輯框：工具列收在框內（小米備忘錄樣式） */
.diary-box {
  display: flex;
  flex-direction: column;
  min-height: 33vh;
  position: relative;

  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.diary-box textarea {
  flex: 1 1 auto;

  color: inherit;
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 12px 2px !important;
  min-height: 44px;
  display: block;
  box-sizing: border-box;
}
#diaryTools { border-top: 0; padding: 0 8px 0; position: relative; }
/* 日記日期：貼在方框右下外側 */
li.diary-li { position: relative; margin-bottom: 22px; }
.diary-date-out {
  position: absolute;
  right: 6px;
  bottom: -17px;
  font-size: 0.68rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
/* 「已儲存」浮在工具列上方，不佔版面高度（工具列才能貼近框底） */
#diaryTools .dt-meta {
  position: absolute;
  right: 12px;
  bottom: 100%;
  margin-bottom: 4px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--text2);
  padding: 0;
  min-height: 0;
  pointer-events: none;
}
#diaryTools .dt-stamp { font-variant-numeric: tabular-nums; opacity: 0.9; }
#diaryTools .dt-saved {
  padding: 0; min-height: 0; font-size: 0.68rem;
  color: #16a34a; opacity: 0; transform: translateY(2px);
  transition: opacity .28s ease, transform .28s ease;
  display: inline-flex; align-items: center; gap: 3px; letter-spacing: .2px;
}
#diaryTools .dt-saved.on { opacity: .9; transform: translateY(0); }

.add-form input,
.add-form textarea {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  background: white;
  font-family: inherit;
}
.add-form textarea {
  resize: none;
  min-height: 48px;
  line-height: 1.5;
  overflow-y: hidden;
}
.add-form button {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  flex-shrink: 0;
}


/* ============ 待辦：艾森豪四象限 ============ */
.quad-pick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.quad-pick .qp {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text2);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.quad-pick .qp::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex: 0 0 auto;
}
.quad-pick .qp.on {
  border-color: var(--accent);
  color: #3d2c1e;
  font-weight: 600;
  background: #fffaf2;
}
.quad-pick .qp.q1::before { background: #dc2626; }
.quad-pick .qp.q2::before { background: #f59e0b; }
.quad-pick .qp.q3::before { background: #2563eb; }
.quad-pick .qp.q4::before { background: #9ca3af; }

.quad {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px 6px;
  margin-bottom: 10px;
  box-shadow: none;
}
.quad-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.quad-no {
  width: 19px; height: 19px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: #fff;
  background: var(--line);
  flex: 0 0 auto;
}
.quad-n {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text2);
  font-weight: 400;
}
.quad.q1 { border-left: 3px solid #dc2626; }
.quad.q1 .quad-no { background: #dc2626; }
.quad.q2 { border-left: 3px solid #f59e0b; }
.quad.q2 .quad-no { background: #f59e0b; }
.quad.q3 { border-left: 3px solid #2563eb; }
.quad.q3 .quad-no { background: #2563eb; }
.quad.q4 { border-left: 3px solid #9ca3af; }
.quad.q4 .quad-no { background: #9ca3af; }
.quad.qdone { border-left: 3px solid var(--success); }
.quad.qdone .quad-no { background: var(--success); }

.quad-list { margin: 0; padding: 0; }
.quad-list > li {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px dashed var(--border);
  padding: 7px 2px;
  margin: 0;
  gap: 8px;
  font-size: 0.9rem;
}
.quad-list > li:last-child { border-bottom: 0; }
.quad-empty {
  color: var(--text2);
  font-size: 0.78rem;
  border-bottom: 0 !important;
}

.q-badge {
  width: 22px; height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 400;
  color: #dc2626;
  flex: 0 0 auto;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* 紅星＝重要（★）；不重要顯示空心 ☆ */
.q-badge.q3, .q-badge.q4 { color: #c3c9d2; }

/* 打勾：漸閃淡出 */
@keyframes todoFadeOut {
  0%   { opacity: 1; filter: blur(0); transform: translateX(0); }
  45%  { opacity: 0.45; filter: blur(0.3px); transform: translateX(3px); }
  100% { opacity: 0; filter: blur(1.2px); transform: translateX(10px); }
}
.todo-li.todo-fading {
  animation: todoFadeOut 0.48s ease forwards;
  pointer-events: none;
}


/* 空象限收成一條細列 */
.quad.is-empty {
  padding: 7px 12px;
  margin-bottom: 6px;
  background: #fbf8f3;
  border-style: dashed;
  border-left-width: 3px;
}
.quad.is-empty .quad-head { margin-bottom: 0; font-weight: 600; color: var(--text2); font-size: 0.8rem; }
.quad.is-empty .quad-no { opacity: 0.55; }

/* 已完成收合 */
.quad.collapsed { padding-bottom: 7px; }
.quad-head-btn { cursor: pointer; }
.quad-caret { margin-left: 6px; color: var(--text2); font-size: 0.75rem; }
.quad-clear {
  margin: 6px 0 2px;
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 0.74rem;
  padding: 2px 0;
}

/* 選中的優先級要明顯 */
.quad-pick .qp.on { border-width: 2px; padding: 7px 9px; }
.quad-pick .qp.q1.on { background: #fef2f2; border-color: #dc2626; color: #b91c1c; font-weight: 700; }
.quad-pick .qp.q2.on { background: #fffbeb; border-color: #f59e0b; color: #b45309; font-weight: 700; }
.quad-pick .qp.q3.on { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; font-weight: 700; }
.quad-pick .qp.q4.on { background: #f3f4f6; border-color: #6b7280; color: #4b5563; font-weight: 700; }

/* 截止日 / 建立日 */
.due-chip {
  font-size: 0.68rem;
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
.todo-date { font-size: 0.68rem; color: var(--text2); flex: 0 0 auto; }

/* 復原提示 */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: #3d2c1e;
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--r-lg);
  font-size: 0.78rem;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 300;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  max-width: 90vw;
}
.undo-toast.on { display: flex; }
.undo-toast button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #ffd9a8;
  border-radius: var(--r-sm);
  padding: 3px 10px;
  font-size: 0.73rem;
}

/* 編輯/刪除按鈕 */
.edit-btn, .del-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 2px;
  flex-shrink: 0;
}
.del-btn { color: var(--text2); }

/* 編輯表單 */
.edit-form {
  flex-direction: column;
  align-items: stretch !important;
  gap: 8px !important;
}
.edit-form input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  width: 100%;
}
.edit-row {
  display: flex;
  gap: 8px;
}
.edit-row input { flex: 1; }
.edit-actions {
  display: flex;
  gap: 8px;
}
.edit-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.edit-actions button:last-child {
  background: #e5e5e5;
  color: var(--text2);
}

/* 空狀態 */
.card.empty {
  justify-content: center;
  color: var(--text2);
  font-size: 0.9rem;
}

/* 新增類別按鈕 */
.add-cat-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 1.1rem;
  color: var(--accent2);
  font-weight: 700;
}

/* 儀表板切換按鈕 */
.dash-btn {
  flex: 0 0 auto;
  padding: 8px 10px;
  color: #6c5ce7;
  font-weight: 700;
  border-left: 1px solid var(--border);
}

/* 項目日期 */
li .meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text2);
  margin-top: 2px;
}


/* === 2026 UI polish: refined visual hierarchy, touch targets, responsive layout === */
:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #24283b;
  --text2: #72788d;
  --accent: #f59e0b;
  --accent2: #c77708;
  --border: #e8eaf2;
  --danger: #dc4545;
  --success: #0f9f78;
  --shadow: 0 4px 18px rgba(33, 42, 74, .055);
  --shadow-hover: 0 8px 24px rgba(33, 42, 74, .10);
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  max-width: 560px;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 0% 0%, rgba(245, 158, 11, .08), transparent 38%),
    var(--bg);
  line-height: 1.5;
  letter-spacing: .01em;
}

main { padding: 0 16px; }

button, input, textarea, select {
  font: inherit;
}

button, a, .home-card, .cat-toggle, .quad-head-btn {
  touch-action: manipulation;
}

button {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(245, 158, 11, .42);
  outline-offset: 2px;
}

.tab-content h2 {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 20px 2px 12px;
}

.home-top {
  align-items: center;
  margin: 8px 2px 16px;
  gap: 10px;
}
.home-top h2 {
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: -.045em;
  color: var(--text);
}
.home-links { gap: 7px; }
.home-link {
  padding: 7px 10px;
  border: 1px solid rgba(232, 234, 242, .9);
  box-shadow: 0 2px 8px rgba(33, 42, 74, .035);
  font-size: .74rem;
}
.home-link:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }

.home-grid { gap: 12px; }
.home-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(232, 234, 242, .9);
  border-radius: 18px;
  padding: 16px;
  min-height: 104px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  opacity: 0;
  transition: opacity .18s ease;
}
.home-card:active { transform: scale(.985); }
.home-card:hover { box-shadow: var(--shadow-hover); border-color: #f3d9a7; }
.home-card:hover::after { opacity: 1; }
.home-card-expense { min-height: auto; }
.home-card-title {
  align-items: center;
  font-size: .94rem;
  letter-spacing: -.01em;
  margin-bottom: 9px;
}
.home-today { font-size: .7rem; }
.home-sum-row { gap: 8px; }
.home-sum {
  border: 1px solid #f0f1f6;
  border-radius: 12px;
  padding: 9px 8px;
  background: #f8f9fc;
}
.home-sum-label { font-size: .72rem; }
.home-sum b { font-size: clamp(.68rem, 3vw, .86rem); }
.home-sec-title { margin-top: 13px; font-size: .8rem; }
.home-line { font-size: .83rem; line-height: 1.65; }
.home-line b { font-weight: 750; }
.home-pos { color: #087f5b; }
.home-neg { color: #c83232; }

.pie-wrap { gap: 14px; }
.pie-svg { width: 98px; height: 98px; }
.pie-legend { gap: 6px; }
.pie-legend-item { font-size: .78rem; }

#nav {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 560px);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid rgba(225, 228, 238, .9);
  box-shadow: 0 -8px 28px rgba(33, 42, 74, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-btn {
  min-height: 46px;
  border-radius: 14px;
}
.nav-btn.active {
  background: #fff3d9;
  color: #9a5b00;
}
.nav-btn:not(.active):hover { background: #f6f7fb; }

#micBtn {
  min-height: 48px;
  border-radius: 14px;
  border-color: var(--border);
  box-shadow: var(--shadow);
  font-weight: 700;
}
#micBtn.listening { border-color: #dc4545; }

input, textarea, select {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  min-height: 42px;
}
input:focus, textarea:focus, select:focus {
  border-color: #f4bd55;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
  outline: none;
}

.card, .chart-box, .cat-stats, .pending-box, .quad {
  border-radius: 16px;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.month-nav-btn {
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
}
.cat-toggle {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
}
.edit-actions button, .edit-btn, .del-btn, .q-badge {
  min-height: 36px;
}
.undo-toast {
  bottom: calc(92px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-float);
}

#dashFrame {
  padding-bottom: env(safe-area-inset-bottom);
}
#dashIframe {
  border: 0;
  border-radius: 16px 16px 0 0;
}

@media (min-width: 600px) {
  body {
    margin: 18px auto;
    min-height: calc(100dvh - 36px);
    border: 1px solid #e9ebf2;
    border-radius: 24px;
    overflow-x: hidden;
    box-shadow: 0 18px 60px rgba(33, 42, 74, .08);
  }
  #nav {
    bottom: 18px;
    border: 1px solid rgba(225, 228, 238, .9);
    border-radius: 18px;
    width: min(calc(100% - 36px), 524px);
  }
}
@media (max-width: 360px) {
  main { padding: 0 12px; }
  .home-grid { gap: 8px; }
  .home-card { padding: 12px; border-radius: 15px; }
  .home-sum-row { gap: 5px; }
  .home-sum { padding: 7px 5px; }
  .home-today { font-size: .64rem; }
  .home-links { gap: 4px; }
  .home-link { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* === Search / backup / restore utilities === */
.utility-link {
  appearance: none;
  cursor: pointer;
  color: var(--text);
  background: #fff;
  font-family: inherit;
}
.utility-link:hover { background: #fff7e8; border-color: #f4cf88; }
.utility-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(7vh, 22px) 14px calc(24px + env(safe-area-inset-bottom));
  background: rgba(24, 29, 45, .48);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow-y: auto;
}
.utility-dialog {
  width: min(100%, 520px);
  max-height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
}
.utility-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.utility-dialog-head h2 { font-size:1.15rem; font-weight:850; letter-spacing:-.025em; }
.utility-close {
  width:38px; height:38px; flex:0 0 38px; border:0; border-radius:12px;
  background:#f2f4f8; color:#42485a; font-size:1.05rem; cursor:pointer;
}
#globalSearchInput { width:100%; padding:12px 14px; font-size:1rem; }
.global-search-results { overflow:auto; min-height:70px; }
.utility-hint { padding:20px 8px; color:var(--text2); text-align:center; font-size:.9rem; }
.utility-result-count { color:var(--text2); font-size:.78rem; padding:0 2px 8px; }
.global-result {
  display:flex; align-items:center; gap:11px; width:100%; padding:12px 8px;
  text-align:left; background:#fff; border:0; border-bottom:1px solid #edf0f5;
  border-radius:10px; color:inherit; cursor:pointer;
}
.global-result:hover, .global-result:focus-visible { background:#fff8e9; }
.global-result-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:12px; background:#fff2d6; }
.global-result-body { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.global-result-body b { font-size:.73rem; color:#a56a0b; }
.global-result-body span { font-size:.9rem; line-height:1.4; overflow-wrap:anywhere; }
.global-result-body small { color:var(--text2); font-size:.72rem; }
.global-result-arrow { color:#a0a6b5; font-size:1.4rem; }
.utility-notice {
  position:fixed; z-index:1100; left:50%; bottom:calc(90px + env(safe-area-inset-bottom));
  transform:translateX(-50%); width:max-content; max-width:calc(100% - 28px);
  padding:12px 16px; border-radius:14px; background:#20283a; color:#fff;
  font-size:.88rem; line-height:1.45; box-shadow:0 12px 32px rgba(20,27,44,.24);
}
.utility-notice.is-error { background:#9f2929; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.search-result-highlight { outline:3px solid #f4b942 !important; outline-offset:3px; background:#fff7df !important; transition:background .2s ease; }
#nav { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
#nav::-webkit-scrollbar { display:none; }
.nav-btn { flex:0 0 auto; white-space:nowrap; }
@media (max-width: 390px) {
  .home-top { align-items:flex-start; flex-direction:column; }
  .home-links { display:flex; flex-wrap:wrap; }
  .utility-dialog { padding:16px; border-radius:18px; }
}


/* === 底部導覽：等寬均分，不擁擠、不橫向捲動 === */
#nav {
  display: flex;
  align-items: stretch;
  gap: 3px;
  overflow: visible;
  padding-left: 8px;
  padding-right: 8px;
}
#nav .nav-btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  min-height: 50px;
  padding: 6px 2px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 12px;
  font-size: .66rem;
  line-height: 1.1;
}
#nav .nav-btn .nvi {
  font-size: 1.02rem;
  line-height: 1.1;
}
#nav .nav-btn .nvl {
  font-size: .66rem;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nav .nav-btn.add-cat-btn .nvi { font-size: 1.15rem; }


/* === 首頁頂部：標題＋搜尋同一排；捷徑單排不換行 === */
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.home-top h2 {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-search {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
}
.home-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 4px;
  margin-top: 8px;
}
.home-links::-webkit-scrollbar { display: none; }
.home-links .home-link {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .72rem;
  padding: 5px 9px;
}
@media (max-width: 390px) {
  .home-top { flex-direction: row; align-items: center; }
  .home-links { flex-wrap: nowrap; }
}

/* 日記：換下一則 */
.dt-next-row { display: flex; justify-content: flex-start; margin: 4px 0 0; }
.dt-next {
  border: 0;
  background: transparent;
  color: var(--text2);
  font-size: .72rem;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === 內嵌 SVG 圖示（不依賴 emoji 字型）=== */
.ico { display: inline-block; vertical-align: -3px; flex: none; }
#nav .nav-btn .nvi { display: flex; align-items: center; justify-content: center; }
#nav .nav-btn .nvi svg { width: 21px; height: 21px; vertical-align: 0; }
#nav .nav-btn.add-cat-btn .nvi svg { width: 21px; height: 21px; }
.home-card-title .ico { vertical-align: -3px; margin-right: 4px; }
.home-top h2 .ico { vertical-align: -4px; margin-right: 4px; }
.home-link .ico, .home-search .ico { margin-right: 3px; vertical-align: -2px; }
.home-sec-title .ico { margin-right: 4px; vertical-align: -2px; }
.edit-btn .ico, .del-btn .ico { vertical-align: -3px; display: block; }
.global-result-icon .ico { vertical-align: -3px; }

/* 日記：新增按鈕（輸入框外右下角）與列表摘要 */
.diary-act-row { display: flex; justify-content: flex-end; margin-top: 8px; }
#diaryAddBtn {
  flex: 0 0 auto;
  padding: 9px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
#diaryAddBtn:active { filter: brightness(.94); }
li.diary-li .diary-summary {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* 待辦與日記：編輯／刪除圖示預設隱藏，點該項目才出現 */
li.todo-li .edit-btn, li.todo-li .del-btn,
li.diary-li .edit-btn, li.diary-li .del-btn { display: none; }
li.todo-li.acting .edit-btn, li.todo-li.acting .del-btn,
li.diary-li.acting .edit-btn, li.diary-li.acting .del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
li.todo-li.acting, li.diary-li.acting { background: #fffdf7; }

/* === 桌面版（≥900px）：首頁兩欄，不再是一條細長條 === */
@media (min-width: 900px) {
  body { max-width: 1040px; }
  main { padding: 0 24px; }
  .home-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .home-card-expense { grid-column: 1 / -1; }
  .home-links { flex-wrap: wrap; }
  #nav { padding-left: 24px; padding-right: 24px; }
  #nav .nav-btn { max-width: 160px; }
}

/* ===== 奶油日常（方案 C）日記頁：奶油白卡片、心情 chips、統計、AI 回顧 ===== */
.diary-cream {
  background: linear-gradient(180deg, #FFFBF4 0%, #FFF6EA 62%, rgba(255,251,244,0) 100%);
  border-radius: 26px;
  padding: 14px 14px 16px;
  margin: 0 0 8px;
}
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 12px; }
.dc-stats { display: flex; align-items: center; gap: 9px; font-size: .74rem; color: var(--text3); }
.dc-stats b { color: #2B2A28; font-size: .98rem; font-weight: 700; margin-right: 2px; }
.dc-stats i { width: 1px; height: 11px; background: #EFE3D2; display: block; }
.diary-cream .dc-ai-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: #fff; color: #B4791F;
  font-size: .74rem; font-weight: 700; padding: 8px 13px;
  border-radius: var(--r-sm); cursor: pointer;
  box-shadow: var(--shadow-card);
}
.dc-moods { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 2px 12px; overflow: hidden; }
.diary-cream .dc-mood {
  flex: 0 0 auto; border: 1.5px solid #E8DAC4; background: #fff; color: #9A9082;
  font-size: .82rem; font-weight: 500; padding: 8px 15px; border-radius: var(--r-md);
  cursor: pointer; line-height: 1;
}
.diary-cream .dc-mood.on {
  background: #EFAF58 !important; border-color: #DE9832 !important; color: #fff !important;
  font-weight: 700; box-shadow: 0 5px 14px rgba(239,175,88,.42);
}

/* 分享單篇 */
li.diary-li .share-btn { display: none; }
li.diary-li.acting .share-btn { display: inline-flex; align-items: center; justify-content: center; }
li.diary-li .share-btn svg { display: block; }
.diary-cream .diary-box {
  background: #fff; border: 1px solid #F7EBDA; border-radius: 22px;
  box-shadow: 0 10px 26px rgba(170,140,100,.10);
  padding: 14px 14px 4px;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
}
.diary-cream #addText {
  border: 0; background: transparent; font-size: 1rem; line-height: 1.95;
  min-height: 285px;
  overflow-y: auto !important;
  /* 2026-11-03 修「無法下拉」：編輯區原本 contain，手指在紙面上滑動時
     手勢被吃掉、不會傳給頁面，導致下面的歷史日記看不到。改 auto 讓捲動接力到整頁。 */
  overscroll-behavior: auto;
}
.diary-cream .diary-act-row { margin-top: 12px; }
.diary-cream #diaryAddBtn {
  background: #EFAF58; border-radius: var(--r-sm); padding: 11px 32px;
  box-shadow: var(--shadow-card);
}

/* AI 回顧面板 */
.dc-ai { position: fixed; inset: 0; z-index: 9999; display: none; }
.dc-ai.show { display: block; }
.dc-ai-mask { position: absolute; inset: 0; background: rgba(43,42,40,.34); }
.dc-ai-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 84vh;
  background: #FFFBF4; border-radius: 26px 26px 0 0;
  display: flex; flex-direction: column;
  padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-float);
}
.dc-ai-head { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; color: #2B2A28; }
.dc-ai-close { font-size: 1rem; color: #8A8378; padding: 4px 8px; cursor: pointer; }
.dc-ai-chips { display: flex; gap: 7px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.dc-ai-chips::-webkit-scrollbar { display: none; }
.dc-chip {
  flex: none; border: 1px solid #F1E4D2; background: #fff; color: #8A8378;
  font-size: .74rem; padding: 7px 13px; border-radius: 999px; cursor: pointer;
}
.dc-ai-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 10px; }
.dc-ai-msg { max-width: 90%; font-size: .86rem; line-height: 1.85; padding: 11px 14px; border-radius: 16px; color: #2B2A28; }
.dc-ai-msg.user { align-self: flex-end; background: #EFAF58; color: #fff; border-bottom-right-radius: 6px; }
.dc-ai-msg.ai { align-self: flex-start; background: #fff; border: 1px solid #F7EBDA; box-shadow: 0 6px 16px rgba(170,140,100,.08); border-bottom-left-radius: 6px; }
.dc-cite { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #F1E4D2; font-size: .68rem; color: #A79C8B; }
.dc-hint { color: #A79C8B; font-size: .72rem; }
.dc-wait { color: #A79C8B; }
.dc-ai-in { display: flex; gap: 8px; padding-top: 8px; }
.dc-ai-in input { flex: 1; border: 1px solid #F1E4D2; background: #fff; border-radius: var(--r-sm); padding: 11px 15px; font-size: .86rem; }
.dc-ai-in button { border: 0; background: #EFAF58; color: #fff; font-weight: 700; border-radius: var(--r-sm); padding: 0 20px; font-size: .86rem; cursor: pointer; }
.dc-ai-keybox { display: flex; gap: 8px; }
.dc-ai-keybox input { flex: 1; border: 1px solid #F1E4D2; border-radius: 12px; padding: 9px 12px; font-size: .8rem; }
.dc-ai-keybox button { border: 0; background: #2B2A28; color: #fff; border-radius: 12px; padding: 0 15px; font-size: .8rem; cursor: pointer; }
@media (min-width: 900px) {
  .dc-ai-card { left: auto; right: 24px; bottom: 24px; width: 440px; max-height: 72vh; border-radius: 26px; }
}

/* ===== 圖文混合日記：閱讀模式（2026-10-30）===== */
li.diary-li .read-btn { display: none; }
li.diary-li.acting .read-btn { display: inline-flex; align-items: center; justify-content: center; }
li.diary-li .read-btn svg { display: block; }

.dc-read { position: fixed; inset: 0; z-index: 9998; display: none; }
.dc-read.show { display: block; }
.dc-read-mask { position: absolute; inset: 0; background: rgba(43,42,40,.36); }
.dc-read-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh;
  background: #FFFBF4; border-radius: 26px 26px 0 0;
  display: flex; flex-direction: column;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-float);
}
.dc-read-head { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; color: #2B2A28; padding-bottom: 8px; }
.dc-read-close { color: #8A8378; padding: 4px 8px; cursor: pointer; }
.dc-read-body { flex: 1; overflow-y: auto; padding: 4px 2px 8px; }
.dc-read-body p { font-size: .95rem; line-height: 1.95; color: #2B2A28; margin: 0 0 12px; }
.dm-empty { color: #A79C8B; }
.dm-fig { margin: 4px 0 16px; }
.dm-fig img {
  display: block; width: 100%; height: auto; max-height: 60vh; object-fit: cover;
  border-radius: 16px; background: #F3E7D6;
}
.dm-cap {
  margin-top: 7px; font-size: .78rem; color: #8A8378; line-height: 1.7;
  border-left: 2px solid #EFD3A6; padding-left: 8px; cursor: text;
}
.dm-cap.empty { color: #BEB3A2; font-style: normal; }
.dm-tools { display: flex; gap: 6px; margin-top: 8px; }
.dm-tools button {
  border: 1px solid #F0E3D0; background: #fff; color: #8A8378;
  font-size: .72rem; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; min-height: 32px;
}
.dm-tools button:active { background: #FFF6E8; }
@media (min-width: 900px) {
  .dc-read-card { left: auto; right: 24px; bottom: 24px; width: 560px; max-height: 80vh; border-radius: 26px; }
}

/* ===== 日記內嵌圖文編輯器（圖片直接在文字之間）===== */
.diary-cream #addText.dc-edit {
  display: block; white-space: pre-wrap; word-break: break-word;
  overflow-y: visible !important; max-height: none !important;
  outline: none; padding: 2px 0 6px;
}
.diary-cream #addText.dc-edit:empty::before {
  content: attr(data-ph); color: #BEB3A2; pointer-events: none;
}
.dc-edit .ed-fig { margin: 10px 0 14px; }
.dc-edit .ed-fig img {
  display: block; width: 100%; height: auto; max-height: 62vh; object-fit: cover;
  border-radius: 14px; background: #F3E7D6;
}
.dc-edit .ed-cap {
  margin-top: 6px; font-size: .78rem; line-height: 1.7; color: #8A8378;
  border-left: 2px solid #EFD3A6; padding-left: 8px; min-height: 1.1em; outline: none;
}
.dc-edit .ed-cap:empty::before { content: '點一下寫圖片說明'; color: #BEB3A2; }
.dc-edit .ed-cap[data-vcap]:empty::before { content: '點一下寫影片說明'; color: #BEB3A2; }

/* ===== 日記列表：卡片／月份分組／搜尋（2026-10-30 吸收他版優點）===== */
.dsearch { margin: 4px 0 6px; }
.dsearch-box { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #F1E4D2; border-radius: var(--r-md); padding: 9px 14px; color: #A79C8B; }
.dsearch-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0; font-size: .9rem; color: var(--text); }
.dfilters { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 2px; }
.dfilters::-webkit-scrollbar { display: none; }
.dfilter { flex: none; border: 1px solid #F1E4D2; background: #fff; color: #8A8378; font-size: .71rem; padding: 5px 9px; border-radius: 999px; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.dfilter.on { background: #EFAF58; border-color: #DE9832; color: #fff; font-weight: 700; }

.dmon-head { display: flex; align-items: center; gap: 8px; margin: 16px 4px 8px; font-size: .84rem; font-weight: 700; color: #8A8378; cursor: pointer; user-select: none; }
.dmon-head .n { font-weight: 500; font-size: .74rem; opacity: .85; }
.dmon-head .caret { margin-left: auto; font-size: .8rem; }

li.diary-li.dcard {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0;
  align-items: start; padding: 14px; margin-bottom: 10px; border-radius: 18px;
  border: 1px solid #F7EBDA; background: #fff; box-shadow: 0 6px 18px rgba(170,140,100,.10);
  position: relative;
}
.dcard-date { grid-column: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; padding: 7px 0; border-radius: 14px; background: rgba(239,175,88,.16); color: #B4791F; line-height: 1.1; }
.dcard-date b { font-size: 1.25rem; font-weight: 700; }
.dcard-date span { font-size: .66rem; margin-top: 2px; }
.dcard-main { grid-column: 2; min-width: 0; }
.dcard-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .72rem; min-height: 24px; }
.dcard-time { font-variant-numeric: tabular-nums; opacity: .7; }
.dcard-mood { padding: 2px 8px; border-radius: var(--r-xs); font-weight: 600; font-size: .7rem; }
.dcard-mood.m-xi { background: #FFF1D1; color: #B4791F; }
.dcard-mood.m-nu { background: #FFE3DF; color: #C0392B; }
.dcard-mood.m-ai { background: #E3EDFB; color: #3F6FB5; }
.dcard-mood.m-le { background: #FFE8F1; color: #C2477F; }
.dcard-mood.m-calm { background: #E3F4EA; color: #3E8F63; }
.dcard-tags { opacity: .8; letter-spacing: .5px; }
.dcard-more { margin-left: auto; border: 0; background: transparent; color: inherit; opacity: .55; font-size: 1.15rem; line-height: 1; padding: 2px 8px; min-height: 28px; cursor: pointer; }
.dcard-text { margin-top: 4px; font-size: .93rem; line-height: 1.7; color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.dcard-text.is-empty { opacity: .45; }
.dcard-thumb { grid-column: 3; position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #F3E7D6; }
.dcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard-thumb i { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.55); color: #fff; font-style: normal; font-size: .62rem; padding: 1px 6px; border-radius: 999px; }
.dcard-acts { display: none; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #F1E4D2; }
li.diary-li.dcard.acting .dcard-acts { display: flex; }
/* 就地展開的那一則才顯示下方工具列（刪除／修改…）2026-10-30 */
li.diary-li.dcard.expanded .dcard-acts { display: flex; }
li.diary-li.dcard.expanded { background: #FFFDF7; }
li.diary-li.dcard.acting { background: #FFFDF7; }
.dact { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #FFF6E8; color: #8A8378; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dact:active { background: #FBE7C6; }
.dact-del { color: #c0392b; }

/* ===== 日記影片（2026-10-30）===== */
.dc-edit .ed-vid video { display: block; width: 100%; max-height: 62vh; border-radius: 14px; background: #000; }
.dt-vthumb .dt-vph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #2B2A28; color: #fff; font-size: 20px; font-style: normal; }
.dt-vthumb .dt-vdur { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 6px; text-decoration: none; }
.dm-vfig video { display: block; width: 100%; max-height: 62vh; border-radius: 16px; background: #000; }

/* 同日多篇合併、心情只顯示表情（2026-10-30） */
.dcard-emo { font-style: normal; font-size: .82rem; line-height: 1; margin-top: 3px; display: block; letter-spacing: -1px; }
.dgroup-n { font-size: .72rem; opacity: .7; }
.dgroup .dcard-main { display: block; }
.drow { padding: 8px 0; border-top: 1px dashed #F1E4D2; }
.drow:first-of-type { border-top: 0; padding-top: 2px; }
.drow-head { display: flex; align-items: center; gap: 6px; font-size: .72rem; min-height: 18px; margin-bottom: 2px; }
.drow-time { font-variant-numeric: tabular-nums; opacity: .7; }
.drow .dcard-text { margin-top: 2px; -webkit-line-clamp: 2; }
.drow .dcard-acts { display: none; justify-content: flex-end; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 0; }
li.dgroup.acting .drow .dcard-acts { display: flex; }
.drow.expanded .dcard-acts { display: flex; }
.drow.expanded { background: #FFFDF7; }

/* 日記屬性（敘事／觀察／心得／反思／抒懷）2026-10-30 */
.diary-cream .dc-kinds { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 2px 12px; overflow: hidden; }
.diary-cream .dc-kinds-lbl { font-size: .72rem; color: #A2968400; color: #A29684; flex: none; letter-spacing: .04em; }
.diary-cream .dc-kind { flex: none; background: #fff; color: #9A9082; border: 1.5px solid #E8DAC4; border-radius: 999px;
  font-size: .72rem; padding: 5px 10px; line-height: 1.2; font-weight: 500; cursor: pointer; }
.diary-cream .dc-kind.on { background: #8FA98A !important; border-color: #7A9575 !important; color: #fff !important; font-weight: 700;
  box-shadow: 0 4px 12px rgba(143,169,138,.35); }
.dcard-kind { display: inline-block; font-size: .66rem; line-height: 1.35; padding: 1px 7px; border-radius: 999px;
  background: #EFF3EC; color: #6E8A68; border: 1px solid #DFE7D9; vertical-align: middle; white-space: nowrap; }
.dflt-lbl { flex: none; font-size: .7rem; color: #A29684; }
.dkfilter { flex: none; border: 1px solid #F1E4D2; background: #fff; color: #8A8378; font-size: .71rem; padding: 5px 9px;
  border-radius: 999px; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.dkfilter.on { background: #8FA98A; border-color: #7A9575; color: #fff; font-weight: 700; }
.dkfilters { padding-top: 0; align-items: center; }

/* 標題列＋迷你搜尋（2026-10-30） */
.h2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h2-row h2 { margin: 0; }
.dsearch-mini { display: flex; align-items: center; gap: 5px; flex: 0 1 132px; min-width: 84px;
  border: 1px solid #F1E4D2; background: #fff; border-radius: var(--r-md); padding: 4px 10px; }
.dsearch-mini svg { flex: none; opacity: .5; }
.dsearch-mini input { border: 0; outline: 0; background: transparent; font-size: .78rem; width: 100%; min-width: 0;
  padding: 1px 0; color: inherit; }
.dsearch-mini input::-webkit-search-cancel-button { transform: scale(.85); }

/* 搜尋與篩選走清爽路線（2026-10-30）：平時只有放大鏡，篩選併成一列 */
.h2-row { align-items: center; }
.h2-row h2 { flex: none; }
.dsearch-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 1 1 auto; min-width: 0; border-radius: var(--r-md);}
.dsearch-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 0; background: transparent; color: #A29684; border-radius: 50%; cursor: pointer; }
.dsearch-toggle:active { background: #F6EEE2; }
.dsearch-wrap input { width: 0; min-width: 0; opacity: 0; padding: 0; border: 0; background: transparent; color: inherit;
  font-size: .84rem; outline: none; transition: width .18s ease, opacity .14s ease; }
.dsearch-wrap.open input { width: 132px; opacity: 1; padding: 3px 0 4px; border-bottom: 1px solid #E8DAC4; }
.dsearch-wrap.open input::placeholder { color: #B7AC9C; }
.dsearch-wrap input::-webkit-search-cancel-button { transform: scale(.8); }
.dbar { padding: 6px 0 2px; }
.dbar-row { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dbar-row::-webkit-scrollbar { display: none; }
.dbar-sep { flex: none; width: 1px; height: 14px; background: #EADFCB; margin: 0 3px; }
.dbar .dfilter { flex: none; border: 0; background: transparent; color: #8A8378; font-size: .95rem; line-height: 1;
  padding: 6px 7px; border-radius: 999px; cursor: pointer; }
.dbar .dfilter.on { background: #FBEEDC; color: #C8811F; box-shadow: inset 0 0 0 1px #F0D9B4; }
.dbar .dkfilter { flex: none; border: 0; background: transparent; color: #8A8378; font-size: .74rem; line-height: 1;
  padding: 6px 8px; border-radius: 999px; cursor: pointer; }
.dbar .dkfilter.on { background: #EFF3EC; color: #5F7C59; box-shadow: inset 0 0 0 1px #DCE5D6; font-weight: 700; }

/* 日記搜尋：輸入框在左、放大鏡在右；篩選列隱藏（2026-10-30） */
.h2-row { display: flex; align-items: center; gap: 10px; }
.h2-row h2 { flex: none; margin: 0; }
.dsearch-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.dsearch-wrap input { width: 100%; min-width: 0; opacity: 1; padding: 3px 0 4px; border: 0;
  border-bottom: 1px solid #E8DAC4; background: transparent; color: inherit; font-size: .84rem; outline: none; }
.dsearch-wrap input::placeholder { color: #B7AC9C; }
.dsearch-toggle { flex: none; width: 28px; height: 28px; }
.dbar { display: none !important; }

/* 搜尋中：收起輸入卡片，結果直接顯示在標題下方 */
.tab-content.searching .add-form { display: none !important; }
.tab-content.searching #itemList { margin-top: 2px; }

/* 日記搜尋框：正常的膠囊輸入框，左輸入右放大鏡；屬性篩選列恢復（2026-10-30） */
.h2-row { display: flex; align-items: center; gap: 12px; }
.h2-row h2 { flex: none; margin: 0; }
.dsearch-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0;
  border: 1px solid #EBDFCC; border-radius: 999px; background: #fff; padding: 0 4px 0 12px; height: 34px; }
.dsearch-wrap input { flex: 1 1 auto; min-width: 0; width: auto; opacity: 1; height: 100%; padding: 0; border: 0;
  background: transparent; color: inherit; font-size: .84rem; outline: none; }
.dsearch-wrap input::placeholder { color: #B7AC9C; }
.dsearch-toggle { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #A29684; border-radius: 50%; padding: 0; cursor: pointer; }
.dsearch-toggle:active { background: #F6EEE2; }
.dbar { display: block !important; padding: 8px 0 2px; }
.dbar-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dbar-row::-webkit-scrollbar { display: none; }
.dbar .dkfilter { flex: none; border: 1px solid #EDE0CB; background: #fff; color: #8A8378; font-size: .74rem;
  line-height: 1; padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.dbar .dkfilter.on { background: #EFF3EC; border-color: #D6E0CF; color: #5F7C59; font-weight: 700; }

/* 修正：搜尋輸入框溢出膠囊（全域 input 樣式把高度撐到 42px）2026-10-30 */
.h2-row { position: relative; z-index: 2; }
.dsearch-wrap { height: 34px; min-height: 34px; padding: 0 3px 0 12px; overflow: hidden; box-sizing: border-box; }
.dsearch-wrap input,
.dsearch-wrap input[type="search"],
.dsearch-wrap input[type="text"] {
  height: 30px !important; min-height: 0 !important; max-height: 30px !important; line-height: 30px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important; box-sizing: border-box !important;
  font-size: .82rem !important; vertical-align: middle;
}
.dsearch-toggle { height: 28px !important; width: 28px !important; }

/* 搜尋列 v2（新類名 dsw，隔離所有舊全域 input 樣式）2026-10-30 */
.dsw { flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center !important;
  height: 34px !important; box-sizing: border-box !important; overflow: hidden;
  border: 1px solid #EBDFCC !important; border-radius: var(--r-sm) !important; background: #fff !important; padding: 0 3px 0 12px !important; }
.dsw .dsw-in, input.dsw-in, input.dsw-in[type="text"] {
  -webkit-appearance: none !important; appearance: none !important;
  flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
  height: 30px !important; min-height: 0 !important; max-height: 30px !important; line-height: 30px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important;
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; border-radius: 0 !important; box-sizing: border-box !important;
  color: #6B6355 !important; font-size: .84rem !important; font-family: inherit !important; }
.dsw .dsw-in::-webkit-search-decoration, .dsw .dsw-in::-webkit-search-cancel-button,
.dsw .dsw-in::-webkit-search-results-button, .dsw .dsw-in::-webkit-search-results-decoration { -webkit-appearance: none !important; display: none !important; }
.dsw .dsw-in::placeholder { color: #B7AC9C !important; }
.dsw .dsw-btn, button.dsw-btn {
  -webkit-appearance: none !important; appearance: none !important;
  flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 28px !important; height: 28px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 50% !important;
  color: #A29684 !important; cursor: pointer; }
.dsw .dsw-btn:active { background: #F6EEE2 !important; }

/* 習慣（舊版）內嵌 2026-10-30 */
.lh-wrap { display: flex; flex-direction: column; gap: 8px; }
.lh-bar { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #8A8378; padding: 0 2px; }
.lh-bar a { color: #5F7C59; text-decoration: none; font-size: .78rem; border-bottom: 1px solid rgba(95,124,89,.35); }
#hbLegacy { width: 100%; height: calc(100vh - 132px); min-height: 460px; border: 0; background: #fff; }
/* ==== 日記影片改以 YouTube 嵌入呈現（不公開），跨裝置也看得到（2026-10-30） ==== */
.dm-yt, .ed-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.dm-yt iframe, .ed-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ed-vmiss { padding: 18px 12px; text-align: center; font-size: 13px; color: #8b7d6b; background: #f7f1e6; border-radius: 12px; }
/* ==== 日記卡片就地展開：點卡片直接看整篇（不用載入上方輸入框）2026-10-30 ==== */
.dcard-full { margin-top: 8px; }
.dcard-full .dm-body, .dcard-full .dm-mixed { margin: 0; }
li.dcard.expanded .dcard-text { display: none; }
.drow.expanded .dcard-text { display: none; }
.drow.expanded { border-top: 1px dashed rgba(140,120,90,.25); }
.dcard-full figure, .dcard-full .dm-fig { margin: 8px 0; }
.dcard-full img, .dcard-full video { max-width: 100%; border-radius: 10px; }
.dcard-full .dm-yt { margin: 8px 0; }
/* ==== YouTube 乾淨播放：未播前只有封面＋播放鍵，沒有任何 YouTube 字樣（2026-10-30） ==== */
.yt-lite { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.yt-lite.playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-lite-cover { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
  background-color: #1c1a17; background-size: cover; background-position: center; display: block; }
.yt-lite-cover::after { content: ''; position: absolute; inset: 0; background: rgba(20,16,10,.18); }
.yt-lite-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; background: rgba(255,252,245,.94); box-shadow: 0 6px 22px rgba(0,0,0,.35); z-index: 2; }
.yt-lite-play::before { content: ''; position: absolute; left: 24px; top: 19px; border-style: solid;
  border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #8fae7a; }
.yt-lite-cover:active .yt-lite-play { transform: scale(.95); }
/* ==== 照片／影片長按選單（取代常駐工具列）2026-10-30 ==== */
.dm-fig img, .dm-vfig video { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.dm-menu { position: fixed; z-index: 9998; background: #fffdf7; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding: 6px; display: flex; flex-direction: column; min-width: 132px; }
.dm-menu button { border: 0; background: transparent; text-align: left; padding: 10px 14px; font-size: 14px; color: #4b3f2f; border-radius: 10px; }
.dm-menu button:active { background: #f1e7d6; }
.dm-menu .dm-menu-del { color: #b4564a; }


/* ===== 心情滑選＋便箋紙感（2026-11-01 前賢指定參考 Tiny Type）===== */
.dc-mood-row { display: flex; align-items: center; padding: 0 2px 12px; }
.dc-mood-open {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid #E8DAC4; background: #fff; border-radius: 999px;
  padding: 6px 14px 6px 7px; cursor: pointer;
  box-shadow: var(--shadow-card);
}
.dc-mood-open.on { border-color: #EFAF58; }
.dc-mood-face { width: 26px; height: 26px; display: block; line-height: 0; }
.dc-mood-lbl { font-size: .84rem; font-weight: 600; color: #9A9082; }
.dc-mood-open.on .dc-mood-lbl { color: #DE9832; font-weight: 700; }

#dcMoodSheet { position: fixed; inset: 0; z-index: 9999; display: none; }
#dcMoodSheet.show { display: block; }
.dc-mood-mask { position: absolute; inset: 0; background: rgba(40,32,24,.30); }
.dc-mood-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #FFFDF7; border-radius: 26px 26px 0 0;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 34px rgba(80,60,40,.20);
  animation: dcMoodUp .46s cubic-bezier(.22,1.35,.36,1);
}
@keyframes dcMoodUp {
  0% { transform: translateY(64px); opacity: .4; }
  70% { transform: translateY(-5px); opacity: 1; }
  100% { transform: none; }
}
.dc-mood-title {
  text-align: center; font-size: 1.10rem; font-weight: 800; color: #4A4034; letter-spacing: .08em;
  transform-origin: center; will-change: transform;
}
.dc-mood-title.pop { animation: dcTitlePop .44s cubic-bezier(.34,1.56,.64,1); }
@keyframes dcTitlePop { 0% { transform: scale(.86); opacity: .5; } 55% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.dc-mood-arc { width: 100%; height: 150px; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.dc-mood-node { cursor: pointer; }
.dc-mood-node .nd-face {
  transform-origin: center;
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
  will-change: transform;
}
.dc-mood-node.on .nd-face { transform: scale(1.34) translateY(-5px); }
.dc-mood-node:not(.on) .nd-face { opacity: .55; }
.dc-mood-ok {
  display: block; width: 100%; margin-top: 20px; padding: 15px;
  border: 0; border-radius: 16px; background: #221C16; color: #FFFDF7;
  font-size: .98rem; font-weight: 700; letter-spacing: .10em; cursor: pointer;
}
.dc-mood-ok:active { transform: scale(.99); }

/* 便箋紙感 */
.dc-paper { position: relative; }
.dc-paper-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 6px; }
.dc-paper-title { font-size: .72rem; letter-spacing: .20em; color: #C0B39C; font-weight: 700; }
.dc-paper-date { font-size: .70rem; color: var(--text3); }
.diary-cream .dc-paper #addText.dc-edit {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #F1E7D8 27px, #F1E7D8 28px);
  background-position: 0 4px; line-height: 28px;
}
.dc-paper-sign { display: flex; justify-content: flex-end; align-items: center; gap: 5px; padding: 4px 6px 0; font-size: .66rem; color: #C7BAA4; }
.dc-paper-sign svg { width: 20px; height: 20px; opacity: .85; }

/* 便箋右上圓形工具鍵（2026-11-01 前賢指定）*/
.diary-cream .dc-paper .dc-tools-fab,
.dc-paper .dc-tools-fab {
  position: absolute !important; top: 6px !important; right: 6px !important; z-index: 3 !important;
  width: 36px !important; height: 36px !important; min-width: 34px !important; min-height: 34px !important;
  padding: 0 !important; box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 1.5px solid #EFE3D2 !important; background: #fff !important; color: #C0A279 !important;
  font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 12px rgba(160,130,90,.18) !important; cursor: pointer !important;
  transition: transform .16s ease, background .16s ease !important;
}
.dc-paper .dc-tools-fab:active { transform: scale(.94) !important; }
.dc-paper.tools-open .dc-tools-fab { background: #EFAF58 !important; border-color: #DE9832 !important; color: #fff !important; }
#diaryTools { display: block !important; }   /* 2026-11-01 前賢：工具列正常顯示，另外用齒輪開設定選單 */

/* 便箋署名：名字＋小字（2026-11-01 參考圖）*/
.dc-paper-sign { align-items: center !important; gap: 6px !important; padding: 6px 8px 2px !important; }
.dc-paper-sign .dc-sign-col { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.dc-paper-sign .dc-sign-col b { font-size: .68rem; font-weight: 700; color: #B9AA92; letter-spacing: .04em; }
.dc-paper-sign .dc-sign-col i { font-size: .56rem; font-style: normal; color: #D2C6B1; letter-spacing: .02em; }

/* 便箋設定選單（直排浮動，2026-11-01）*/
#dcMenu { position: fixed; inset: 0; z-index: 9998; }
#dcMenu .dc-menu-mask { position: absolute; inset: 0; background: rgba(40,32,24,.14); }
#dcMenu .dc-menu-card {
  position: absolute; top: 90px; right: 14px;
  display: flex; flex-direction: column; min-width: 132px;
  background: #FFFDF7; border-radius: 16px; padding: 6px;
  box-shadow: 0 14px 34px rgba(80,60,40,.24);
  animation: dcMenuIn .16s ease-out;
}
@keyframes dcMenuIn { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
#dcMenu .dc-menu-card button {
  border: 0; background: transparent; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  font-size: .90rem; color: #3A322A; font-weight: 600; letter-spacing: .03em;
}
#dcMenu .dc-menu-card button svg { flex: 0 0 auto; opacity: .82; }
#dcMenu .dc-menu-card button.on svg { opacity: 1; }
#dcMenu .dc-menu-card button.danger { color: #B4564A; }
#dcMenu .dc-menu-card button.danger svg { opacity: .9; }
#dcMenu .dc-menu-card button:active { background: #F6EEDF; }
.dcard-pin, .dcard-lock { font-size: .78rem; margin-left: 2px; }

/* 心情滑選：彈絲手感（2026-11-01 前賢指定）*/
#dcMoodArc { cursor: grab; }
#dcMoodArc:active { cursor: grabbing; }
.dc-mood-panel { will-change: transform; }

/* 日記「好了」鈕（2026-11-02 前賢：移到工具列右上角）*/
.diary-cream .diary-act-row #diaryAddBtn,
.diary-cream #diaryAddBtn,
#diaryAddBtn {
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 13px !important;
  background: linear-gradient(135deg, #FFDDB0 0%, #F7B368 55%, #EF9C4C 100%) !important;
  color: #6B4A22 !important;
  font-size: .82rem !important; font-weight: 800 !important; letter-spacing: .06em !important;
  line-height: 1 !important;
  box-shadow: 0 3px 9px rgba(239,156,76,.30), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .18s ease !important;
}
#diaryAddBtn:active {
  transform: scale(.95) !important;
  box-shadow: 0 4px 12px rgba(239,156,76,.28) !important;
  filter: brightness(.98) !important;
}

/* 便箋日期標在右上方（2026-11-01 前賢指定）*/
.dc-paper .dc-paper-date {
  position: absolute !important; top: 16px !important; right: 18px !important;
  font-size: .70rem !important; color: var(--text3) !important; letter-spacing: .08em !important;
  font-weight: 600 !important; pointer-events: none !important;
}

/* 心情按鈕移到便箋輸入框下方（2026-11-01 前賢指定）*/
.dc-paper .dc-mood-row { margin: 6px 0 2px !important; justify-content: flex-start !important; padding-left: 2px !important; }

/* 表情節點平常只秀臉，移到（選中）該表情才出現文字（2026-11-01 前賢指定）*/
.dc-mood-node .nd-lbl { opacity: 0; transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1); transform: translateY(-4px); }
.dc-mood-node.on .nd-lbl { opacity: 1; transform: none; }

/* 心情滑桿：浮起貓臉 thumb 沿弧線彈性移動（2026-11-01 前賢指定，照參考 App 動態）*/
.dc-mood-thumb { transition: transform .52s cubic-bezier(.34,1.56,.64,1); }
.dc-mood-thumb .halo {
  fill: #fff; stroke: #F2E6D3; stroke-width: 1.2;
  filter: drop-shadow(0 8px 16px rgba(180,150,110,.30));
}
.dc-mood-thumb .thumb-face { pointer-events: none; }
.dc-mood-thumb .nd-lbl { opacity: 1; transition: opacity .2s ease; }
.dc-mood-node .tick { fill: #DFD2BC; transition: fill .25s ease, r .25s cubic-bezier(.34,1.56,.64,1); }
.dc-mood-node.on .tick { fill: #DE9832; }
.dc-mood-node .hit { cursor: pointer; }

/* thumb 縮小上浮，避免遮住相鄰刻度（2026-11-01 前賢回報開心檔會遮到）*/
.dc-mood-thumb .halo { filter: drop-shadow(0 6px 12px rgba(180,150,110,.26)) !important; }
.dc-mood-arc { height: 168px !important; }

/* 軌道上用五個表情的縮小版，上方另有放大版（2026-11-01 前賢指定）*/
.dc-mood-node .mini { opacity: .5; transition: opacity .22s ease; }
.dc-mood-node.on .mini { opacity: 1; }

/* 心情貼圖（拉布拉多幼犬）*/
.mood-img { display: block; object-fit: contain; -webkit-user-drag: none; }
.dc-mood-face .mood-img { border-radius: 0; }
.dc-mood-node .mini image { pointer-events: none; }

/* 軌道刻度＝簡單筆畫線條臉；選中才換成真實狗貼圖（2026-11-01 前賢指定）*/
.dc-mood-node .mini { opacity: .45; }
.dc-mood-node.on .mini { opacity: .18; }   /* 選中那格被真實照片蓋住，只留極淡底 */
.dc-mood-arc { height: 182px !important; }

/* 真實表情直接坐在軌道上，蓋住該格簡筆臉（2026-11-01 前賢指定）*/
.dc-mood-thumb { z-index: 5; }
.dc-mood-arc .dc-mood-thumb .thumb-face image { filter: drop-shadow(0 2px 4px rgba(120,95,70,.18)); }

/* 軌道整體上移：縮掉弧線上方空白，並讓按鈕與軌道留出呼吸 */

/* ===== 2026-11-01 前賢：便箋一頁收完＋心情鈕置中無底 ===== */
/* 1) 心情鈕：只有狗狗表情，置中、去背景 */
.dc-paper .dc-mood-row {
  justify-content: center !important;
  margin: 0 !important; padding: 0 !important; min-height: 0 !important;
}
.dc-paper .dc-mood-open {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; gap: 0 !important; border-radius: 0 !important;
}
.dc-paper .dc-mood-open .dc-mood-lbl { display: none !important; }
.dc-paper .dc-mood-open .dc-mood-face,
.dc-paper .dc-mood-open .dc-mood-face .mood-img { width: 36px !important; height: 36px !important; }
.dc-paper .dc-mood-open:active { transform: scale(.94); }

/* 2) 內縮：輸入區、工具列、便箋留白一起收，讓「標題→好了」一頁到底不用捲 */
.diary-cream .dc-paper #addText.dc-edit {
  min-height: clamp(200px, calc(100dvh - 500px), 440px) !important;
  line-height: 26px !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 25px, #F1E7D8 25px, #F1E7D8 26px) !important;
  background-position: 0 3px !important;
  padding: 0 0 4px !important;
}
.diary-cream .dc-paper { padding: 10px 12px 6px !important; }
#diaryTools { padding: 0 4px !important; }
#diaryTools .dt-row, #diaryTools > * { min-height: 0 !important; }
.dc-paper .dc-paper-head { padding: 0 2px 2px !important; }

/* 2026-11-01 前賢：YouTube 開頭不要字樣 → 載入期間用封面蓋住，開始播放才掀開 */
.yt-lite.loading iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-lite .yt-lite-cover.loading { z-index: 4; cursor: default; }
.yt-lite .yt-lite-cover.loading .yt-lite-play,
.yt-lite .yt-lite-cover.loading::after { display: none; }
.yt-lite.started .yt-lite-cover { display: none; }

/* ===== 2026-11-02 前賢：「好了」移到工具列右上角（最後一條橫線下方），書寫區拿回完整寬度 ===== */
.dc-ed-wrap { position: relative; }
.dt-bar { grid-template-columns: repeat(9, 1fr) auto !important; }
.diary-cream .dc-paper #addText.dc-edit { padding-right: 0 !important; padding-bottom: 6px !important; }
.diary-cream .add-form { padding-bottom: 6px !important; }

/* ===== 2026-11-02 前賢：狗狗心情表情一律圓形遮罩、遮罩外透明（不鋪白底）===== */
/* 2026-11-03 前賢：頭像改大頭特寫＋去背後，圓形遮罩會切掉耳朵與下巴 → 取消圓形裁切 */
.mood-img {
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  object-fit: contain !important;
  overflow: visible !important;
}
.dc-mood-thumb .halo {
  fill: transparent !important;
  stroke: none !important;
}

/* ===== 2026-11-02 前賢：屬性索引貼／屬性列收合／心情文字／影片放大 ===== */

/* 1) 便箋上方屬性列：平常收起，點搜尋框才滑出 */
.diary-cream .dc-kinds {
  max-height: 0 !important; opacity: 0 !important; overflow: hidden !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  pointer-events: none;
  transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .26s ease, padding .3s ease;
}
.diary-cream .dc-kinds.show {
  max-height: 64px !important; opacity: 1 !important;
  padding-top: 2px !important; padding-bottom: 12px !important;
  pointer-events: auto;
}

/* 2) 每則日記右側「索引貼」屬性標籤 */
li.diary-li.dcard { position: relative; padding-right: 32px; }
.dk-tabs {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 3;
}
.dk-tab {
  border: 0; cursor: pointer; padding: 0; margin: 0;
  width: 22px; height: 22px; border-radius: 7px;
  font-size: .62rem; font-weight: 700; line-height: 22px; text-align: center;
  background: #EFE6D6; color: #6F6353; opacity: .3;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1),
              background .3s ease, color .3s ease, box-shadow .3s ease;
}
.dk-tab.on {
  opacity: 1 !important; color: #fff !important;
  background: #8FA98A !important;
  transform: translateX(-3px) scale(1.06);
  box-shadow: 0 3px 8px rgba(122,149,117,.38);
}
.dk-tabs:active .dk-tab { transform: scale(.94); }
.dk-tab:active { transform: scale(.88) !important; }
.drow { position: relative; padding-right: 28px; }
.drow .dk-tabs { right: 2px; gap: 2px; }
.drow .dk-tab { width: 18px; height: 18px; line-height: 18px; font-size: .58rem; border-radius: 6px; }
.drow .dk-tab.on { transform: translateX(-2px) scale(1.04); }

/* 3) 心情面板：狗狗下方不要心情文字 */
.dc-mood-thumb .nd-lbl { display: none !important; }

/* 4) 影片播放器放大：當前撰寫與歷史日記都吃滿卡片寬 */
.dc-edit .ed-vid video, .dc-edit .ed-fig video {
  width: 100% !important; max-height: 76vh !important;
  border-radius: 14px !important; background: #000;
}
.dm-vfig video, .dcard-full video {
  width: 100% !important; max-height: 76vh !important;
  border-radius: 14px !important; background: #000;
}
.dm-vfig, .dcard-full, .dcard-main, .dcard-text { min-width: 0; }
.dm-vfig .yt-lite, .dm-vfig .dm-yt { width: 100% !important; }

/* ===== 2026-11-02 前賢：主頁 UI 美化（一眼看清、數字放大、進場絲滑）===== */
.home-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-sub { font-size: .72rem; color: var(--text2); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-ver { margin-left: 8px; opacity: .55; font-size: .66rem; }
.home-top h2 { line-height: 1.15; }

/* 連結列：統一顆粒感，圖示退到次要層 */
.home-links { gap: 6px; }
.home-link {
  border-radius: 12px; padding: 7px 11px; gap: 5px;
  font-weight: 650; letter-spacing: .01em;
  border: 1px solid rgba(232, 234, 242, .9);
}
.home-link svg { opacity: .72; }

/* 收支三格：金額放大、標籤縮成小字，對齊一眼掃讀 */
.home-sum { padding: 9px 10px !important; gap: 3px; }
.home-sum-label { font-size: .66rem !important; letter-spacing: .06em; opacity: .85; }
.home-sum b { font-size: clamp(.92rem, 4.2vw, 1.16rem) !important; letter-spacing: -.02em; font-weight: 800; }

/* 卡片標題層級＋內容行距 */
.home-card-title { font-size: .9rem !important; margin-bottom: 10px; }
.home-card-title svg { opacity: .8; }
.home-line { line-height: 1.7; }
.home-card { min-height: 100px; }

/* 進場：由上往下依序浮起（尊重減少動態偏好） */
@keyframes homeCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-grid > .home-card { animation: homeCardIn .44s cubic-bezier(.22,.61,.36,1) backwards; }
.home-grid > .home-card:nth-child(1) { animation-delay: .02s; }
.home-grid > .home-card:nth-child(2) { animation-delay: .07s; }
.home-grid > .home-card:nth-child(3) { animation-delay: .12s; }
.home-grid > .home-card:nth-child(4) { animation-delay: .17s; }
.home-grid > .home-card:nth-child(5) { animation-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .home-grid > .home-card { animation: none; }
}

/* 展開那一則時，內容區跨滿卡片（影片才吃得滿版寬而不是被左側日期欄擠窄） */
li.diary-li.dcard.expanded .dcard-date { grid-row: 1; }
li.diary-li.dcard.expanded .dcard-main { grid-column: 1 / -1; }
li.diary-li.dcard.expanded .dcard-full { margin-right: 0; }
li.diary-li.dcard.expanded .dm-vfig video,
li.diary-li.dcard.expanded .dm-vfig .yt-lite { border-radius: 16px; }

/* 首頁連結列：自成一行、由左排起（原本靠右會被裁掉第一顆） */
@media (max-width: 560px) {
  .home-links {
    width: 100%; margin-left: 0; overflow-x: visible !important;
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  }
  .home-links .home-link { justify-content: center; width: 100%; box-sizing: border-box; }
}
.home-sum b { font-variant-numeric: tabular-nums; }

/* ===== 2026-11-02 前賢（第二版）：便箋右側上方固定五種屬性；歷史日記只顯示一種 ===== */

/* 便箋（當前編輯）：五種屬性直排在便箋右側上方，選中的 100%、其餘 45% */
.dc-paper { position: relative; }
.dc-paper .dc-kinds {
  position: absolute !important; top: 46px; right: 7px;
  display: flex !important; flex-direction: column; gap: 5px;
  max-height: none !important; opacity: 1 !important;
  padding: 0 !important; margin: 0 !important; overflow: visible !important;
  pointer-events: auto; z-index: 5;
}
.dc-paper .dc-kinds-lbl { display: none !important; }
.dc-paper .dc-kind {
  width: 30px !important; padding: 5px 0 !important; margin: 0 !important;
  font-size: .62rem !important; line-height: 1.1 !important; text-align: center;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid #EADFCB !important;
  color: #A29684 !important; font-weight: 600 !important;
  opacity: .45;
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1),
              background .28s ease, color .28s ease, border-color .28s ease;
}
.dc-paper .dc-kind.on {
  opacity: 1; background: #8FA98A !important; border-color: #7A9575 !important;
  color: #fff !important; transform: translateX(-2px) scale(1.05);
}
.diary-cream .dc-paper #addText.dc-edit { padding-right: 40px !important; }

/* 歷史日記：右側只留一種屬性（沒設定 → 心得） */
li.diary-li.dcard { padding-right: 44px; }
.dk-tabs { right: 7px; gap: 0; }
.dk-tab {
  width: auto !important; height: 24px !important; line-height: 24px !important;
  padding: 0 8px !important; border-radius: 8px !important;
  font-size: .62rem !important; font-weight: 700;
  opacity: 1 !important; background: #8FA98A !important; color: #fff !important;
  transform: none !important; box-shadow: 0 2px 7px rgba(122,149,117,.32) !important;
  cursor: default;
}
.drow { padding-right: 38px; }
.drow .dk-tabs { right: 3px; }
.drow .dk-tab { height: 21px !important; line-height: 21px !important; font-size: .58rem !important; }

/* 篩選列（全部／敘事／觀察…）平常收起，點搜尋框才滑出（2026-11-02 前賢：正常時候隱藏） */
.dbar {
  max-height: 0; opacity: 0; overflow: hidden;
  padding-top: 0 !important; padding-bottom: 0 !important;
  transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .26s ease, padding .3s ease;
}
.dbar.show {
  max-height: 64px; opacity: 1;
  padding-top: 2px !important; padding-bottom: 6px !important;
}

/* ===== 2026-11-02 前賢（第三版）：五種屬性標籤移到便箋「外側」右邊，便箋讓出空間 ===== */
.add-form.diary-cream .add-row { gap: 7px; align-items: stretch; }
.add-form.diary-cream .add-row > .diary-box.dc-paper { flex: 1 1 auto; min-width: 0; }
.add-form.diary-cream .add-row > .dc-kinds {
  position: static !important;
  flex: 0 0 30px !important; width: 30px !important; min-width: 30px !important;
  display: flex !important; flex-direction: column !important; gap: 5px;
  max-height: none !important; opacity: 1 !important;
  padding: 0 !important; margin: 46px 0 0 !important;
  overflow: visible !important; pointer-events: auto; z-index: auto !important;
}
.add-form.diary-cream .add-row > .dc-kinds .dc-kinds-lbl { display: none !important; }
.add-form.diary-cream .add-row > .dc-kinds .dc-kind {
  width: 30px !important; padding: 6px 0 !important; margin: 0 !important;
  font-size: .62rem !important; line-height: 1.1 !important; text-align: center;
  border-radius: 8px !important;
  background: #FFFFFF !important; border: 1px solid #EADFCB !important;
  color: #A29684 !important; font-weight: 600 !important; opacity: .5;
  box-shadow: 0 1px 3px rgba(160,140,110,.10);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1),
              background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.add-form.diary-cream .add-row > .dc-kinds .dc-kind.on {
  opacity: 1; background: #8FA98A !important; border-color: #7A9575 !important;
  color: #fff !important; transform: translateX(-2px) scale(1.05);
  box-shadow: 0 3px 9px rgba(122,149,117,.32);
}
/* 標籤已在框外，書寫區不必再留避讓空間 */
.diary-cream .dc-paper #addText.dc-edit { padding-right: 6px !important; }

/* ===== 2026-11-02 前賢（第四版）===== */

/* 1) 歷史日記屬性標籤：固定貼在內容「開頭處」（不隨展開/圖片垂直居中亂跑） */
li.diary-li.dcard > .dk-tabs { top: 10px !important; transform: none !important; }
.drow > .dk-tabs { top: 2px !important; transform: none !important; }
.dk-tab.on { transform: none !important; }

/* 2) 影片播放視窗加大：依原生比例縮放（豎片吃高度、橫片吃寬度），不再被 16:9 壓成一條 */
.dc-edit .ed-vid video, .dc-edit .ed-fig video,
.dm-vfig video, .dcard-full video {
  display: block; margin: 0 auto;
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 78vh !important;
  min-height: 170px;
  aspect-ratio: auto !important;
  border-radius: 14px !important; background: #000;
}
/* YouTube 播放視窗：維持 16:9 自然比例，但橫向吃滿卡片可用寬（高度隨之變大） */
.dcard-full .yt-lite, .dm-vfig .yt-lite { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; }
/* 展開時內容區橫向吃滿卡片（連左側日期欄、右側標籤留白都拿回來） */
li.diary-li.dcard.expanded .dcard-main { grid-column: 1 / -1; }
li.diary-li.dcard.expanded .dcard-full { margin-left: -27px; margin-right: -41px; }
@media (max-width: 420px) {
  li.diary-li.dcard.expanded .dcard-full { margin-left: -22px; margin-right: -36px; }
}

/* 2026-11-02 前賢：日記不要心情的文字描述（面板滑桿下方「平靜／喜樂」等字一併隱藏，只留狗臉） */
.dc-mood-lbl, #dcMoodLbl { display: none !important; }
/* 心情名稱文字拿掉後，弧形區與確認鈕間距收緊（不留一塊空） */
.dc-mood-arc { height: 150px !important; margin-bottom: -4px !important; }

/* 2026-11-02 前賢：文字不可以超出日記卡片邊框 → 只有影片吃滿，文字留在框內 */
li.diary-li.dcard.expanded .dcard-full { margin-left: 0 !important; margin-right: 0 !important; }
li.diary-li.dcard.expanded .dcard-full .dm-vfig,
li.diary-li.dcard.expanded .dcard-full .dm-vlist,
li.diary-li.dcard.expanded .dcard-full .dm-vsingle,
li.diary-li.dcard.expanded .dcard-full .yt-lite,
li.diary-li.dcard.expanded .dcard-full video {
  margin-left: -12px !important; margin-right: -12px !important;
}
@media (max-width: 420px) {
  li.diary-li.dcard.expanded .dcard-full .dm-vfig,
  li.diary-li.dcard.expanded .dcard-full .dm-vlist,
  li.diary-li.dcard.expanded .dcard-full .dm-vsingle,
  li.diary-li.dcard.expanded .dcard-full .yt-lite,
  li.diary-li.dcard.expanded .dcard-full video {
    margin-left: -8px !important; margin-right: -8px !important;
  }
}
/* 便箋與卡片內文一律不橫向溢出 */
.dc-edit, .dcard-text, .dcard-full { overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; }

/* 心情面板：換表情不要卡（GPU 合成＋避免重排）2026-11-02 */
.dc-mood-arc { contain: paint; }
.dc-mood-node, .dc-mood-node .mood-img, #dcMoodFace img {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* contain:paint 會把耳朵／下巴裁掉（2026-11-03 前賢回報頭形被遮） */
.dc-mood-thumb { contain: layout style; }

/* ===== 2026-11-02 前賢：插入圖片可選「拍照／相簿」 ===== */
.dt-cam-menu {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(40, 34, 26, .34);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dt-cam-menu.show { opacity: 1; pointer-events: auto; }
.dt-cam-sheet {
  width: 100%; background: #FFFDF7;
  border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(80, 60, 40, .20);
  transform: translateY(16px); transition: transform .28s cubic-bezier(.22,1.2,.36,1);
}
.dt-cam-menu.show .dt-cam-sheet { transform: none; }
.dt-cam-grab {
  width: 40px; height: 4px; border-radius: 999px; background: #E3D9C8;
  margin: 4px auto 10px;
}
.dt-cam-opt {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: #FFF; border: 1px solid #EFE6D6; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  font-family: inherit; text-align: left;
}
.dt-cam-opt:active { background: #FBF6EC; }
.dt-cam-opt span { font-size: .95rem; font-weight: 700; color: #4A4136; }
.dt-cam-opt i { font-style: normal; font-size: .72rem; color: #A29684; }
.dt-cam-cancel {
  width: 100%; border: 0; background: transparent; color: #8A7F70;
  font-family: inherit; font-size: .86rem; padding: 8px 0 2px; cursor: pointer;
}

/* ===== 拍照後編輯（旋轉／裁切）2026-11-02 ===== */
.ppe { position: fixed; inset: 0; z-index: 9999; background: rgba(30,24,18,.72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.ppe-card { width: 100%; max-width: 460px; background: #FFFDF7; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 48px rgba(40,30,20,.35); display: flex; flex-direction: column; }
.ppe-head { padding: 12px 14px 8px; text-align: center; font-size: .95rem; font-weight: 800; color: #4A4034; letter-spacing: .06em; }
.ppe-stage { position: relative; margin: 0 12px; border-radius: 12px; overflow: hidden; background: #241f19; display: flex; align-items: center; justify-content: center; touch-action: none; }
.ppe-img { display: block; max-width: 100%; max-height: 56vh; user-select: none; -webkit-user-drag: none; }
.ppe-crop { position: absolute; border: 2px solid #EFAF58; box-shadow: 0 0 0 9999px rgba(20,16,12,.45); cursor: move; touch-action: none; }
.ppe-crop .ppe-h { position: absolute; width: 22px; height: 22px; background: #EFAF58; border: 3px solid #fff; border-radius: 50%; }
.ppe-crop .ppe-h.nw { left: -11px; top: -11px; cursor: nwse-resize; }
.ppe-crop .ppe-h.ne { right: -11px; top: -11px; cursor: nesw-resize; }
.ppe-crop .ppe-h.sw { left: -11px; bottom: -11px; cursor: nesw-resize; }
.ppe-crop .ppe-h.se { right: -11px; bottom: -11px; cursor: nwse-resize; }
.ppe-tools { display: flex; gap: 8px; padding: 12px 12px 4px; }
.ppe-tools button { flex: 1; padding: 9px 0; border-radius: 12px; border: 1.5px solid #E8DAC4; background: #fff; color: #4A4034; font-size: .86rem; font-weight: 700; }
.ppe-tools button:active { background: #F5ECDD; }
.ppe-foot { display: flex; gap: 10px; padding: 12px; }
.ppe-foot button { flex: 1; padding: 12px 0; border-radius: 14px; font-size: .95rem; font-weight: 800; border: 0; }
.ppe-cancel { background: #F1E7D6; color: #6B5C4A; }
.ppe-ok { background: #EFAF58; color: #3A2B18; box-shadow: 0 6px 16px rgba(239,175,88,.35); }

/* 2026-11-02 軌道五格統一用狗頭圖 */
.dc-mood-node .mini { opacity: .92; }
.dc-mood-node.on .mini { opacity: 0; }

/* 2026-11-02 前賢：直式（Shorts）影片放大顯示，不要縮在 16:9 的框裡 */
.yt-lite.yt-v{
  aspect-ratio: 9 / 16 !important;
  width: min(100%, calc(78vh * 9 / 16)) !important;
  max-height: none !important;
  margin: 8px auto !important;
  border-radius: 16px !important;
  background: #100e0b !important;
}
.yt-lite.yt-v .yt-lite-cover{ background-size: cover !important; background-position: center top !important; }
.yt-lite.yt-v .yt-lite-play{ width: 66px !important; height: 66px !important; margin: -33px 0 0 -33px !important; }

/* 2026-11-02 前賢：語音轉寫後的「AI 潤稿」小籤 */
.dt-polish{
  position: absolute; right: 10px; bottom: 46px; z-index: 6;
  border: 1px solid var(--border); background: #FFF9F0; color: #B4791F;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  padding: 6px 12px; border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.dt-polish:disabled{ opacity: .6; }
.dt-polish:active{ transform: scale(.96); }

/* 2026-11-02 前賢：日記背景多款（熱門／紙紋／可愛／風景／夜色） */
.dcbg-dark{ color:#f5f0e6; }
.dcbg-dark .dc-paper-title,.dcbg-dark .dc-paper-date{ color:#efe6d6; }
.dcbg-dark{ --text2:#e9e2d5; }

/* 熱門：柔和漸層 */
.dcbg-sunx{ background:linear-gradient(160deg,#fff8ea,#ffe7c2) !important; }
.dcbg-cream{ background:linear-gradient(160deg,#fffaf2,#f4e6d2) !important; }
.dcbg-mint2{ background:linear-gradient(160deg,#effcf5,#d3f0e2) !important; }
.dcbg-sky2{ background:linear-gradient(160deg,#eff6ff,#d7e8ff) !important; }
.dcbg-rose2{ background:linear-gradient(160deg,#fff3f6,#ffdce7) !important; }
.dcbg-lav{ background:linear-gradient(160deg,#f6f2ff,#e3dbff) !important; }
.dcbg-peach{ background:linear-gradient(160deg,#fff1e8,#ffd9c2) !important; }

/* 紙紋 */
.dcbg-lined{ background-color:#fffdf7 !important; background-image:repeating-linear-gradient(#fffdf7 0 26px,#e9e1cf 26px 27px) !important; }
.dcbg-gridpaper{ background-color:#fffdf7 !important; background-image:linear-gradient(#e7dfcc 1px,transparent 1px),linear-gradient(90deg,#e7dfcc 1px,transparent 1px) !important; background-size:16px 16px !important; }
.dcbg-dotpaper{ background-color:#fffdf7 !important; background-image:radial-gradient(#ddd0bb 1.2px,transparent 1.4px) !important; background-size:14px 14px !important; }
.dcbg-kraft{ background-color:#e3cdaa !important; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 2px,transparent 2px 6px) !important; }
.dcbg-ricepaper{ background-color:#fbf6ea !important; background-image:repeating-linear-gradient(90deg,rgba(178,156,124,.12) 0 1px,transparent 1px 7px),repeating-linear-gradient(0deg,rgba(178,156,124,.09) 0 1px,transparent 1px 9px) !important; }
.dcbg-letter{ background-color:#fffdf6 !important; background-image:repeating-linear-gradient(#fffdf6 0 27px,#e6ddc9 27px 28px),linear-gradient(90deg,transparent 0 30px,#e8b4ae 30px 31px,transparent 31px) !important; }
.dcbg-plaid{ background-color:#fff8f2 !important; background-image:repeating-linear-gradient(0deg,rgba(214,158,158,.34) 0 10px,transparent 10px 26px),repeating-linear-gradient(90deg,rgba(150,178,206,.30) 0 10px,transparent 10px 26px) !important; }
.dcbg-diag{ background-color:#f2fbf6 !important; background-image:repeating-linear-gradient(45deg,rgba(150,200,175,.28) 0 8px,transparent 8px 18px) !important; }

/* 可愛（向量小圖） */
.dcbg-stars{ background-color:#fffdf5 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><path d='M20 12l2.6 6.4L29 21l-6.4 2.6L20 30l-2.6-6.4L11 21l6.4-2.6z' fill='%23efca72' fill-opacity='.5'/><circle cx='62' cy='58' r='2.6' fill='%23f3d99a' fill-opacity='.55'/></svg>") !important; background-size:84px 84px !important; }
.dcbg-hearts{ background-color:#fffafb !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'><path d='M52 58C36 46 30 38 33 31c3-5.8 10.5-6.2 14.4-.7 3.9-5.5 11.4-5.1 14.4.7 3.4 6.9-2.4 15.2-10 26.9z' fill='%23f4b8c7' fill-opacity='.42'/></svg>") !important; background-size:92px 92px !important; }
.dcbg-clouds{ background-color:#f7fcff !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 108 108'><g fill='%23cfe6f7' fill-opacity='.55'><circle cx='34' cy='38' r='11'/><circle cx='48' cy='35' r='13'/><circle cx='61' cy='40' r='10'/><rect x='26' y='40' width='46' height='11' rx='5.5'/></g></svg>") !important; background-size:108px 108px !important; }
.dcbg-flowers{ background-color:#fffdf7 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='%23f3c3cf' fill-opacity='.45'><circle cx='48' cy='34' r='6'/><circle cx='60' cy='44' r='6'/><circle cx='55' cy='57' r='6'/><circle cx='41' cy='57' r='6'/><circle cx='36' cy='44' r='6'/></g><circle cx='48' cy='46' r='5' fill='%23f2d071' fill-opacity='.6'/></svg>") !important; background-size:96px 96px !important; }
.dcbg-paws{ background-color:#fffdf9 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='%23e0b79c' fill-opacity='.45'><circle cx='32' cy='30' r='4.4'/><circle cx='41' cy='26' r='4.4'/><circle cx='50' cy='30' r='4.4'/><circle cx='56' cy='38' r='4.4'/><ellipse cx='43' cy='46' rx='10' ry='8'/></g></svg>") !important; background-size:90px 90px !important; }
.dcbg-bears{ background-color:#fffdf8 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'><g fill='%23d9b28e' fill-opacity='.40'><circle cx='36' cy='32' r='7'/><circle cx='62' cy='32' r='7'/><circle cx='49' cy='44' r='16'/></g><g fill='%235c4433' fill-opacity='.35'><circle cx='43' cy='42' r='2.2'/><circle cx='55' cy='42' r='2.2'/><circle cx='49' cy='49' r='2.6'/></g></svg>") !important; background-size:104px 104px !important; }

/* 風景 */
.dcbg-dawn{ background:linear-gradient(180deg,#fff6ea,#e9eff7 58%,#cdd9e8) !important; }
.dcbg-sea{ background:linear-gradient(180deg,#eaf7ff,#cfe9f7 52%,#f6f0e2 52%,#efe6d3) !important; }
.dcbg-sunset{ background:linear-gradient(180deg,#ffe9c9,#ffc9a8 46%,#e9a9a0) !important; }
.dcbg-forest3{ background:linear-gradient(180deg,#eef8ee,#d5ebd8 56%,#c2ddc8) !important; }
.dcbg-snow{ background:linear-gradient(180deg,#f9fcff,#e9f1fa) !important; }

/* 夜色 */
.dcbg-starry{ background-color:#1e2433 !important; background-image:radial-gradient(#f6f1d8 1.2px,transparent 1.4px),radial-gradient(#cfe0ff 1px,transparent 1.2px) !important; background-size:54px 54px,32px 32px !important; background-position:0 0,17px 23px !important; color:#f6f1e4 !important; }
.dcbg-night2{ background:linear-gradient(160deg,#2b2f3a,#1b1f26) !important; color:#f5f0e6 !important; }




/* 網格（純色 + 格子） */
.dcbg-solidcream{ background:#fdf8f0 !important; }
.dcbg-solidblush{ background:#fdf1f2 !important; }
.dcbg-solidsage{ background:#f1f6ef !important; }
.dcbg-gridsky{ background-color:#f7fbff !important; background-image:linear-gradient(rgba(150,180,214,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,214,.26) 1px,transparent 1px) !important; background-size:18px 18px !important; }
.dcbg-gridrose{ background-color:#fff8f9 !important; background-image:linear-gradient(rgba(219,166,178,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(219,166,178,.26) 1px,transparent 1px) !important; background-size:18px 18px !important; }
.dcbg-gridgrey{ background-color:#faf9f6 !important; background-image:linear-gradient(rgba(160,155,145,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(160,155,145,.24) 1px,transparent 1px) !important; background-size:34px 34px !important; }
.dcbg-gridlattice{ background-color:#fbfaf6 !important; background-image:repeating-linear-gradient(45deg,rgba(170,160,140,.22) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(170,160,140,.22) 0 1px,transparent 1px 22px) !important; }
.dcbg-gridink{ background-color:#22262e !important; background-image:linear-gradient(rgba(200,215,235,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(200,215,235,.16) 1px,transparent 1px) !important; background-size:22px 22px !important; color:#eef2f7 !important; }

/* 自然 */
.dcbg-leaf{ background-color:#fbfdf8 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'><path d='M30 26c14-6 26 2 26 14 0 12-12 20-26 14-3-10-3-18 0-28z' fill='%2378a878' fill-opacity='.28'/><path d='M30 26c8 6 12 12 14 22' stroke='%236b9c6b' stroke-opacity='.35' stroke-width='1.4' fill='none'/><path d='M72 62c10-4 18 2 18 10 0 8-8 13-18 10-2-7-2-13 0-20z' fill='%238abf8a' fill-opacity='.24'/></svg>") !important; background-size:104px 104px !important; }
.dcbg-vine{ background-color:#fcfefa !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><path d='M6 92C24 74 20 56 34 44c12-10 30-8 40-22' stroke='%2389b489' stroke-opacity='.45' stroke-width='1.6' fill='none'/><g fill='%238dbd8d' fill-opacity='.35'><ellipse cx='26' cy='56' rx='6' ry='3.4' transform='rotate(-28 26 56)'/><ellipse cx='44' cy='40' rx='6' ry='3.4' transform='rotate(24 44 40)'/><ellipse cx='62' cy='30' rx='6' ry='3.4' transform='rotate(-18 62 30)'/></g></svg>") !important; background-size:96px 96px !important; }
.dcbg-fern{ background-color:#fafdf7 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g stroke='%237fae7f' stroke-opacity='.38' stroke-width='1.4' fill='none' stroke-linecap='round'><path d='M18 74c10-16 18-30 34-42'/><path d='M26 62l-8-4M32 53l-9-5M38 44l-9-5M45 36l-9-5M52 30l-8-5'/><path d='M30 58l4-8M38 48l4-8M45 39l5-8'/></g></svg>") !important; background-size:90px 90px !important; }
.dcbg-bamboo{ background-color:#1d3a2c !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='86' height='86' viewBox='0 0 86 86'><g stroke='%239fcbb0' stroke-opacity='.42' stroke-width='5' stroke-linecap='round'><path d='M24 8v30M24 46v32'/><path d='M60 14v24M60 44v34'/></g><g stroke='%239fcbb0' stroke-opacity='.30' stroke-width='1.4'><path d='M24 30h14M60 38h-14'/></g></svg>") !important; background-size:86px 86px !important; color:#eef6ef !important; }
.dcbg-grassfield{ background:linear-gradient(180deg,#f7fdf3 0 58%,#dcefd4 58%,#c7e3bd 100%) !important; }
.dcbg-maple{ background-color:#fdf6ef !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><path d='M36 30l5 8 9-4-3 9 9 4-9 4 3 9-9-4-5 8-5-8-9 4 3-9-9-4 9-4-3-9 9 4z' fill='%23d98a5a' fill-opacity='.30'/><path d='M70 62l4 6 7-3-2 7 7 3-7 3 2 7-7-3-4 6-4-6-7 3 2-7-7-3 7-3-2-7 7 3z' fill='%23c9774a' fill-opacity='.24'/></svg>") !important; background-size:96px 96px !important; }
.dcbg-mountmist{ background:linear-gradient(180deg,#f4f8fb 0 46%,#e2ecf2 46%,#cfdde6 78%,#bfcfd9 100%) !important; }
.dcbg-fallenleaf{ background-color:#fdfaf3 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'><g fill='%23c9a06a' fill-opacity='.30'><ellipse cx='30' cy='28' rx='9' ry='4.4' transform='rotate(22 30 28)'/><ellipse cx='74' cy='54' rx='9' ry='4.4' transform='rotate(-32 74 54)'/><ellipse cx='46' cy='82' rx='9' ry='4.4' transform='rotate(12 46 82)'/></g><g fill='%23a8bd8e' fill-opacity='.28'><ellipse cx='86' cy='22' rx='8' ry='4' transform='rotate(48 86 22)'/><ellipse cx='18' cy='66' rx='8' ry='4' transform='rotate(-14 18 66)'/></g></svg>") !important; background-size:112px 112px !important; }

/* 節慶 */
.dcbg-halloween{ background-color:#2a2130 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'><g fill='%23e8913c' fill-opacity='.55'><ellipse cx='34' cy='42' rx='14' ry='12'/><rect x='31' y='30' width='6' height='7' rx='2'/></g><path d='M70 34c8-6 18-6 26 0-8 2-10 8-18 8-6 0-8-4-8-8z' fill='%239b7fc4' fill-opacity='.55'/><circle cx='30' cy='42' r='2' fill='%232a2130'/><circle cx='39' cy='42' r='2' fill='%232a2130'/></svg>") !important; background-size:104px 104px !important; color:#f6ecdd !important; }
.dcbg-ghost{ background-color:#f5f2ff !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><path d='M40 20c10 0 16 7 16 16v18c-4-4-8-4-12 0-4-4-8-4-12 0-4-4-8-4-12 0V36c0-9 6-16 20-16z' fill='%23d9cff5' fill-opacity='.75'/><circle cx='34' cy='36' r='1.8' fill='%23786aa0'/><circle cx='44' cy='36' r='1.8' fill='%23786aa0'/></svg>") !important; background-size:96px 96px !important; }
.dcbg-xmas{ background-color:#b8242f !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'><g stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'><path d='M24 18v14M17 25h14M45 49v14M38 56h14'/></g><circle cx='64' cy='64' r='2.2' fill='%23ffffff' fill-opacity='.5'/></svg>") !important; background-size:88px 88px !important; color:#fff6ee !important; }
.dcbg-xmas2{ background-color:#16402f !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'><g stroke='%23f2f7ef' stroke-opacity='.5' stroke-width='1.5' stroke-linecap='round'><path d='M28 20v14M21 27h14M58 54v14M51 61h14'/></g><path d='M66 22l3 7 7 3-7 3-3 7-3-7-7-3 7-3z' fill='%23d8e9c6' fill-opacity='.5'/></svg>") !important; background-size:92px 92px !important; color:#f4f7f0 !important; }
.dcbg-cny{ background-color:#b3261e !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23f0c463' stroke-opacity='.55' stroke-width='2'><circle cx='33' cy='33' r='11'/><circle cx='74' cy='70' r='9'/></g><g fill='%23f0c463' fill-opacity='.5'><circle cx='70' cy='26' r='2.4'/><circle cx='22' cy='72' r='2.4'/></g></svg>") !important; background-size:100px 100px !important; color:#fff3d8 !important; }
.dcbg-lantern{ background-color:#fff5e6 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94'><g fill='%23e8703f' fill-opacity='.38'><ellipse cx='40' cy='42' rx='13' ry='15'/><rect x='36' y='25' width='8' height='4' rx='2'/><rect x='36' y='56' width='8' height='4' rx='2'/><rect x='39' y='59' width='2' height='8'/></g></svg>") !important; background-size:94px 94px !important; }
.dcbg-confetti{ background-color:#fffdf7 !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='86' height='86' viewBox='0 0 86 86'><rect x='18' y='20' width='9' height='4' rx='2' fill='%23e88b8b' fill-opacity='.55' transform='rotate(24 22 22)'/><rect x='52' y='14' width='9' height='4' rx='2' fill='%238bb6e8' fill-opacity='.55' transform='rotate(-15 56 16)'/><rect x='30' y='54' width='9' height='4' rx='2' fill='%23e8c98b' fill-opacity='.6' transform='rotate(40 34 56)'/><rect x='62' y='50' width='9' height='4' rx='2' fill='%239fd6b4' fill-opacity='.6' transform='rotate(-30 66 52)'/><circle cx='44' cy='34' r='2.6' fill='%23c8a8e8' fill-opacity='.55'/></svg>") !important; background-size:86px 86px !important; }
.dcbg-year26{ background-color:#f8f5ee !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><text x='60' y='72' font-family='Helvetica,Arial' font-size='30' font-weight='700' fill='%23c9bba3' fill-opacity='.35' text-anchor='middle' transform='rotate(-18 60 60)'>2026</text></svg>") !important; background-size:120px 120px !important; }

/* 舊資料相容（先前 8 款） */
.dcbg-sun{ background:linear-gradient(160deg,#fff8ea,#ffe7c2) !important; }
.dcbg-sky{ background:linear-gradient(160deg,#eff6ff,#d7e8ff) !important; }
.dcbg-mint{ background:linear-gradient(160deg,#effcf5,#d3f0e2) !important; }
.dcbg-rose{ background:linear-gradient(160deg,#fff3f6,#ffdce7) !important; }
.dcbg-sand{ background:linear-gradient(160deg,#fffaf2,#f4e6d2) !important; }
.dcbg-night{ background:linear-gradient(160deg,#2b2f3a,#1b1f26) !important; color:#f5f0e6 !important; }
.dcbg-forest{ background:linear-gradient(180deg,#eef8ee,#d5ebd8 56%,#c2ddc8) !important; }

/* 背景選擇面板 */
.dc-bgsheet{ position:fixed; inset:0; z-index:9997; background:rgba(28,22,16,.30); opacity:0; pointer-events:none; transition:opacity .18s; }
.dc-bgsheet.on{ opacity:1; pointer-events:auto; }
.dc-bgsheet-box{ position:absolute; left:0; right:0; bottom:0; background:#FFFDF7; border-radius:18px 18px 0 0; box-shadow:0 -12px 30px rgba(0,0,0,.20); padding:10px 12px calc(14px + env(safe-area-inset-bottom)); transform:translateY(14px); transition:transform .2s; }
.dc-bgsheet.on .dc-bgsheet-box{ transform:translateY(0); }
.dc-bghd{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 8px; }
.dc-bghd b{ font-size:.92rem; color:var(--text); }
.dc-bghd button{ border:0; background:transparent; color:#B4791F; font-weight:700; font-size:.86rem; padding:6px 8px; }
.dc-bgtabs{ display:flex; gap:4px; overflow-x:auto; padding:0 2px 8px; scrollbar-width:none; }
.dc-bgtabs::-webkit-scrollbar{ display:none; }
.dc-bgtabs button{ flex:0 0 auto; border:1px solid var(--border); background:#fff; color:var(--text2); font-size:.72rem; font-weight:600; padding:5px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.dc-bgtabs button.on{ background:#3d2c1e; border-color:#3d2c1e; color:#fff; }
.dc-bggrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:46vh; overflow-y:auto; padding:2px; }
.dc-bgcell{ position:relative; aspect-ratio:1/1; border-radius:12px; border:1px solid rgba(0,0,0,.07); background:#fffdf7; overflow:hidden; padding:0; }
.dc-bgcell span{ position:absolute; left:0; right:0; bottom:0; font-size:.62rem; color:#6b5b46; background:linear-gradient(transparent,rgba(255,253,247,.88) 58%); padding:9px 0 3px; text-align:center; letter-spacing:.02em; }
.dc-bgcell.dcbg-dark span{ color:#efe7d8; background:linear-gradient(transparent,rgba(18,16,13,.74) 58%); }
.dc-bgcell.on{ outline:2px solid #B4791F; outline-offset:1px; }

/* 2026-11-02 前賢：日記背景（生成圖檔版，assets/bg/*.webp） */
.dcbg-pic-cream{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/cream.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-blush{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/blush.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-rice{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/rice.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-lined{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/lined.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-grid{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/grid.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-kraft{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/kraft.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-leaf{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/leaf.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-mist{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/mist.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-bear{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/bear.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-paw{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/paw.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-halloween{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/halloween.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-xmas{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/xmas.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-lake{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/lake.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-sunset{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/sunset.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-starry{ background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/bg/starry.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; color:#f3ece1 !important; }
.dcbg-pic-ink{ background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/bg/ink.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; color:#f3ece1 !important; }
.dcbg-c-cream{ background:#fdf8f0 !important; }
.dcbg-c-blush{ background:#fdf1f2 !important; }
.dcbg-c-sage{ background:#f1f6ef !important; }
.dcbg-c-sky{ background:#f2f8ff !important; }
.dcbg-c-latte{ background:#f6efe4 !important; }
.dcbg-c-lilac{ background:#f6f3ff !important; }
.dcbg-c-olive{ background:#f4f6ec !important; }
.dcbg-c-ink{ background:#20242b !important; color:#eef1f6 !important; }

/* 2026-11-02 前賢：影像背景上的文字加深（可讀性） */
[class*="dcbg-pic-"] .dc-paper-title{ color:#8a775d !important; }
[class*="dcbg-pic-"] .dc-paper-date{ color:#8a775d !important; }
[class*="dcbg-pic-"] #addText.dc-edit:empty::before{ color:#94826a !important; }
[class*="dcbg-pic-"] .dc-edit{ color:#3f342a !important; }
[class*="dcbg-pic-"][class*="dark"] .dc-paper-title,[class*="dcbg-pic-"][class*="dark"] .dc-paper-date{ color:#efe6d6 !important; }

/* 2026-11-02 前賢：追加 16 款生成背景 */
.dcbg-pic-sage{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/sage.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-skyw{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/skyw.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-lilacw{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/lilacw.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-lattew{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/lattew.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-dot2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/dot2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-letter2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/letter2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-plaid2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/plaid2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-stripes{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/stripes.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-sakura{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/sakura.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-bamboo2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/bamboo2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-dandelion{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/dandelion.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-wave2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/wave2.webp?v=2') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-rabbit2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/rabbit2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-moon{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/moon.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-balloon{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/balloon.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-nightsakura{ background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/bg/nightsakura.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; color:#f3ece1 !important; }
.dcbg-pic-forestlight{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/forestlight.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-snow2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/snow2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-cat2{ background-image:linear-gradient(rgba(255,252,246,.10),rgba(255,252,246,.10)),url('assets/bg/cat2.webp') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }

/* 2026-11-02 前賢：毛孩照片背景 */
.dcbg-pic-pet-cat1{ background-image:linear-gradient(rgba(255,252,246,.14),rgba(255,252,246,.14)),url('assets/bg/pet-cat1.webp?v=gem4') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-pet-cat2{ background-image:linear-gradient(rgba(255,252,246,.14),rgba(255,252,246,.14)),url('assets/bg/pet-cat2.webp?v=gem4') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-pet-cat3{ background-image:linear-gradient(rgba(255,252,246,.14),rgba(255,252,246,.14)),url('assets/bg/pet-cat3.webp?v=gem4') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-pet-dog1{ background-image:linear-gradient(rgba(255,252,246,.14),rgba(255,252,246,.14)),url('assets/bg/pet-dog1.webp?v=gem4') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-pet-dog2{ background-image:linear-gradient(rgba(255,252,246,.14),rgba(255,252,246,.14)),url('assets/bg/pet-dog2.webp?v=gem4') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-pet-dog3{ background-image:linear-gradient(rgba(255,252,246,.14),rgba(255,252,246,.14)),url('assets/bg/pet-dog3.webp?v=gem4') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }

/* 2026-11-02 前賢：生態＋花草照片背景 */
.dcbg-pic-eco-squirrel{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/eco-squirrel.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-eco-deer{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/eco-deer.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-eco-butterfly{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/eco-butterfly.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-eco-rabbit{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/eco-rabbit.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-fl-white{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/fl-white.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-fl-lavender{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/fl-lavender.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-fl-sunflower{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/fl-sunflower.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.dcbg-pic-fl-sakura{ background-image:linear-gradient(rgba(255,252,246,.12),rgba(255,252,246,.12)),url('assets/bg/fl-sakura.webp?v=gem1') !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }

/* 2026-11-02 前賢：每日動物＋各分類補齊（照片背景） */
.dcbg-pic-animal-dog{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-dog.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-animal-cat{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-cat.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-animal-panda{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-panda.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-animal-seal{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-seal.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-animal-penguin{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-penguin.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-animal-rabbit{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-rabbit.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-animal-hippo{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/animal-hippo.webp?v=gem4') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-eco-fox{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/eco-fox.webp?v=gem1') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-eco-bird{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/eco-bird.webp?v=gem1') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-fl-wild{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/fl-wild.webp?v=gem1') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-fl-babysbreath{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/fl-babysbreath.webp?v=gem1') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-sc-sea{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/sc-sea.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-sc-cloudsea{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/sc-cloudsea.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-sc-rice{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/sc-rice.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-cu-bear{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/cu-bear.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-cu-duck{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/cu-duck.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-fe-cny{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/fe-cny.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-fe-moon{ background-image:linear-gradient(rgba(255,252,246,.08),rgba(255,252,246,.08)),url('assets/bg/fe-moon.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.dcbg-pic-nt-milky{ background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/bg/nt-milky.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; color:#f3ece1 !important; }
.dcbg-pic-nt-moonlake{ background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/bg/nt-moonlake.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; color:#f3ece1 !important; }
.dcbg-pic-nt-campfire{ background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/bg/nt-campfire.webp') !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; color:#f3ece1 !important; }

/* 2026-11-02 前賢：版位重整——屬性列移到輸入框頂端、日期與心情鈕同排、好了鈕在輸入框外右下 */
.dc-paper-head{ display:flex; align-items:center; gap:8px; }
.dc-paper-head .dc-paper-date{ margin-left:auto; }
.dc-paper-head .dt-mood{ margin:0 0 0 6px; padding:0; width:26px; height:26px; }
.dc-paper-head .dt-mood .dc-mood-face{ width:24px; height:24px; }
.dc-kinds.dc-kinds-top{
  display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; padding:0;
}
.dc-kinds.dc-kinds-top .dc-kind{ font-size:.72rem; padding:4px 10px; border-radius:var(--r-pill); }
.diary-act-row{ display:flex; justify-content:flex-end; margin:6px 2px 0; }
.diary-act-row #diaryAddBtn{ position:static; }

/* 屬性列：從右側索引貼改為輸入框頂端橫排（覆蓋 .dc-paper .dc-kinds 的絕對定位） */
.dc-paper .dc-kinds.dc-kinds-top{
  position: static !important; top: auto !important; right: auto !important; left: auto !important;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  gap: 6px !important; margin: 2px 0 8px !important; padding: 0 !important;
  max-height: none !important; opacity: 1 !important; overflow: visible !important;
  pointer-events: auto !important; z-index: auto !important;
}
.dc-paper .dc-kinds.dc-kinds-top .dc-kind{
  width: auto !important; padding: 4px 10px !important; margin: 0 !important;
  font-size: .72rem !important; line-height: 1.2 !important; text-align: center;
  border-radius: 999px !important;
}

/* 日期靠右、動物表情緊接在日期右邊 */
.dc-paper-head{ display:flex; align-items:center; gap:8px; }
.dc-paper-head .dc-paper-title{ order:0; }
.dc-paper-head .dc-paper-date{ order:1; margin-left:auto; }
.dc-paper-head .dt-mood{ order:2; margin:0; }

/* 日期改回文件流內，才能在標題後、表情鈕前 */
.dc-paper .dc-paper-head .dc-paper-date{ position:static !important; top:auto !important; right:auto !important; }

/* ===== 2026-11-02 前賢指示：表情面板改半透明毛玻璃（依建言）===== */
.dc-mood-mask{ background: rgba(40,32,26,.14) !important; }
.dc-mood-panel{
  background: rgba(255,252,246,.86) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
  box-shadow: none !important;
  border-top: 1px solid rgba(255,255,255,.72);
}
/* 標題降一級字重與彩度 */
.dc-mood-title{ font-weight: 600 !important; font-size: 1.02rem !important; color: #6B5B4A !important; letter-spacing: .12em !important; }
/* 確認鈕：貼合玻璃感的深墨、去掉陰影 */
.dc-mood-ok{
  background: rgba(34,28,22,.90) !important; color: #FFFDF7 !important;
  box-shadow: none !important; backdrop-filter: blur(6px);
}
/* 選中：只放大＋柔和白暈，不加明顯外框 */
.dc-mood-thumb .halo{
  fill: rgba(255,255,255,.62) !important;
  stroke: none !important;
  filter: drop-shadow(0 6px 12px rgba(150,120,85,.20)) !important;
}

/* 2026-11-02 前賢：小動物放角落 → 背景對齊角落，才會露出動物（不要 center top 把動物裁掉） */
.dcbg-pic-animal-dog, .dcbg-pic-animal-cat, .dcbg-pic-animal-panda, .dcbg-pic-animal-seal, .dcbg-pic-animal-penguin, .dcbg-pic-animal-rabbit, .dcbg-pic-animal-hippo{ background-position: left bottom !important; background-size: cover !important; }
.dcbg-pic-pet-cat1, .dcbg-pic-pet-cat2, .dcbg-pic-pet-cat3, .dcbg-pic-pet-dog1, .dcbg-pic-pet-dog2, .dcbg-pic-pet-dog3{ background-position: left bottom !important; background-size: cover !important; }

/* 縮圖格也要露出角落動物（原本縮圖取中央，動物在角落會被裁掉） */
.dc-bgcell[data-bg^="pic-animal-"]{ background-position: left bottom !important; }
.dc-bgcell[data-bg^="pic-pet-"]{ background-position: left bottom !important; }

/* 2026-11-02 前賢：好了鈕移到便箋框外、右下角 */
.add-row{ position: relative; }
.diary-act-row.diary-act-out{
  display:flex; justify-content:flex-end; gap:0;
  margin: 8px 4px 12px !important; padding: 0;
}
.diary-act-row.diary-act-out #diaryAddBtn{ position: static !important; }

/* 修正：好了列原本被 .add-row 的 flex row 拉成直條，改成獨占整列並靠右下 */
.add-row{ flex-wrap: wrap !important; }
.diary-act-row.diary-act-out{
  flex: 0 0 100% !important; width: 100% !important;
  display: flex !important; justify-content: flex-end !important;
  height: auto !important; align-self: flex-start !important;
}
.diary-act-row.diary-act-out #diaryAddBtn{
  align-self: center !important; height: auto !important; min-height: 0 !important;
  flex: 0 0 auto !important; margin: 0 6px 0 0 !important;
}

/* 2026-11-02 前賢：工具列移到右側邊、縱向排列 */
.diary-box{ overflow: visible; }
#diaryTools{
  position: absolute !important; right: 4px !important; top: 50% !important;
  transform: translateY(-50%) !important; z-index: 6; width: auto !important;
  margin: 0 !important; padding: 0 !important;
}
#diaryTools > div{ display: block !important; }
#diaryTools .dt-bar{
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  gap: 7px !important; align-items: center !important;
  background: rgba(255,253,247,.72); border-radius: 999px;
  padding: 8px 5px; box-shadow: 0 2px 10px rgba(120,95,70,.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#diaryTools .dt-btn{ width: 30px !important; height: 30px !important; min-width: 30px !important; }
#diaryTools .dt-draft{
  position: absolute; right: 42px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
}
/* 文字區右側留出縱向工具列的空間 */
.dc-ed-wrap{ padding-right: 36px !important; }

/* 2026-11-02 前賢：工具列在框內佔右側，輸入框加高補回書寫空間 */
.dc-ed-wrap #addText.dc-edit, .dc-ed-wrap #addText{ min-height: 400px !important; }

/* 2026-11-02 前賢：工具列在框內佔右側 → 輸入框加高（蓋掉舊的 clamp 200~440） */
.diary-cream .dc-paper .dc-ed-wrap #addText.dc-edit{
  min-height: clamp(250px, calc(100dvh - 410px), 470px) !important;
}

/* 2026-11-02 修正：狗狗表情鈕若還落在工具列裡（舊版 JS 快取），也要排得正、不出框 */
.dc-paper-head .dt-mood{
  position: static !important; inset: auto !important; transform: none !important;
  order: 2; margin: 0 !important;
}
#diaryTools .dt-bar .dt-mood{
  width: 30px !important; height: 30px !important; min-width: 30px !important;
  margin: 0 !important; padding: 0 !important; display: flex !important;
  align-items: center !important; justify-content: center !important; flex: 0 0 auto !important;
}
#diaryTools .dt-bar .dt-mood .dc-mood-face,
#diaryTools .dt-bar .dt-mood .mood-img{ width: 24px !important; height: 24px !important; }

/* 2026-11-02 雙保險：若表情鈕仍在工具列外層（舊 JS 快取），排成膠囊下方一顆，不超出、不蓋到 */
#diaryTools > div{ display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; }
#diaryTools .dt-bar{ order: 0 !important; }
#diaryTools .dt-mood{ order: 1 !important; }
#diaryTools .dt-draft{ order: 2 !important; position: static !important; }
#diaryTools .dt-mood{
  position: static !important; width: 30px !important; height: 30px !important;
  min-width: 30px !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#diaryTools .dt-mood .dc-mood-face, #diaryTools .dt-mood .mood-img{ width: 26px !important; height: 26px !important; }
#diaryTools .dt-bar{ gap: 6px !important; padding: 7px 4px !important; }

/* 版本戳（小字，方便確認手機載到哪一版） */
.dc-paper-head .dc-build{ font-size:.56rem; color:#B9AC98; letter-spacing:.06em; margin-left:6px; opacity:.85; }

/* 2026-11-02 修正：工具列改貼齊卡片底部（原本垂直置中，卡片不夠高時會頂到標題列壓住狗臉鈕） */
#diaryTools{
  top: auto !important; bottom: 8px !important; transform: none !important;
  max-height: calc(100% - 56px) !important; overflow-y: auto !important; overflow-x: visible !important;
}
#diaryTools::-webkit-scrollbar{ width: 0; }

/* 2026-11-02 前賢：輸入框再高，讓右側工具列整套進得去（同時把工具列收緊一點） */
.diary-cream .dc-paper .dc-ed-wrap #addText.dc-edit{
  min-height: clamp(440px, calc(100dvh - 250px), 580px) !important;
}
#diaryTools .dt-bar{ gap: 6px !important; padding: 8px 4px !important; }
#diaryTools .dt-btn{ width: 28px !important; height: 28px !important; min-width: 28px !important; }
#diaryTools{ max-height: none !important; overflow: visible !important; }

/* 調整：輸入框再高但要讓「好了」不被底部導覽蓋住（一頁到底） */
.diary-cream .dc-paper .dc-ed-wrap #addText.dc-edit{
  min-height: clamp(420px, calc(100dvh - 340px), 520px) !important;
}

/* 2026-11-02 修正三件（前賢回報） */
/* 1) 心情弧形在桌機太寬，點的位置與圖不對應 → 限寬置中，拖曳才會跟著走 */
.dc-mood-arc{ max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; }
/* 2) 屬性篩選列：平常收起，點搜尋框才滑出（前賢 2026-11-02 指定） */
.dbar{
  max-height: 0 !important; opacity: 0 !important; overflow: hidden !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  transition: max-height .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease, padding .25s ease;
}
body.dsearch-open .dbar{
  max-height: 64px !important; opacity: 1 !important; overflow: visible !important;
  padding-top: 2px !important; padding-bottom: 6px !important;
}

/* 2026-11-02 前賢：心情面板背景＝小動物從破報紙洞口探頭（每日動物對應） */
.dc-mood-panel{
  background-image: var(--mood-bg, none) !important;
  background-size: cover !important; background-position: right top !important;
  background-color: #FBF6EC !important;
}
.dc-mood-panel::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,252,246,.94) 0%, rgba(255,252,246,.88) 52%, rgba(255,250,242,.60) 100%);
}
.dc-mood-panel > *{ position: relative; z-index: 1; }

/* 「好了」固定顯示（前賢：按鈕位置不要跑） */
.diary-act-row.diary-act-out{ opacity: 1 !important; pointer-events: auto !important; }

/* 2026-11-02 前賢：日記右上角「設定動物表情」鈕，做成小動物從撕破報紙洞口探頭 */
.dc-paper-head #dcMoodOpen.dt-mood,
.dc-paper-head #dcMoodOpen{
  width: 58px !important; height: 54px !important; min-width: 58px !important;
  padding: 0 !important; margin: 0 0 0 8px !important; border: 0 !important;
  background-color: transparent !important;
  background-image: url('assets/mood/hole-frame.webp?v=14') !important;
  background-size: 100% 100% !important; background-repeat: no-repeat !important;
  background-position: center !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  filter: none;
}
.dc-paper-head #dcMoodOpen .dc-mood-lbl{ display: none !important; }
.dc-paper-head #dcMoodOpen .dc-mood-face{ display: flex !important; width: 43px !important; height: 43px !important;
  align-items: center !important; justify-content: center !important; position: relative !important; z-index: 2 !important;
  transform: translateY(4px) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 100%); }
.dc-paper-head #dcMoodOpen .dc-mood-face .mood-img,
.dc-paper-head #dcMoodOpen .dc-mood-face img{ width: 43px !important; height: 43px !important; border-radius: 0;
  filter: none; }

/* ===== 2026-11-03 前賢：歷史卡片小動物與字疊在一起 =====
   作法：動物維持整張卡的水彩背景（不縮圖，避免變成色塊），
   改在文字下面鋪一層半透明紙底，字永遠壓不到圖、圖也看得見。 */
.diary-li[data-diary-bg^="pic-animal-"] .dcard-text,
.diary-li[data-diary-bg^="pic-pet-"] .dcard-text,
.diary-li[data-diary-bg^="pic-animal-"] .dcard-full,
.diary-li[data-diary-bg^="pic-pet-"] .dcard-full,
.diary-li[data-diary-bg^="pic-animal-"] .drow .dcard-text,
.diary-li[data-diary-bg^="pic-pet-"] .drow .dcard-text{
  background: rgba(252,247,238,.86) !important;
  border-radius: 11px !important;
  padding: 6px 10px !important;
  margin-left: -2px !important;
  box-shadow: 0 1px 0 rgba(120,95,70,.05) inset !important;
}

/* ===== 2026-11-03 前賢：日期不要加紙底（會蓋住貓頭）→ 改把日期移到卡片左上角，自然錯開 ===== */
.diary-li[data-diary-bg^="pic-animal-"] .dcard-date,
.diary-li[data-diary-bg^="pic-pet-"] .dcard-date{
  align-self: start !important;
  margin-top: 0 !important;
}

/* 展開日記時捲動留浮動標頭空間（2026-11-03） */
.diary-li, .drow{ scroll-margin-top: 80px; }


/* ===== 2026-11-03 日記 AI 生成圖片面板 ===== */
.dt-ai-sheet{ padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.dt-ai-hd{ display:flex; flex-direction:column; gap:2px; padding:2px 4px 10px; }
.dt-ai-hd b{ font-size:1rem; color:#2F2A24; }
.dt-ai-hd span{ font-size:.74rem; color:#8a7a63; }
.dt-ai-sheet textarea{ width:100%; font:inherit; font-size:.92rem; line-height:1.6; padding:10px 12px;
  border:1px solid #E4D9C6; border-radius:12px; background:#FFFDF8; color:#2F2A24; resize:vertical; }
.dt-ai-sheet textarea:focus{ outline:none; border-color:#B4791F; box-shadow:0 0 0 3px rgba(180,121,31,.12); }
.dt-ai-row{ display:flex; gap:8px; margin-top:10px; }
.dt-ai-style{ flex:1; font:inherit; font-size:.8rem; padding:9px 0; border:1px solid #E4D9C6;
  border-radius:10px; background:#FFFDF8; color:#6b5b46; }
.dt-ai-style.on{ border-color:#B4791F; color:#B4791F; font-weight:700; background:#FFF7E8; }
.dt-ai-msg{ min-height:18px; font-size:.76rem; margin-top:8px; color:#6b5b46; }
.dt-ai-msg.err{ color:#B33A2E; }
.dt-ai-go{ width:100%; margin-top:8px; font:inherit; font-size:.95rem; font-weight:700; color:#fff;
  background:#B4791F; border:0; border-radius:12px; padding:13px; }
.dt-ai-go:disabled{ opacity:.6; }

/* ===== 首頁精緻化（2026-11-03 前賢：首頁 UI 不夠精美）=====
   原則：暖色紙感、留白節奏、單一圖示重量、去掉冷藍陰影與裝飾條 */
.home-top{ margin: 10px 2px 14px; align-items: flex-end; }
.home-top h2{ font-size: 1.52rem; font-weight: 800; letter-spacing: -.02em; color:#2F2A24; }
.home-sub{ font-size: .72rem; color:#8A7B66; letter-spacing:.01em; }
.home-ver{
  font-size:.62rem; color:#B3A48D; background:#F4EDE0; border-radius:999px;
  padding:1px 6px; margin-left:8px; font-weight:600;
}
.home-search{
  background:#FFFDF8; border:1px solid rgba(196,176,146,.36); box-shadow:none;
  color:#6B5B46; font-size:.76rem; font-weight:600;
}

.home-links{ gap:8px; padding:0; margin:2px 0 14px; justify-content:flex-start; }
.home-link{
  height:30px; padding:0 12px; gap:5px; font-size:.76rem; font-weight:600; color:#4E4136;
  background:#FFFDF8; border:1px solid rgba(196,176,146,.40); box-shadow:none; border-radius:999px;
}
.home-link svg{ width:13px; height:13px; opacity:.8; }
.home-link:hover{ box-shadow:0 2px 10px rgba(120,95,60,.08); border-color:rgba(168,132,63,.45); transform:none; }

.home-grid{ gap:12px; }
.home-card{
  border-radius:16px; border:1px solid rgba(226,214,193,.85); padding:15px 16px; background:#FFFDF8;
  box-shadow:0 1px 2px rgba(90,70,45,.04), 0 8px 20px rgba(90,70,45,.05);
}
.home-card::after{ display:none; }
.home-card:hover{ box-shadow:0 2px 4px rgba(90,70,45,.05), 0 12px 26px rgba(90,70,45,.08); border-color:rgba(168,132,63,.40); }
.home-card-title{ font-size:.9rem; font-weight:750; color:#2F2A24; letter-spacing:0; margin-bottom:10px; gap:6px; }
.home-card-title svg{ width:16px; height:16px; opacity:.72; flex:none; }
.home-today{ font-size:.68rem; color:#A6957C; font-weight:500; }
.home-sum-row{ gap:8px; }
.home-sum{ background:#FBF6EC; border:1px solid rgba(226,214,193,.7); border-radius:12px; padding:10px 10px 9px; }
.home-sum-label{ font-size:.68rem; color:#8A7B66; letter-spacing:.04em; }
.home-sum b{ font-size:.94rem; font-weight:750; color:#2F2A24; letter-spacing:-.01em; }
.home-pos{ color:#3F7A55; }
.home-neg{ color:#B0473C; }
.home-sec-title{ font-size:.74rem; color:#8A7B66; margin-top:14px; margin-bottom:9px; letter-spacing:.03em; }
.home-line{ font-size:.82rem; color:#4E4136; }
.home-line-more{ color:#A6957C; }
.pie-empty{ color:#A6957C; font-size:.78rem; }
.pie-legend-item{ font-size:.72rem; color:#6B5B46; }
.pie-legend-item i{ border-radius:3px; }

/* 比例極端時的堆疊條（取代變成一顆純色圓的餅圖） */
.ratio-bar{ display:flex; height:12px; border-radius:999px; overflow:hidden; gap:2px; background:#F4EDE0; }
.ratio-bar i{ display:block; height:100%; min-width:4px; }
.ratio-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; }

/* 習慣登入提示：從橘色叫賣改成低調提示 */
.habit-login-btn{
  background:transparent !important; border:1px dashed rgba(196,176,146,.65) !important;
  color:#8A7B66 !important; font-size:.76rem !important; font-weight:600 !important;
  border-radius:10px !important; padding:8px 10px !important; line-height:1.5 !important;
}
/* 首頁修正第二輪（2026-11-03） */
.home-links{ align-items: stretch; }
.home-link{ flex:1 1 28%; min-width:0; justify-content:center; }
.home-sub{ color:#7C6C56; }
.home-sum-label{ color:#7E6E58; }
.home-today{ color:#A6957C; font-weight:600; letter-spacing:.02em; }
/* 比例色調柔化，避免整片高飽和綠 */
.ratio-bar i, .pie-svg path, .pie-svg circle{ filter:saturate(.82) brightness(.99); }
/* 習慣登入鈕：主副兩層文字 */
.habit-login-btn{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; width:100%; }
.habit-login-btn b{ font-size:.82rem; font-weight:700; color:#4E4136; }
.habit-login-btn span{ font-size:.7rem; color:#A6957C; }
.habit-login-btn:active{ background:#FBF6EC !important; }
/* 膠囊鈕改成 6 欄網格：上排 3 顆、下排 2 顆各自均分，不會右邊留空 */
.home-links{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.home-link{ grid-column:span 2; width:auto; }
.home-links > :nth-last-child(-n+2){ grid-column:span 3; }

/* 心情破洞鈕：淺色紙框在奶油底上會糊掉，加一點投影讓它浮起來 */
.dc-paper-head #dcMoodOpen, .dc-paper-head #dcMoodOpen.dt-mood{
  filter: drop-shadow(0 1px 1.5px rgba(120,95,60,.22)) !important;
}

/* 破洞鈕：臉縮小一點、往下移，耳朵不會被紙邊切掉 */
.dc-paper-head #dcMoodOpen .dc-mood-face,
.dc-paper-head #dcMoodOpen .dc-mood-face .mood-img,
.dc-paper-head #dcMoodOpen .dc-mood-face img{
  width: 36px !important; height: 36px !important;
}
.dc-paper-head #dcMoodOpen .dc-mood-face{ transform: translateY(3px) !important; }

/* 心情面板底色＝奶油紙面（2026-11-03 前賢：給動物表情一個背景） */
.dc-mood-panel{
  background-image: url('assets/mood/mood-panel-paper.webp?v=1') !important;
  background-size: cover !important; background-position: center !important;
  background-color: #FFFDF8 !important;
}
.dc-mood-panel::before{
  background: linear-gradient(100deg, rgba(255,252,246,.72) 0%, rgba(255,252,246,.42) 55%, rgba(255,250,242,.10) 100%) !important;
}
.dc-mood-thumb .thumb-hole{ filter: drop-shadow(0 2px 3px rgba(120,95,60,.22)); }
.dc-mood-thumb .halo{ opacity: 0 !important; }
.dc-mood-node .mini-hole{ filter: drop-shadow(0 1px 1.5px rgba(120,95,60,.18)); }

/* ===== 2026-11-03 前賢：日期（3／週二）往左上角再收，不要蓋到貓 ===== */
.diary-li[data-diary-bg^="pic-animal-"] .dcard-date,
.diary-li[data-diary-bg^="pic-pet-"] .dcard-date{
  align-self: start !important;
  justify-self: start !important;
  margin: -13px 0 0 -12px !important;
  width: 34px !important;
  padding: 2px 0 !important;
  border-radius: 11px !important;
  line-height: 1.05 !important;
}
.diary-li[data-diary-bg^="pic-animal-"] .dcard-date b,
.diary-li[data-diary-bg^="pic-pet-"] .dcard-date b{ font-size: 0.98rem !important; }
.diary-li[data-diary-bg^="pic-animal-"] .dcard-date span,
.diary-li[data-diary-bg^="pic-pet-"] .dcard-date span{ font-size: .6rem !important; margin-top: 1px !important; }

/* 2026-11-03 前賢：破洞紙環還有方形殘影、邊緣太硬 → 用羽化遮罩把外圍化開，融進卡片紙面 */
.dc-paper-head #dcMoodOpen, .dc-paper-head #dcMoodOpen.dt-mood{
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 62%, rgba(0,0,0,.8) 80%, rgba(0,0,0,0) 97%) !important;
  mask-image: radial-gradient(circle at 50% 52%, #000 62%, rgba(0,0,0,.8) 80%, rgba(0,0,0,0) 97%) !important;
  filter: drop-shadow(0 1px 1.5px rgba(122,96,62,.16)) !important;
}

/* 2026-11-03 前賢回報：點表情符號時，右側浮動工具列壓到日期／心情標籤／統計列
   → 工具列一律從標頭列下方開始，空間不足時自身可捲動，不再往上頂 */
#diaryTools{
  top: 92px !important; bottom: 10px !important; transform: none !important;
  max-height: calc(100% - 102px) !important;
  overflow-y: auto !important; overflow-x: visible !important;
  scrollbar-width: none;
}
#diaryTools::-webkit-scrollbar{ width: 0; height: 0; }
/* 表情面板不要壓在輸入文字上：貼在工具列左側、寬度受限、可捲動 */
#diaryTools .dt-pop.on{
  position: fixed !important; right: 12px !important; left: auto !important;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important;
  width: 236px !important; max-height: 210px !important; overflow-y: auto !important;
  background: rgba(255,253,247,.97) !important; border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(120,95,60,.18) !important; padding: 8px !important;
  z-index: 9999 !important; flex-wrap: wrap !important; gap: 4px !important;
}
#diaryTools .dt-pop.on button{ min-width: 36px !important; height: 34px !important; font-size: 1rem !important; padding: 0 6px !important; }


/* 2026-11-03 前賢：歷史日記長按選單 */
#diaryPopMenu{position:fixed;z-index:99999;inset:0}
.dpm-mask{position:absolute;inset:0}
.dpm-card{position:absolute;width:150px;background:#fff;border-radius:14px;padding:6px 0;box-shadow:0 4px 20px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.08);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .18s,transform .2s}
.dpm-card.show{opacity:1;transform:none}
.dpm-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 16px;border:none;background:none;font-size:15px;color:#333;cursor:pointer}
.dpm-btn svg{flex-shrink:0}
.dpm-btn:active{background:#f0ebe3}
.dpm-btn:not(:last-child){border-bottom:1px solid #f0ece6}