.day-details { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e9ece5; scroll-margin-top: 18px; }
.day-details-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.day-details h3 { margin: 0; font-size: 15px; font-weight: 600; }
.day-details-heading > span, .day-meal-heading > span { font-size: 11px; color: #697663; }
.day-details h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: #54624b; }
.day-record { padding: 12px 0; border-bottom: 1px solid #eff0eb; }
.day-record-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.day-record time { color: #6f7967; font-size: 12px; font-variant-numeric: tabular-nums; }
.day-record strong { font-size: 16px; font-weight: 600; }
.day-record strong small { font-size: 11px; font-weight: 400; color: #75816a; }
.day-record .badge { font-size: 11px; }
.day-edit { margin-left: auto; padding: 8px; min-height: 40px; font-size: 12px; color: #9a624d; }
.day-record-note { font-size: 12px; color: #76816c; margin-top: 6px; line-height: 1.8; overflow-wrap: anywhere; }
.day-meal-name { font-size: 13px; margin-top: 7px; color: #4f5f46; overflow-wrap: anywhere; }
.day-meal-kcal { margin-left: auto; color: #82614a; font-size: 13px; }
.day-meal-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.day-empty { font-size: 12px; line-height: 1.9; color: #7a8571; padding: 10px 0; }
.day-detail-actions { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.day-detail-actions .secondary-button { min-height: 44px; flex: 1; font-size: 12px; padding: 10px; }
.chart-day { cursor: pointer; outline: none; }
.chart-day circle, .chart-selection-line { pointer-events: none; }
.chart-day:focus-visible .chart-hit { fill: #f2c5b52b; stroke: #ba735b; stroke-width: 2px; }
.chart-day:hover .chart-hit { fill: #f2c5b518; }
#trend-content .chart-wrap { display: block; padding-top: 12px; }
#trend-content .chart-wrap svg { display: block; min-height: 160px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chart-preview-slot { position: relative; min-height: 112px; }
.chart-hold-hint { min-height: 112px; padding: 18px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-radius: 10px; background: #faf8f4; color: #82715c; }
.chart-hold-hint strong { font-size: 13px; font-weight: 500; }
.chart-hold-hint span { font-size: 11px; line-height: 1.7; }
.chart-preview { position: absolute; inset: 0; border-radius: 10px; padding: 12px; background: #fff3e8; border: 1px solid #efd9c7; pointer-events: none; }
.chart-preview[hidden] { display: none; }
.chart-preview > strong { font-size: 12px; color: #795a44; }
.chart-preview-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 7px; }
.chart-preview-values span, .chart-preview-values small { display: block; font-size: 10px; color: #796b59; line-height: 1.6; }
.chart-preview-values b { display: block; font-size: 19px; font-weight: 600; color: #6f4d35; white-space: nowrap; }
.previewing .chart-hold-hint { visibility: hidden; }
.previewing .chart-day .chart-selection-line { opacity: 0; }
.previewing .chart-day.previewed .chart-selection-line { opacity: .8; }
.previewing .chart-day circle { r: 4; fill: white; }
.previewing .chart-day.previewed circle { r: 7; fill: #d77861; }
#trend-day-detail { scroll-margin-top: 18px; }
.android-app .day-details h3 { font-size: 14px; }
.android-app .day-record-main { gap: 10px; }
@media (max-width: 360px) {
  .day-record-main { gap: 8px; }
  .day-details-heading { flex-direction: column; }
  .day-record .badge { font-size: 10px; }
  .day-record strong { font-size: 15px; }
  .day-detail-actions { flex-direction: column; }
}