/* ====== Reset & Base ====== */
:root {
  --font-clean: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  --font-hand: 'LXGW WenKai Screen', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Songti SC', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-clean);
  background: #F6F1E8; color: #414942; font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex; flex-direction: column; height: 100%; max-width: 100%; margin: 0 auto;
}

/* ====== Top Bar ====== */
#topBar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 44px 16px 8px; background: #F6F1E8; position: relative; z-index: 100;
  flex-shrink: 0;
}
#pageTitle { font-family: var(--font-hand); font-size: 22px; font-weight: 700; color: #414942; letter-spacing: .16em; }
.top-btn {
  width: 36px; height: 36px; border: none; background: none;
  font-size: 28px; color: #6F8781; cursor: pointer; display: flex;
  align-items: center; justify-content: center; border-radius: 50%;
}
.top-btn:active { background: #DED8CD; }
.top-btn.hidden { visibility: hidden; }
#backBtn { font-size: 32px; font-weight: 300; }

.app-update-toast {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px; max-width: 460px; margin: auto; padding: 12px 12px 12px 16px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 17px; background: rgba(65,73,66,.96); color: #FFF;
  box-shadow: 0 12px 30px rgba(45,50,45,.24); backdrop-filter: blur(12px);
}
.app-update-toast div { flex: 1; min-width: 0; }
.app-update-toast b, .app-update-toast span { display: block; }
.app-update-toast b { font-family: var(--font-hand); font-size: 14px; letter-spacing: .04em; }
.app-update-toast span { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 10px; }
.app-update-toast button { flex: 0 0 auto; padding: 8px 12px; border: 0; border-radius: 999px; background: #F5D39C; color: #414942; font-size: 12px; font-weight: 700; }
.app-update-toast button:disabled { opacity: .65; }

/* ====== Content ====== */
#appContent {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.page { display: none; height: 100%; }
.page.active { display: block; }
.page-inner { padding-bottom: 32px; min-height: 100%; }

.info-page { padding: 12px 16px 40px; }
.info-hero { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; padding: 18px; border: 1px solid #DED8CD; border-radius: 22px; background: #FFFDF8; }
.info-hero img { width: 58px; height: 58px; border-radius: 16px; }
.info-hero h2 { color: #414942; font-family: var(--font-hand); font-size: 21px; letter-spacing: .06em; }
.info-hero p { margin-top: 5px; color: #7C8780; font-size: 12px; line-height: 1.5; }
.info-card { margin-bottom: 12px; padding: 16px 17px; border: 1px solid #DED8CD; border-radius: 18px; background: rgba(255,255,255,.72); }
.info-card b { color: #51635B; font-family: var(--font-hand); font-size: 16px; letter-spacing: .04em; }
.info-card p, .info-card ol { margin-top: 9px; color: #6E766F; font-size: 12px; line-height: 1.8; }
.info-card ol { padding-left: 20px; }
.status-pill { width: max-content; margin: -4px 0 14px; padding: 7px 12px; border-radius: 999px; background: #E3EFE7; color: #51705F; font-size: 11px; }
.install-now-btn { width: 100%; margin: -2px 0 8px; padding: 14px 18px; border: 0; border-radius: 16px; background: #476F69; color: #FFF; font-family: var(--font-hand); font-size: 17px; letter-spacing: .08em; box-shadow: 0 8px 18px rgba(71,111,105,.18); cursor: pointer; }
.install-now-btn:disabled { opacity: .58; }
.install-hint { margin: 0 4px 16px; color: #77827B; font-size: 11px; line-height: 1.6; text-align: center; }
.copyright-foot { margin-top: 20px; color: #A29C91; font-family: var(--font-hand); font-size: 11px; text-align: center; letter-spacing: .08em; }

/* ====== Tab Bar ====== */
#tabBar {
  display: flex; background: #FAF7F0; border-top: 1px solid #DED8CD;
  flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-btn {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; min-height: 56px; padding: 7px 0; border: none; background: none;
  font-size: 10px; color: #99988D; cursor: pointer;
}
.tab-btn > span:last-child { font-size: 10px; }
.tab-btn.active { color: #414942; font-weight: 700; }
.tab-btn.active::before { content: ''; position: absolute; width: 14px; height: 2px; border-radius: 4px; background: #E6B976; transform: translateY(-17px); }
.tab-icon { display: inline-flex; width: 19px; height: 19px; color: currentColor; }
.tab-icon svg { width: 100%; height: 100%; }
.chef-tab-icon { color: #7D9184; }
.tab-chef.active .chef-tab-icon { color: #414942; }
.tab-btn:active { opacity: 0.7; }

/* ====== Page Header ====== */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 8px;
}
.page-header .page-title { font-family: var(--font-hand); font-size: 28px; font-weight: 700; color: #414942; letter-spacing: .08em; }
.icon-btn { font-size: 22px; border: none; background: none; padding: 8px; cursor: pointer; color: #B8B2A7; }
.icon-btn:active { opacity: 0.5; }

/* ====== 首页餐桌近景 ====== */
.home-scene { position: relative; height: clamp(248px, 34svh, 286px); margin: 0 10px 20px; overflow: hidden; border-radius: 28px; background: #DDEDE6; box-shadow: 0 15px 34px rgba(71,111,105,.2); }
.home-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; display: block; transform: scale(1.06); transform-origin: 50% 58%; }
.home-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.02) 40%, rgba(51,74,71,.1) 100%), linear-gradient(90deg, rgba(51,74,71,.03), transparent 48%, rgba(71,111,105,.06)); pointer-events: none; }
.magic-spark { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: #FFF6D6; box-shadow: 0 0 9px 3px rgba(255,233,164,.8); animation: magicTwinkle 2.4s ease-in-out infinite; }
.spark-one { left: 19%; top: 27%; }.spark-two { left: 77%; top: 22%; animation-delay: .8s; }.spark-three { left: 67%; top: 68%; animation-delay: 1.5s; }
@keyframes magicTwinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.5); } }
.home-record-heading { margin: 0 28px 2px; color: #5F7168; font-family: var(--font-hand); font-size: 18px; font-weight: 700; letter-spacing: .12em; }
.home-categories { display: flex; flex-direction: column; gap: 11px; margin: 16px 28px 30px; }
.category-card { position: relative; width: 100%; min-height: 82px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 15px 22px; border: 1px solid #D6D0C5; border-radius: 18px; color: #414942; text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(71,111,105,.09); transition: transform .18s ease, box-shadow .18s ease; }
.category-art { position: absolute; z-index: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; mix-blend-mode: multiply; }
.category-card span, .category-card small, .category-card b { position: relative; z-index: 1; }
.category-card span { font-family: var(--font-hand); font-size: 25px; font-weight: 700; letter-spacing: .09em; }
.category-card small { margin-top: 2px; color: #6F8781; font-family: Georgia, serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.category-card b { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 1px solid rgba(71,111,105,.28); border-radius: 50%; color: #7D9184; font-family: Georgia, serif; font-size: 23px; font-weight: 400; line-height: 20px; text-align: center; }
.category-card.dish { background: #F0F8F2; }.category-card.dessert { background: #FFF4EE; }.category-card.drinks { background: #EDF5FA; }
.category-card:active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 7px rgba(71,111,105,.1); }

/* ====== Stats Row ====== */
.stats-row {
  display: flex; gap: 10px; padding: 10px 16px 8px;
}
.stat-card { flex: 1; background: #FFFFFF; border-radius: 18px; padding: 14px 4px; text-align: center; border: 1px solid #DED8CD; box-shadow: none; cursor: default; }
.stat-card.is-action { cursor: pointer; }
.stat-card.is-action:active { opacity: 0.7; transform: scale(0.96); }
.stat-num { display: block; font-size: 22px; font-weight: 700; color: #414942; }
.stat-num.streak { color: #7D9184; }
.stat-label { display: block; font-size: 11px; color: #99988D; margin-top: 3px; }

/* ====== Section ====== */
.section { padding: 16px 0; }
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 12px;
}
.section-title { color: #414942; font-family: var(--font-hand); font-size: 18px; font-weight: 600; letter-spacing: .05em; }
.section-more { font-size: 13px; color: #99988D; cursor: pointer; }
.section-more:active { opacity: 0.6; }

/* ====== Card ====== */
.card { background: #FFFFFF; border-radius: 12px; margin: 0 16px 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }

/* ====== Empty State ====== */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; color: #B8B2A7;
}
.empty-state span { font-size: 14px; line-height: 1.6; }
.text-muted { color: #99988D; font-size: 13px; margin-top: 8px; }

/* ====== Recent Items ====== */
.recent-item { display: flex; background: #FFFFFF; border-radius: 18px; padding: 12px; margin: 0 16px 12px; border: 1px solid #DED8CD; box-shadow: none; cursor: pointer; }
.recent-item:active { opacity: 0.7; }
.recent-img-wrap { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; margin-right: 14px; }
.recent-img { width: 100%; height: 100%; object-fit: cover; }
.recent-placeholder { background: #EFE9DF; }
.recent-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.recent-dish { font-family: var(--font-hand); font-size: 16px; font-weight: 600; color: #414942; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-date { font-size: 12px; color: #B8B2A7; margin-top: 3px; }
.recent-tags { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.recent-note { font-size: 12px; color: #99988D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }

/* ====== Tag ====== */
.tag {
  display: inline-block; background: #E9E4D9; color: #7D9184;
  font-size: 12px; padding: 2px 10px; border-radius: 10px;
}

/* ====== FAB ====== */
.fab-wrap { padding: 24px 32px 40px; text-align: center; }
.fab-btn { display: inline-flex; align-items: center; gap: 8px; background: #414942; color: #FFFFFF; border: none; border-radius: 12px; padding: 14px 28px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 20px rgba(109,157,144,0.28); outline: none;
}
.fab-btn:active { transform: scale(0.95); }
.fab-icon { font-size: 24px; font-weight: 300; line-height: 1; }
.fab-text { font-size: 16px; font-weight: 600; }

/* ====== Year Filter ====== */
.year-filter {
  display: flex; gap: 10px; padding: 12px 16px; overflow-x: auto;
  background: #FAF7F0; border-bottom: 1px solid #EFE9DF;
  position: sticky; top: 0; z-index: 10;
}
.year-btn {
  flex-shrink: 0; padding: 6px 16px; border-radius: 20px;
  font-size: 13px; color: #6F8781; background: #EFE9DF;
  border: none; cursor: pointer;
}
.year-btn.active { background: #7D9184; color: #FFFFFF; font-weight: 600; }
.year-btn:active { opacity: 0.7; }
.record-search-wrap { position: relative; margin: 14px 16px 10px; }
.record-search-icon { position: absolute; left: 14px; top: 50%; color: #8B958F; font-family: Georgia, serif; font-size: 21px; line-height: 1; transform: translateY(-53%) rotate(-18deg); pointer-events: none; }
.record-search { width: 100%; height: 44px; padding: 0 15px 0 42px; border: 1px solid #DED8CD; border-radius: 16px; outline: none; background: rgba(255,255,255,.78); color: #414942; font-family: var(--font-clean); font-size: 14px; -webkit-appearance: none; appearance: none; }
.record-search:focus { border-color: #91A79B; box-shadow: 0 0 0 3px rgba(125,145,132,.12); }
.record-search::placeholder { color: #A8A79F; }
.record-view-switch { display: grid; grid-template-columns: 1fr 1fr; width: 190px; margin: 0 16px 14px auto; padding: 3px; border-radius: 999px; background: #E9E4D9; }
.record-view-switch button { min-height: 31px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #7C847D; font-size: 11px; cursor: pointer; }
.record-view-switch button.active { background: #FFF; color: #4F625A; font-weight: 700; box-shadow: 0 2px 8px rgba(71,111,105,.12); }
.record-photo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 24px; }
.record-photo-card { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; overflow: hidden; padding: 8px; border: 1px solid #DED8CD; border-radius: 16px; background: rgba(255,255,255,.86); color: #414942; text-align: left; box-shadow: 0 4px 11px rgba(71,111,105,.06); cursor: pointer; }
.record-photo-card img, .record-photo-placeholder { width: 58px; height: 58px; border-radius: 11px; object-fit: cover; }
.record-photo-placeholder { display: flex; align-items: center; justify-content: center; background: #E6ECE3; color: #789083; font-size: 18px; }
.record-photo-placeholder.dessert { background: #F5E5E0; color: #B47F76; }
.record-photo-placeholder.drinks { background: #E3EDF1; color: #7893A0; }
.record-photo-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.record-photo-copy b { width: 100%; overflow: hidden; color: #414942; font-family: var(--font-hand); font-size: 13px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.record-photo-copy small { margin-top: 4px; color: #99988D; font-size: 9px; }
.record-photo-copy em { margin-top: 5px; padding: 2px 5px; border-radius: 999px; background: #EFEAE0; color: #718078; font-size: 8px; font-style: normal; }
.record-photo-card:active { transform: scale(.98); }

/* ====== Timeline ====== */
.timeline { padding: 8px 16px 16px 32px; position: relative; }
.tl-item { position: relative; padding-bottom: 16px; cursor: pointer; }
.tl-dot {
  position: absolute; left: -24px; top: 22px; width: 12px; height: 12px;
  border-radius: 50%; background: #D5D0CA; z-index: 2;
}
.tl-dot.hot { background: #7D9184; box-shadow: 0 0 8px rgba(109,157,144,0.28); }
.tl-line {
  position: absolute; left: -19px; top: 28px; bottom: 0;
  width: 3px; background: #DED8CD;
}
.tl-item:last-child .tl-line { display: none; }
.tl-card { background: #FFFFFF; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.tl-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tl-date { font-size: 13px; font-weight: 600; color: #7D9184; }
.tl-weekday { font-size: 11px; color: #B8B2A7; }
.tl-body { display: flex; gap: 12px; }
.tl-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.tl-content { flex: 1; min-width: 0; }
.tl-dish { display: block; font-family: var(--font-hand); font-size: 16px; font-weight: 600; color: #414942; letter-spacing: .03em; margin-bottom: 4px; }
.record-category { display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 10px; background: #E8E4D8; color: #7D9184; font-size: 10px; font-style: normal; font-weight: 600; vertical-align: 1px; }
.record-category.dessert { background: #FFF4E8; color: #BE8B66; }
.record-category.drinks { background: #EBF3F8; color: #67899B; }
.tl-rating { margin-bottom: 4px; font-size: 13px; }
.tl-notes { font-size: 13px; color: #6F8781; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ====== Calendar ====== */
.year-calendar-page { --jelly-dish: #7E9B83; --jelly-dessert: #D99782; --jelly-drinks: #829EAA; padding-top: 4px; }
.period-switch { display: flex; width: max-content; max-width: calc(100% - 36px); margin: 12px auto 14px; padding: 4px; border-radius: 999px; background: #EAF2EE; }
.period-option { min-width: 76px; padding: 8px 13px; border: 0; border-radius: 999px; background: transparent; color: #78918A; font-size: 12px; cursor: pointer; }
.period-option.active { background: #FFF; color: #365C55; font-weight: 700; box-shadow: 0 2px 7px rgba(71,111,105,.16); }
.cal-nav-btn { width: 42px; height: 42px; border: 1px solid #DED8CD; border-radius: 50%; background: rgba(255,255,255,.72); color: #7D9184; font-family: Georgia, serif; font-size: 27px; cursor: pointer; }
.cal-nav-btn:active { transform: scale(.94); background: #E8E4D8; }
.year-cal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 22px 14px; color: #99988D; font-size: 10px; }
.year-cal-summary > span b { margin-right: 4px; color: #5F7168; font-family: Georgia, serif; font-size: 15px; }
.jelly-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.jelly-legend i { --vessel-color: var(--jelly-dish); position: relative; display: inline-block; width: 7px; height: 7px; margin: 0 2px 0 5px; border-radius: 50%; background: var(--vessel-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); opacity: .78; }
.jelly-legend .dessert { --vessel-color: var(--jelly-dessert); }
.jelly-legend .drinks { --vessel-color: var(--jelly-drinks); }
.jelly-board-wrap { height: 132px; margin: 0 12px; overflow-x: auto; overflow-y: hidden; padding: 14px; border: 1px solid rgba(214,208,197,.9); border-radius: 22px; background: rgba(255,253,248,.82); box-shadow: 0 10px 30px rgba(88,72,52,.07); }
.jelly-month-labels, .jelly-board { display: grid; grid-template-columns: repeat(var(--weeks, 53), minmax(12px, 1fr)); column-gap: 3px; width: 100%; min-width: 100%; }
.jelly-board-wrap.period-1y .jelly-month-labels, .jelly-board-wrap.period-1y .jelly-board { width: 720px; min-width: 720px; }
.jelly-month-labels { height: 16px; align-items: center; color: #8FA69F; font-size: 8px; }
.jelly-month-labels span { text-align: left; white-space: nowrap; }
.jelly-board { grid-template-rows: repeat(7, 10px); gap: 2px; padding-top: 2px; }
.jelly-day { position: relative; align-self: center; justify-self: center; width: 18px; height: 10px; display: flex; align-items: center; justify-content: center; gap: 1px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .18s ease; }
.jelly-day.filler { opacity: .45; cursor: default; }
.calendar-vessel { --vessel-color: var(--jelly-dish); position: relative; display: block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--vessel-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 1px 2px rgba(88,72,52,.08); opacity: var(--vessel-alpha, .42); }
.calendar-vessel.dessert { --vessel-color: var(--jelly-dessert); }
.calendar-vessel.drinks { --vessel-color: var(--jelly-drinks); }
.calendar-vessel.empty { --vessel-color: #D8D1C6; opacity: .46; }
.jelly-day.types-2 .calendar-vessel { transform: scale(.9); margin: 0; }
.jelly-day.types-3 .calendar-vessel { transform: scale(.78); margin: 0 -.5px; }
.jelly-day.today { outline: 1px solid #414942; outline-offset: 2px; border-radius: 5px; }
.jelly-day.month-active { transform: none; }
.jelly-day:active { transform: scale(1.5); }
.month-strip { display: flex; gap: 8px; margin: 16px 0 14px; padding: 0 18px 3px; overflow-x: auto; scroll-snap-type: x proximity; }
.month-chip { flex: 0 0 auto; min-width: 48px; padding: 8px 12px; border: 1px solid #DED8CD; border-radius: 999px; background: #FFF; color: #7C928C; font-size: 12px; cursor: pointer; scroll-snap-align: center; }
.month-chip.active { border-color: #5F7168; background: #5F7168; color: #FFF; box-shadow: 0 4px 10px rgba(71,111,105,.2); }
.month-dishes-head { display: flex; align-items: center; justify-content: space-between; margin: 0 22px 10px; }
.month-dishes-head > div { display: flex; flex-direction: column; }
.month-dishes-head b { color: #414942; font-family: var(--font-hand); font-size: 19px; letter-spacing: .08em; }
.month-dishes-head span { margin-top: 3px; color: #99988D; font-size: 10px; }
.month-dishes { display: flex; gap: 11px; min-height: 146px; overflow-x: auto; padding: 0 18px 12px; scroll-snap-type: x mandatory; }
.month-dish-card { flex: 0 0 118px; display: flex; flex-direction: column; padding: 8px; border: 1px solid #DED8CD; border-radius: 17px; background: #FFF; color: #414942; text-align: left; box-shadow: 0 5px 14px rgba(71,111,105,.07); cursor: pointer; scroll-snap-align: start; }
.month-dish-card img, .month-dish-placeholder { width: 100%; height: 82px; border-radius: 12px; object-fit: cover; }
.month-dish-placeholder { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); font-size: 24px; }
.month-dish-placeholder.dish { background: #8EB9A9; }.month-dish-placeholder.dessert { background: #E7ACAF; }.month-dish-placeholder.drinks { background: #94BAD7; }
.month-dish-card b { margin: 8px 2px 0; overflow: hidden; font-family: var(--font-hand); font-size: 14px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.month-dish-card small { margin: 3px 2px 2px; color: #99988D; font-size: 9px; }
.month-dishes-empty { display: flex; width: calc(100vw - 36px); height: 110px; align-items: center; justify-content: center; border: 1px dashed #D6D0C5; border-radius: 17px; color: #99988D; font-size: 12px; }

/* ====== Monthly table ====== */
.monthly-table-card { margin: 0 16px 22px; overflow: hidden; border: 1px solid #DED8CD; border-radius: 22px; background: #FFF; box-shadow: 0 9px 24px rgba(71,111,105,.09); }
.monthly-table-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; }
.monthly-table-title > div { display: flex; flex-direction: column; }
.monthly-table-title span { color: #99988D; font-family: Georgia, serif; font-size: 9px; letter-spacing: .1em; }
.monthly-table-title b { margin-top: 3px; color: #414942; font-family: var(--font-hand); font-size: 20px; letter-spacing: .08em; }
.monthly-table-title small { color: #99988D; font-size: 10px; }
.tablecloth-scene { position: relative; height: clamp(250px, 72vw, 286px); overflow: hidden; isolation: isolate; background-color: #F2ECE0; background-image: linear-gradient(45deg, rgba(255,255,255,.42) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.42) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.42) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.42) 75%); background-position: 0 0, 0 13px, 13px -13px, -13px 0; background-size: 26px 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -22px 35px rgba(106,79,46,.1); }
.tablecloth-scene::before { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, rgba(170,126,89,.12) 0 1px, transparent 1px 13px), repeating-linear-gradient(0deg, rgba(170,126,89,.08) 0 1px, transparent 1px 13px); mix-blend-mode: multiply; }
.tablecloth-scene::after { content: ''; position: absolute; z-index: -1; inset: 11px; border: 1px solid rgba(143,107,73,.28); border-radius: 13px; pointer-events: none; }
.tablecloth-note { position: absolute; top: 13px; left: 16px; color: rgba(81,93,73,.58); font-family: Georgia, serif; font-size: 9px; letter-spacing: .12em; }
.tablecloth-note i { padding: 0 4px; font-style: normal; }
.table-dish { position: absolute; z-index: 1; left: var(--x); top: var(--y); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #414942; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform: translate(-50%, -50%) rotate(var(--r)); transition: transform .2s ease, filter .2s ease; }
.table-dish > * { pointer-events: none; }
.table-dish:active { z-index: 3; transform: translate(-50%, -50%) rotate(0) scale(1.08); }
.table-dish.dragging { z-index: 5; cursor: grabbing; filter: drop-shadow(0 10px 8px rgba(74,59,39,.2)); transform: translate(-50%, -50%) rotate(0) scale(1.08); transition: none; }
.table-plate { position: relative; display: flex; width: 70px; height: 70px; padding: 5px; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; background: #F9F7F0; box-shadow: 0 7px 12px rgba(74,59,39,.24), inset 0 0 0 3px rgba(157,142,115,.14); }
.table-plate img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.table-dish.dish .table-plate { border-color: rgba(255,253,247,.95); }
.table-dish.dessert .table-plate { width: 58px; height: 58px; padding: 6px; border-width: 4px; border-color: #EEE2D2; background: #FFF8ED; box-shadow: 0 6px 11px rgba(74,59,39,.2), inset 0 0 0 3px rgba(204,158,126,.18); }
.table-dish.dessert .table-plate::before { content: ''; position: absolute; z-index: 2; inset: 2px; border: 1px solid rgba(193,139,107,.35); border-radius: 50%; pointer-events: none; }
.table-dish.drinks .table-plate { width: 46px; height: 74px; padding: 4px; border-width: 3px; border-radius: 44% 44% 34% 34%; border-color: rgba(224,235,235,.92); background: #E8F0EF; box-shadow: 0 7px 12px rgba(74,59,39,.2), inset 0 0 0 2px rgba(130,158,170,.2); }
.table-dish.drinks .table-plate::after { content: ''; position: absolute; z-index: 0; right: -14px; top: 21px; width: 16px; height: 27px; border: 5px solid rgba(224,235,235,.95); border-left: 0; border-radius: 0 13px 13px 0; box-shadow: 2px 3px 5px rgba(74,59,39,.12); }
.table-dish.drinks .table-plate img { border-radius: 42% 42% 30% 30%; }
.table-dish.has-photo b { position: absolute; bottom: -14px; max-width: 94px; overflow: hidden; padding: 3px 7px; border-radius: 999px; background: rgba(255,253,247,.92); box-shadow: 0 1px 5px rgba(74,59,39,.18); color: #40534C; font-family: var(--font-hand); font-size: 11px; font-weight: 600; line-height: 1.15; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.table-dish.drinks.has-photo b { bottom: 5px; z-index: 3; width: 58px; max-width: 58px; padding: 3px 4px; border-radius: 8px; line-height: 1.15; text-align: center; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.table-dish.name-only { display: flex; width: 64px; height: 64px; min-width: 0; min-height: 0; max-width: none; padding: 8px; border: 4px solid rgba(255,255,255,.84); border-radius: 50%; box-shadow: 0 5px 10px rgba(74,59,39,.17), inset 0 0 0 2px rgba(105,89,67,.1); font-size: 10px; line-height: 1.25; text-align: center; }
.table-dish.name-only b { display: -webkit-box; max-width: 100%; overflow: hidden; font-family: var(--font-hand); letter-spacing: .01em; line-clamp: 2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.table-dish.name-only.dish { background: #E5EBE1; }
.table-dish.name-only.dessert { width: 56px; height: 56px; border-color: #EEE2D2; background: #F4E3DC; }
.table-dish.name-only.drinks { width: 46px; height: 74px; padding: 6px 4px; border-radius: 44% 44% 34% 34%; border-color: #DDE8E8; background: #DFE9EC; }
.table-dish.name-only.drinks::after { content: ''; position: absolute; right: -12px; top: 20px; width: 14px; height: 26px; border: 4px solid #DDE8E8; border-left: 0; border-radius: 0 12px 12px 0; }
.table-dish.name-only.drinks b { display: block; overflow: visible; font-size: 9px; line-height: 1.15; text-align: center; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.table-dish.uses-selected-ware .table-selected-ware { --ware-outer: #2F6A62; --ware-inner: #EEF5E7; position: relative; display: flex; width: 72px; height: 72px; flex: 0 0 auto; overflow: visible; border-radius: 50%; background: var(--ware-outer); box-shadow: 0 7px 12px rgba(74,59,39,.24); }
.table-dish.uses-selected-ware .table-selected-ware::before { content: ''; position: absolute; z-index: 0; inset: 8%; border-radius: 50%; background: var(--ware-inner); }
.table-dish.uses-selected-ware .table-selected-ware img { position: absolute; z-index: 1; inset: 14%; width: 72%; height: 72%; border-radius: 50%; object-fit: cover; }
.table-dish.ware-ink .table-selected-ware { --ware-outer: #1F3144; --ware-inner: #DDE7ED; }
.table-dish.ware-coral .table-selected-ware { --ware-outer: #E36B56; --ware-inner: #FFF1E7; }
.table-dish.ware-grid .table-selected-ware { --ware-outer: #F4E3BC; --ware-inner: #FFFDF7; background-image: linear-gradient(rgba(184,156,106,.46) 1px, transparent 1px), linear-gradient(90deg, rgba(184,156,106,.46) 1px, transparent 1px); background-size: 9px 9px; }
.table-dish.ware-sun .table-selected-ware { --ware-outer: #F2B441; --ware-inner: #FFF9E4; }
.table-dish.ware-leaf .table-selected-ware { --ware-outer: #2F6A62; --ware-inner: #EEF5E7; }
.table-dish.uses-selected-ware.dessert .table-selected-ware { --ware-accent: #B993A0; width: 66px; height: 66px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--ware-outer) 0 7deg, var(--ware-inner) 7deg 12deg); clip-path: polygon(50% 0%,58% 5%,66% 2%,72% 10%,81% 10%,84% 19%,93% 23%,91% 32%,99% 40%,95% 49%,100% 57%,93% 64%,94% 74%,84% 78%,81% 88%,71% 88%,64% 97%,55% 94%,47% 100%,39% 94%,29% 97%,23% 88%,13% 87%,11% 78%,2% 72%,6% 63%,0 55%,5% 47%,1% 38%,8% 31%,7% 22%,17% 18%,20% 9%,30% 10%,37% 2%,45% 6%); }
.table-dish.uses-selected-ware.dessert .table-selected-ware::before { inset: 11%; border: 2px dotted var(--ware-accent); }
.table-dish.uses-selected-ware.dessert .table-selected-ware img { inset: 19%; width: 62%; height: 62%; }
.table-dish.ware-dessert-cream .table-selected-ware { --ware-outer: #E8DCC9; --ware-inner: #FFF9F0; --ware-accent: #D0AE8F; }
.table-dish.ware-dessert-berry .table-selected-ware { --ware-outer: #C87A86; --ware-inner: #FFF1F3; --ware-accent: #9F5968; }
.table-dish.ware-dessert-caramel .table-selected-ware { --ware-outer: #C78E61; --ware-inner: #FFF5E8; --ware-accent: #A56B42; }
.table-dish.ware-dessert-lilac .table-selected-ware { --ware-outer: #B9A1C5; --ware-inner: #FBF5FF; --ware-accent: #8F74A0; }
.table-dish.uses-selected-ware.drinks .table-selected-ware { width: 48px; height: 72px; border-radius: 44% 44% 34% 34%; background: var(--ware-outer); }
.table-dish.uses-selected-ware.drinks .table-selected-ware::before { inset: 7px 6px 9px; border-radius: 44% 44% 32% 32%; }
.table-dish.uses-selected-ware.drinks .table-selected-ware::after { content: ''; position: absolute; z-index: 0; right: -14px; top: 21px; width: 16px; height: 27px; border: 5px solid var(--ware-outer); border-left: 0; border-radius: 0 13px 13px 0; }
.table-dish.uses-selected-ware.drinks .table-selected-ware img { inset: 11px 8px 13px; width: 32px; height: 48px; border-radius: 44% 44% 30% 30%; }
.table-dish.ware-cup-sage .table-selected-ware { --ware-outer: #8AA69A; --ware-inner: #EFF5ED; }
.table-dish.ware-cup-iced .table-selected-ware { --ware-outer: #B6D1DE; --ware-inner: #EAF8FB; }
.table-dish.ware-cup-terra .table-selected-ware { --ware-outer: #B86F50; --ware-inner: #F2D9C7; }
.table-dish.uses-selected-ware .table-selected-ware.fallback-composite { overflow: hidden; background: transparent; }
.table-dish.uses-selected-ware .table-selected-ware.fallback-composite::before, .table-dish.uses-selected-ware .table-selected-ware.fallback-composite::after { display: none; }
.table-dish.uses-selected-ware .table-selected-ware.fallback-composite img { inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.table-more { position: absolute; right: 16px; bottom: 13px; color: rgba(81,93,73,.68); font-size: 10px; }
.table-empty-message { position: absolute; top: 50%; left: 50%; width: 210px; color: #66756C; font-family: var(--font-hand); font-size: 17px; line-height: 1.65; text-align: center; transform: translate(-50%, -50%); }
.table-empty-message span { color: #99988D; font-family: var(--font-clean); font-size: 11px; }

/* ====== Monthly recap ====== */
.monthly-recap { margin: 0 16px 24px; padding: 17px; border: 1px solid #DED8CD; border-radius: 18px; background: #F8FCF9; }
.monthly-recap-head { display: flex; flex-direction: column; }
.monthly-recap-head span { color: #99988D; font-family: Georgia, serif; font-size: 9px; letter-spacing: .16em; }
.monthly-recap-head b { margin-top: 3px; color: #5F7168; font-family: var(--font-hand); font-size: 19px; letter-spacing: .08em; }
.recap-grid { display: flex; margin: 15px 0 13px; padding: 12px 0; border-top: 1px solid #DED8CD; border-bottom: 1px solid #DED8CD; }
.recap-grid > div { flex: 1; display: flex; flex-direction: column; align-items: center; }
.recap-grid > div + div { border-left: 1px solid #DED8CD; }
.recap-grid b { color: #414942; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.recap-grid span { margin-top: 3px; color: #99988D; font-size: 10px; }
.monthly-recap p { color: #6F8781; font-size: 12px; line-height: 1.65; }

/* Day records */
.day-rec-item {
  display: flex; align-items: center; background: #FFF; border-radius: 10px;
  padding: 12px; margin: 0 16px 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); cursor: pointer;
}
.day-rec-item:active { opacity: 0.7; }
.day-rec-img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; margin-right: 12px; }
.day-rec-placeholder { background: #EFE9DF; }
.day-rec-info { flex: 1; min-width: 0; }
.day-rec-dish { display: block; font-family: var(--font-hand); font-size: 15px; font-weight: 600; color: #414942; letter-spacing: .02em; }
.day-rec-note { display: block; font-size: 12px; color: #6F8781; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-rec-rating { font-size: 12px; color: #7D9184; flex-shrink: 0; }

/* ====== Stats ====== */
.overview-row {
  display: flex; align-items: center; margin: 8px 16px;
  background: #FFF; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ov-item { flex: 1; text-align: center; }
.ov-item span { display: block; font-size: 11px; color: #99988D; }
.ov-num { font-size: 22px !important; font-weight: 700; color: #7D9184 !important; margin-bottom: 2px; }
.ov-div { width: 1px; height: 30px; background: #DED8CD; }
.chart-card { background: #FFF; border-radius: 12px; margin: 0 16px 12px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.bar-row { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.bar-label { width: 42px; font-size: 13px; color: #6F8781; text-align: right; flex-shrink: 0; }
.bar-lbl-sm { width: 36px; font-size: 12px; color: #6F8781; flex-shrink: 0; }
.bar-track { flex: 1; height: 16px; background: #EFE9DF; border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #E6B976, #7D9184); border-radius: 8px; }
.bar-fill.green { background: linear-gradient(90deg, #A8D8B8, #6BC47F); }
.bar-fill.rating { background: linear-gradient(90deg, #CC977D, #7D9184); }
.bar-val { width: 46px; font-size: 12px; color: #414942; font-weight: 500; flex-shrink: 0; text-align: right; }
.bar-val-sm { width: 36px; font-size: 11px; color: #6F8781; flex-shrink: 0; text-align: right; }
.rank-list { }
.rank-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #EFE9DF; gap: 12px; }
.rank-row:last-child { border-bottom: none; }
.rank-num {
  width: 22px; height: 22px; background: #EFE9DF; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #6F8781; font-weight: 600; flex-shrink: 0;
}
.rank-num.top { background: linear-gradient(135deg, #FFD700, #FFA500); color: #FFF; }
.rank-name { flex: 1; font-size: 14px; color: #414942; font-weight: 500; }
.rank-cnt { font-size: 12px; color: #99988D; }
.rating-lbl { width: 56px; font-size: 13px; color: #7D9184; flex-shrink: 0; }

/* ====== Add/Edit Form ====== */
.photo-grid {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 16px;
}
.photo-item { width: 100px; height: 100px; border-radius: 8px; overflow: hidden; position: relative; }
.photo-img { width: 100%; height: 100%; object-fit: cover; }
.photo-edit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; cursor: pointer; }
.photo-edit span { position: absolute; right: 5px; bottom: 5px; padding: 3px 7px; border-radius: 999px; background: rgba(65,73,66,.78); color: #FFF; font-size: 10px; line-height: 1.2; backdrop-filter: blur(4px); }
.photo-del {
  position: absolute; z-index: 2; top: 4px; right: 4px; width: 22px; height: 22px;
  background: rgba(0,0,0,0.5); border: none; border-radius: 50%; color: #FFF;
  font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.photo-add-btn {
  width: 100px; height: 100px; background: #F1ECE3; border: 2px dashed #D5D0CA;
  border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer;
}
.photo-add-icon { font-size: 28px; color: #B8B2A7; line-height: 1; }
.photo-add-text { font-size: 11px; color: #B8B2A7; margin-top: 4px; }

.form-card { background: #FFF; border-radius: 12px; margin: 0 16px 16px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label { display: block; font-family: var(--font-hand); font-size: 15px; font-weight: 600; color: #414942; letter-spacing: .03em; margin-bottom: 8px; }
.required { color: #7D9184; }
.input {
  width: 100%; background: #F1ECE3; border-radius: 8px; padding: 12px;
  font-size: 15px; border: 1px solid transparent; outline: none; box-sizing: border-box;
  -webkit-appearance: none;
}
.input:focus { border-color: #7D9184; background: #FFF; }
.textarea { min-height: 80px; resize: vertical; }
.char-count { display: block; text-align: right; font-size: 11px; color: #B8B2A7; margin-top: 4px; }

/* 盘子选择 */
.plate-selector { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; }
.plate-option { flex: 0 0 68px; border: 2px solid transparent; border-radius: 12px; padding: 4px; text-align: center; cursor: pointer; color: #6F8781; }
.plate-swatch { display: block; width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.75); box-shadow: inset 0 0 0 3px rgba(0,0,0,.08); }
.plate-swatch[style] { background-position: center; background-size: cover; }
.plate-none { background: linear-gradient(135deg, #F5F2EB 49%, #D3D9D5 50% 52%, #F5F2EB 53%); }
.plate-ink { background: radial-gradient(circle, #DDE7ED 0 55%, #1F3144 56%); }
.plate-coral { background: radial-gradient(circle, #FFF1E7 0 55%, #E36B56 56%); }
.plate-grid { background-color: #FFFDF7; background-image: linear-gradient(#C7AA75 1px, transparent 1px), linear-gradient(90deg, #C7AA75 1px, transparent 1px); background-size: 10px 10px; box-shadow: inset 0 0 0 8px #F4E3BC, inset 0 0 0 11px #B89C6A; }
.plate-sun { background: radial-gradient(circle, #FFF9E4 0 55%, #F2B441 56%); }
.plate-leaf { background: radial-gradient(circle, #EEF5E7 0 55%, #2F6A62 56%); }
.plate-dessert-cream { background: repeating-conic-gradient(#E8DCC9 0 8deg, #FFF9F0 8deg 16deg); box-shadow: inset 0 0 0 9px #FFF9F0, inset 0 0 0 11px #D0AE8F; }
.plate-dessert-berry { background: repeating-conic-gradient(#C87A86 0 8deg, #FFF1F3 8deg 16deg); box-shadow: inset 0 0 0 9px #FFF1F3, inset 0 0 0 11px #9F5968; }
.plate-dessert-caramel { background: repeating-conic-gradient(#C78E61 0 8deg, #FFF5E8 8deg 16deg); box-shadow: inset 0 0 0 9px #FFF5E8, inset 0 0 0 11px #A56B42; }
.plate-dessert-lilac { background: repeating-conic-gradient(#B9A1C5 0 8deg, #FBF5FF 8deg 16deg); box-shadow: inset 0 0 0 9px #FBF5FF, inset 0 0 0 11px #8F74A0; }
.plate-option span { display: block; margin-top: 4px; font-size: 10px; white-space: nowrap; }
.plate-option.selected { border-color: #7D9184; background: #F6F1E8; color: #5F7168; }

/* 主厨 */
.chef-profile { text-align: center; padding: 24px 20px 10px; }
.chef-avatar-wrap { position: relative; display: inline-block; padding-top: 10px; }
.chef-hat-badge { position: absolute; z-index: 3; left: 50%; top: -13px; display: flex; width: 48px; height: 38px; align-items: center; justify-content: center; transform: translateX(-50%) rotate(-3deg); border: 2px solid #FFF; border-radius: 16px 16px 12px 12px; background: #FFFDF8; color: #6F8781; box-shadow: 0 5px 12px rgba(71,111,105,.14); pointer-events: none; }
.chef-hat-badge svg { width: 34px; height: 34px; }
.chef-avatar-btn { position: relative; display: inline-flex; width: 104px; height: 104px; align-items: center; justify-content: center; border: 3px solid #FFF; border-radius: 50%; background: #F8E4D8; box-shadow: 0 4px 14px rgba(232,122,93,.18); overflow: hidden; cursor: pointer; }
.chef-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.chef-avatar-placeholder { display: inline-flex; width: 48px; height: 48px; color: #7D9184; }
.chef-avatar-placeholder svg { width: 100%; height: 100%; }
.chef-avatar-edit { position: absolute; right: 0; bottom: 2px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #7D9184; color: #FFF; font-size: 14px; }
.chef-hint { margin-top: 10px; font-size: 12px; color: #99988D; }
.chef-page.is-viewing .chef-avatar-btn { cursor: default; }
.chef-page.is-viewing .chef-form-card { background: #F8FBF9; }
.chef-page.is-viewing .input[readonly] { padding-left: 0; border-color: transparent; background: transparent; color: #414942; cursor: default; }
.chef-page.is-viewing input.input[readonly] { font-family: var(--font-hand); font-size: 18px; letter-spacing: .04em; }
.chef-page.is-viewing textarea.input[readonly] { min-height: 56px; line-height: 1.7; resize: none; }
.chef-mode-btn.edit { border: 1px solid #BFD4CC; background: #FFF; color: #5F7168; }
.chef-settings-link { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 32px); margin: 0 16px 28px; padding: 13px 4px; border: 0; border-top: 1px solid #DED8CD; background: transparent; color: #6F8781; font-size: 14px; text-align: left; cursor: pointer; }
.chef-settings-link span { color: #7D9184; font-family: Georgia, serif; font-size: 22px; line-height: 1; }

/* 我的餐具记忆 */
.tableware-memory { margin: 4px 16px 22px; padding: 17px 15px 19px; border: 1px solid #DED8CD; border-radius: 20px; background: #FAF7F0; overflow: hidden; }
.tableware-memory-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tableware-memory-head > div { display: flex; flex-direction: column; }
.tableware-memory-head span { color: #99988D; font-family: Georgia, serif; font-size: 8px; letter-spacing: .16em; }
.tableware-memory-head b { margin-top: 3px; color: #5F7168; font-family: var(--font-hand); font-size: 19px; letter-spacing: .08em; }
.tableware-memory-head button { flex-shrink: 0; padding: 7px 10px; border: 1px solid #D6D0C5; border-radius: 999px; background: #FFFDF8; color: #5F7168; font-size: 11px; cursor: pointer; }
.tableware-memory-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 5px 3px 3px; }
.tableware-memory-photo { position: relative; aspect-ratio: .86; padding: 5px 5px 17px; border: 1px solid #E4DDD2; border-radius: 5px; background: #FFFDF9; box-shadow: 0 5px 10px rgba(92,72,48,.13); transform-origin: center; }
.tableware-memory-photo.memory-0, .tableware-memory-photo.memory-4 { transform: rotate(-3deg); }
.tableware-memory-photo.memory-1, .tableware-memory-photo.memory-5 { transform: translateY(5px) rotate(2deg); }
.tableware-memory-photo.memory-2 { transform: rotate(3deg); }
.tableware-memory-photo.memory-3 { transform: translateY(-2px) rotate(-1deg); }
.tableware-memory-photo img { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; }
.delete-tableware-memory { position: absolute; right: -5px; top: -6px; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(65,73,66,.88); color: #FFF; font-size: 15px; line-height: 18px; cursor: pointer; }
.tableware-memory-empty { width: 100%; min-height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #CEC5B8; border-radius: 14px; background: #F5F0E7; color: #7D9184; cursor: pointer; }
.tableware-memory-empty span { font-size: 25px; }.tableware-memory-empty b { margin-top: 7px; color: #5F7168; font-size: 13px; }.tableware-memory-empty small { margin-top: 5px; color: #99988D; font-size: 10px; }

/* 头像框选 */
.avatar-crop-overlay { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(24,38,35,.72); backdrop-filter: blur(5px); }
.avatar-crop-dialog { width: min(100%, 342px); padding: 18px; border-radius: 22px; background: #FFF; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.avatar-crop-head { display: flex; flex-direction: column; margin-bottom: 14px; }
.avatar-crop-head b { color: #414942; font-size: 17px; }.avatar-crop-head span { margin-top: 4px; color: #99988D; font-size: 11px; }
.avatar-crop-stage { position: relative; width: min(280px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #DED8CD; touch-action: none; }
.avatar-crop-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.avatar-crop-stage i { position: absolute; inset: 11%; border: 2px solid #FFF; border-radius: 50%; box-shadow: 0 0 0 999px rgba(20,30,28,.55), 0 0 0 1px rgba(51,74,71,.3); pointer-events: none; }
.food-photo-crop .avatar-crop-stage i { inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.92); }
.avatar-zoom { display: flex; align-items: center; gap: 10px; margin: 16px 2px; color: #6F8781; font-size: 12px; }.avatar-zoom input { flex: 1; accent-color: #7D9184; }
.avatar-crop-actions { display: flex; gap: 9px; }.avatar-crop-actions button { flex: 1; min-height: 42px; border: 1px solid #DED8CD; border-radius: 11px; background: #FFF; color: #6F8781; font-size: 13px; }.avatar-crop-actions .confirm { border-color: #414942; background: #414942; color: #FFF; }

/* Rating select */
.rating-select { display: flex; align-items: center; gap: 4px; }
.category-select { display: flex; gap: 8px; }
.category-choice { flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #D6D0C5; border-radius: 12px; background: #FFF9FA; color: #6F8781; font-family: var(--font-hand); font-size: 15px; cursor: pointer; }
.category-choice small { margin-top: 2px; font-family: Georgia, serif; font-size: 9px; letter-spacing: .08em; }
.category-choice.selected { border-color: #7D9184; background: #E8E4D8; color: #5F7168; box-shadow: 0 3px 8px rgba(71,111,105,.1); }

/* ====== 分类记录页 ====== */
.category-page-head { display: flex; flex-direction: column; margin: 8px 28px 18px; color: #5F7168; }
.category-page-head span { font-family: var(--font-hand); font-size: 28px; font-weight: 700; letter-spacing: .14em; }
.category-page-head small { margin-top: 4px; font-family: Georgia, serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #99988D; }
.category-record-list { display: flex; flex-direction: column; gap: 10px; margin: 0 20px 28px; }
.category-record { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #DED8CD; border-radius: 16px; background: #FFF; color: #414942; text-align: left; cursor: pointer; box-shadow: 0 4px 12px rgba(71,111,105,.06); }
.category-record img, .category-record-placeholder { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 12px; object-fit: cover; }
.category-record-placeholder { display: flex; align-items: center; justify-content: center; background: #E8E4D8; color: #6F9A8D; font-size: 20px; }
.category-record > span { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.category-record b { font-family: var(--font-hand); font-size: 16px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-record small { margin-top: 5px; color: #99988D; font-size: 11px; }
.category-record i { padding: 0 6px; color: #6F9A8D; font-family: Georgia, serif; font-size: 22px; font-style: normal; }
.category-add-btn { position: fixed; right: 24px; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 20; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 18px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: #5F7168; color: #FFF; font-family: var(--font-hand); font-size: 16px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 8px 20px rgba(71,111,105,.26); cursor: pointer; }
.category-add-btn span { font-family: Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1; }
.category-add-btn:active { transform: scale(.96); }
.rating-star { font-size: 24px; cursor: pointer; opacity: 0.3; filter: grayscale(1); }
.rating-star.active { opacity: 1; filter: grayscale(0); }
.rating-text { font-size: 13px; color: #7D9184; margin-left: 8px; }
input[type="date"] { color: #414942; }

/* Primary Button */
.primary-btn { display: block; width: calc(100% - 32px); margin: 8px 16px 24px; background: #414942; color: #FFF; border: none; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 650; cursor: pointer; box-shadow: none; }
.primary-btn:active { opacity: 0.85; }

/* ====== Detail ====== */
.detail-card { background: #FFF; border-radius: 12px; margin: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.detail-gallery { }
.detail-gallery .gallery-main { width: 100%; height: 260px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.gallery-thumb { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; cursor: pointer; opacity: 0.6; }
.gallery-thumb.active { opacity: 1; border: 2px solid #7D9184; }
.detail-body { padding: 20px; }
.detail-dish { font-family: var(--font-hand); font-size: 23px; font-weight: 700; color: #414942; letter-spacing: .04em; margin-bottom: 8px; }
.detail-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.detail-meta span { font-size: 13px; }
.detail-date { color: #7D9184; font-weight: 500; }
.detail-meta :last-child { color: #99988D; }
.detail-rating {
  display: flex; align-items: center; gap: 4px; font-size: 14px;
  margin-bottom: 16px; padding: 8px 12px; background: #F6F1E8; border-radius: 8px;
}
.detail-rating .rating-text { font-size: 13px; color: #7D9184; }
.detail-notes { background: #FAF8F5; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.notes-lbl { display: block; font-size: 12px; color: #99988D; margin-bottom: 6px; }
.detail-notes p { font-size: 14px; color: #414942; line-height: 1.7; }
.detail-ingredients { background: #EFE9DF; }
.textarea-compact { min-height: 76px; }
.detail-time { display: flex; align-items: center; gap: 6px; }
.detail-time span { font-size: 11px; color: #B8B2A7; }

.action-bar { display: flex; gap: 12px; margin: 0 16px 24px; }
.action-btn {
  flex: 1; height: 44px; border-radius: 22px; font-size: 14px;
  border: none; cursor: pointer; font-weight: 500;
}
.action-btn:active { opacity: 0.7; }
.action-btn.edit { background: #E9E4D9; color: #7D9184; }
.action-btn.delete { background: #FBE9E9; color: #5F7168; }

/* ====== Settings ====== */
.manage-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; gap: 10px; cursor: pointer;
}
.manage-item span:first-child { font-size: 14px; color: #414942; }
.manage-item.danger span:first-child { color: #5F7168; }
.manage-item span:last-child { font-size: 20px; color: #B8B2A7; }
.manage-item:active { opacity: 0.6; }
.manage-div { height: 1px; background: #EFE9DF; }
.form-card.about { text-align: center; }
.form-card.about h3 { font-family: var(--font-hand); font-size: 19px; color: #7D9184; letter-spacing: .05em; margin-bottom: 4px; }
.form-card.about .version { font-size: 12px; color: #B8B2A7; display: block; margin-bottom: 8px; }
.form-card.about p { font-size: 13px; color: #6F8781; line-height: 1.6; }

/* ====== Privacy ====== */
.privacy-page { padding: 10px 20px 34px; }
.privacy-mark { display: flex; width: 62px; height: 62px; align-items: center; justify-content: center; margin: 8px auto 14px; border-radius: 50%; background: #E8E4D8; font-size: 27px; }
.privacy-page h2 { color: #414942; font-family: var(--font-hand); font-size: 24px; letter-spacing: .08em; text-align: center; }
.privacy-lead { margin: 14px 8px 20px; color: #6F8781; font-size: 13px; line-height: 1.8; text-align: center; }
.privacy-card { margin-bottom: 11px; padding: 16px; border: 1px solid #DED8CD; border-radius: 16px; background: #FFF; box-shadow: 0 4px 13px rgba(71,111,105,.05); }
.privacy-card b { display: block; color: #5F7168; font-family: var(--font-hand); font-size: 15px; letter-spacing: .03em; }
.privacy-card p { margin-top: 8px; color: #6F8781; font-size: 12px; line-height: 1.75; }

/* 手写字体使用原生字重，避免浏览器合成粗体后显得花哨 */
#pageTitle,
.page-header .page-title,
.home-record-heading,
.category-card span,
.section-title,
.recent-dish,
.tl-dish,
.month-dishes-head b,
.month-dish-card b,
.monthly-table-title b,
.table-dish b,
.table-empty-message,
.monthly-recap-head b,
.day-rec-dish,
.form-group label,
.chef-page.is-viewing input.input[readonly],
.tableware-memory-head b,
.tableware-memory-empty b,
.category-choice,
.category-page-head span,
.category-record b,
.category-add-btn,
.detail-dish,
.form-card.about h3,
.privacy-page h2,
.privacy-card b {
  font-weight: 400;
  font-synthesis: none;
}

/* ====== Scrollbar ====== */
::-webkit-scrollbar { width: 0; height: 0; }

/* ====== Responsive ====== */
@media (min-width: 500px) {
  #app { max-width: 450px; border-left: 1px solid #DED8CD; border-right: 1px solid #DED8CD; }
}

@media (max-width: 380px) {
  .monthly-table-card { margin-right: 12px; margin-left: 12px; }
  .tablecloth-scene { height: 248px; }
  .table-plate { width: 62px; height: 62px; padding: 4px; }
  .table-dish.has-photo b { max-width: 78px; font-size: 9px; }
}