#dashboard-page #water-add-btn { display:none; }

/* Refine the original three-column dashboard without changing its arrangement. */
#dashboard-page { --dash-ink:#0f172a; --dash-muted:#64748b; --dash-line:#e2e8f0; --dash-card:#fff; --dash-soft:#f8fafc; max-width:1200px; padding:32px 24px 96px; }
.dashboard-greeting { margin-bottom:24px; }
.dashboard-greeting h1 { font-family:'Space Grotesk',sans-serif; color:var(--dash-ink); font-size:clamp(24px,3vw,32px); font-weight:700; line-height:1.3; letter-spacing:-.035em; overflow-wrap:anywhere; }
.dashboard-greeting > p { margin-top:8px; font-size:14px; line-height:1.6; color:var(--dash-muted); }
#dashboard-page .dashboard-grid { display:grid; grid-template-columns:260px minmax(0,1fr) 220px; gap:20px; align-items:start; }
#dashboard-page .dashboard-grid > * { min-width:0; }
#dashboard-page .text-muted { color:var(--dash-muted); }
#dashboard-page .dashboard-grid .bg-card { background:var(--dash-card); border:1px solid var(--dash-line); border-radius:22px; box-shadow:none; }
#dashboard-page .dashboard-nutrition { padding:24px; gap:24px; }
#dashboard-page .dashboard-nutrition h2 { font-size:24px; line-height:1.15; letter-spacing:-.04em; }
#dashboard-page #calorie-ring { width:156px; height:156px; }
#dashboard-page .dashboard-nutrition > div:nth-child(3) { gap:14px; }
#dashboard-page .dashboard-nutrition > div:last-child { padding-top:18px; }
#dashboard-page #text-meal-input { min-height:42px; font-size:12px; border-color:var(--dash-line); background:var(--dash-soft); }
#dashboard-page #text-meal-btn { width:42px; height:42px; background:#047857; }
#dashboard-page #upload-outer { border:1.5px dashed #a7f3d0; background:var(--dash-card); border-radius:22px; }
#dashboard-page #upload-zone { min-height:190px; padding:24px 16px; gap:12px; }
#dashboard-page #upload-zone > svg path { stroke:#059669; }
#dashboard-page #upload-label { color:var(--dash-ink); font-size:14px; }
#dashboard-page #upload-zone > p:last-child { font-size:11px; line-height:1.8; text-align:center; max-width:300px; color:var(--dash-muted); }
#dashboard-page #upload-zone:focus-visible { outline:3px solid #059669; outline-offset:-5px; }
#dashboard-page #upload-result { padding:20px; gap:16px; }
#dashboard-page #result-name { font-size:16px; overflow-wrap:anywhere; }
#dashboard-page #result-desc { line-height:1.7; overflow-wrap:anywhere; }
#dashboard-page #result-log-btn,#dashboard-page #result-retry-btn { min-height:42px; }
#dashboard-page .dashboard-recent { display:flex; flex-direction:column; padding:22px; }
#dashboard-page #meals-container { flex:1; }
#dashboard-page .dashboard-recent h2 { font-size:19px; letter-spacing:-.025em; }
#dashboard-page .meal-item { padding-block:16px; gap:10px; }
#dashboard-page .meal-item .truncate { white-space:normal; overflow-wrap:anywhere; }
#dashboard-page .meal-item > div:nth-child(2) > p:last-child { line-height:1.8; font-size:11px; }
#dashboard-page .meal-item > span:last-child { font-size:10px; }
.dashboard-empty { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 12px; min-height:190px; }
.dashboard-empty-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:#ecfdf5; color:#047857; margin-bottom:16px; }
.dashboard-empty p { color:var(--dash-ink); font-size:14px; font-weight:600; }
.dashboard-empty span { max-width:270px; display:block; margin-top:8px; color:var(--dash-muted); font-size:12px; line-height:1.8; }
#dashboard-page .dashboard-empty.hidden { display:none; }
#dashboard-page .dashboard-quick-actions > * { padding:20px; border:1px solid var(--dash-line); border-radius:22px; box-shadow:none; }
#dashboard-page .dashboard-quick-actions #scan-btn { background:#ecfdf5; border-color:#a7f3d0; }
#dashboard-page #scan-btn > div,#dashboard-page #ai-chef-btn > div { gap:10px; font-size:18px; letter-spacing:-.025em; }
#dashboard-page #scan-btn > p,#dashboard-page #ai-chef-btn > p { margin-top:10px; font-size:12px; line-height:1.7; }
#dashboard-page #ai-chef-btn:hover { border-color:#10b981; }
#dashboard-page #water-drops { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#dashboard-page #water-drops button { width:100%; height:34px; border-radius:10px; border-width:1px; }
#dashboard-page #water-count { font-weight:600; }
#dashboard-page .dashboard-quick-actions > div:last-child > div:first-child { flex-wrap:wrap; gap:6px; }
#dashboard-page button:focus-visible,#dashboard-page a:focus-visible { outline:3px solid #059669; outline-offset:4px; }
html.dark #dashboard-page,body.dark #dashboard-page { --dash-ink:#e2e8f0; --dash-muted:#94a3b8; --dash-line:#334155; --dash-card:#1e293b; --dash-soft:#0f172a; }
html.dark #dashboard-page #scan-btn,body.dark #dashboard-page #scan-btn { background:#12382e!important; border-color:#245b49; }
html.dark #dashboard-page #upload-outer,body.dark #dashboard-page #upload-outer { border-color:#245b49; }
html.dark #dashboard-page #ring-label-consumed,body.dark #dashboard-page #ring-label-consumed { fill:#e2e8f0; }
html.dark #dashboard-page #calorie-ring > text:last-child,body.dark #dashboard-page #calorie-ring > text:last-child { fill:#94a3b8; }
html.dark #dashboard-page #water-drops button.bg-white,body.dark #dashboard-page #water-drops button.bg-white { background:#0f172a; border-color:#334155; }
@media(min-width:768px) and (max-width:1049px) {
  #dashboard-page .dashboard-grid { grid-template-columns:240px minmax(0,1fr); }
  .dashboard-quick-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  #dashboard-page .dashboard-quick-actions > * { padding:20px; }
  #dashboard-page #scan-btn > div,#dashboard-page #ai-chef-btn > div { font-size:15px; }
}
@media(max-width:767px) {
  #dashboard-page { padding:24px 16px calc(180px + env(safe-area-inset-bottom,0px)); }
  #dashboard-page .dashboard-grid { grid-template-columns:minmax(0,1fr); }
  #dashboard-page .dashboard-nutrition { display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px 16px; padding:20px; }
  #dashboard-page .dashboard-nutrition h2 { grid-column:1/-1; font-size:22px; }
  #dashboard-page .dashboard-nutrition h2 br { display:none; }
  #dashboard-page .dashboard-nutrition h2 br::after { content:' '; }
  #dashboard-page #calorie-ring { width:120px; height:120px; }
  #dashboard-page .dashboard-nutrition > div:last-child { grid-column:1/-1; }
  #dashboard-page .dashboard-nutrition > div:nth-child(3) { gap:12px; }
  #dashboard-page .dashboard-recent { padding:20px; }
  #dashboard-page .dashboard-meal-column { display:contents; }
  #dashboard-page .dashboard-quick-actions { display:none; }
  #dashboard-page #upload-outer { order:2; }
  #dashboard-page #upload-outer:has(#upload-zone:not(.hidden)) { display:none; }
  #dashboard-page .dashboard-recent { order:3; }
  #dashboard-page .dashboard-quick-actions > * { padding:16px; }
  #dashboard-page #scan-btn > div,#dashboard-page #ai-chef-btn > div { flex-wrap:wrap; font-size:16px; }
}

/* Let the three-meal preview size naturally so wheel scrolling stays on the page. */
@media(min-width:768px) {
  #dashboard-page .dashboard-grid { align-items:stretch; }
  #dashboard-page .dashboard-meal-column { min-height:0; }
  #dashboard-page #upload-outer { flex-shrink:0; }
  #dashboard-page .dashboard-recent { min-height:0; }
  #dashboard-page #meals-container { min-height:0; overflow:visible; }
  #dashboard-page .dashboard-quick-actions > div:last-child { flex:1; }
}
html.dark #dashboard-page .dashboard-empty-icon,body.dark #dashboard-page .dashboard-empty-icon { background:#064e3b; color:#6ee7b7; }

#dashboard-page .dashboard-recent .meal-item { padding-block:12px; }
#dashboard-page .dashboard-recent .meal-item .truncate { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.dashboard-recent-footer { padding-top:12px; margin-top:12px; border-top:1px solid var(--dash-line); font-size:12px; font-weight:600; flex-shrink:0; }
.dashboard-recent-footer a { display:inline-flex; align-items:center; gap:8px; color:#047857; }
.dashboard-recent-footer a:hover { text-decoration:underline; }
html.dark .dashboard-recent-footer a,body.dark .dashboard-recent-footer a { color:#6ee7b7; }

/* Full-page overlay shown while dragging an image into the dashboard. */
#page-drag-overlay { --drop-card:#fff; --drop-text:#0f172a; --drop-muted:#64748b; --drop-line:#a7f3d0; --drop-soft:#ecfdf5; --drop-accent:#047857; background:rgba(15,23,42,.65); backdrop-filter:blur(8px); padding:24px; }
.drag-drop-panel { width:100%; max-width:480px; padding:14px; border:1px solid var(--drop-line); border-radius:28px; background:var(--drop-card); box-shadow:0 24px 80px #02061740; animation:dragDropIn .18s ease-out both; }
.drag-drop-screen-frame { position:absolute; inset:clamp(8px,2vw,24px); pointer-events:none; }
.drag-drop-corner { position:absolute; width:clamp(40px,9vmin,96px); height:clamp(40px,9vmin,96px); border:solid #6ee7b7; border-width:0; }
.drag-drop-corner-tl { top:0; left:0; border-top-width:3px; border-left-width:3px; border-top-left-radius:28px; }
.drag-drop-corner-tr { top:0; right:0; border-top-width:3px; border-right-width:3px; border-top-right-radius:28px; }
.drag-drop-corner-bl { bottom:0; left:0; border-bottom-width:3px; border-left-width:3px; border-bottom-left-radius:28px; }
.drag-drop-corner-br { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; border-bottom-right-radius:28px; }
.drag-drop-stage { display:flex; flex-direction:column; align-items:center; text-align:center; border:1.5px dashed var(--drop-line); border-radius:20px; padding:30px 24px 28px; background:linear-gradient(180deg,var(--drop-soft),var(--drop-card)); }
.drag-drop-badge { display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--drop-accent); }
.drag-drop-badge > span { width:6px; height:6px; border-radius:50%; background:#10b981; }
.drag-drop-illustration { display:grid; place-items:center; width:132px; height:132px; background:var(--drop-soft); border:1px solid var(--drop-line); border-radius:32px; color:var(--drop-accent); margin:28px 0 24px; }
.drag-drop-stage h2 { font-family:'Space Grotesk',sans-serif; color:var(--drop-text); font-size:29px; font-weight:800; line-height:1.2; letter-spacing:-.04em; }
.drag-drop-stage > p { font-size:13px; color:var(--drop-muted); line-height:1.85; margin-top:12px; }
.drag-drop-formats { display:flex; gap:8px; margin-top:24px; }
.drag-drop-formats > span { font-size:10px; font-weight:600; color:var(--drop-accent); background:var(--drop-soft); border:1px solid var(--drop-line); border-radius:8px; padding:5px 10px; }
.drag-drop-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; color:var(--drop-muted); padding:16px 10px 4px; font-size:10px; line-height:1.6; }
.drag-drop-footer kbd { font:inherit; color:var(--drop-text); border:1px solid var(--drop-line); border-radius:5px; background:var(--drop-soft); padding:2px 5px; margin-right:3px; }
html.dark #page-drag-overlay,body.dark #page-drag-overlay { --drop-card:#1e293b; --drop-text:#e2e8f0; --drop-muted:#94a3b8; --drop-line:#245b49; --drop-soft:#12382e; --drop-accent:#6ee7b7; background:rgba(2,6,23,.78); }
@keyframes dragDropIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:480px) { #page-drag-overlay { padding:16px; } .drag-drop-panel { padding:10px; border-radius:24px; } .drag-drop-stage { padding:26px 16px; } .drag-drop-stage h2 { font-size:25px; } .drag-drop-footer { padding:14px 6px 4px; } }
@media(max-height:600px) { .drag-drop-stage { padding-block:18px; } .drag-drop-illustration { width:64px; height:64px; margin:10px 0; border-radius:18px; } .drag-drop-illustration svg { width:48px; height:48px; } .drag-drop-stage h2 { font-size:26px; } .drag-drop-stage > p { margin-top:8px; } .drag-drop-formats { margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { .drag-drop-panel { animation:none; } }

.dashboard-guidance-metrics { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.dashboard-guidance-metrics > span { padding:6px 10px; border:1px solid var(--dash-line); border-radius:99px; color:var(--dash-ink); background:var(--dash-card); font-size:11px; }
.dashboard-guidance-metrics > a { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 4px; color:#047857; font-size:11px; font-weight:600; text-decoration:none; }
.dashboard-guidance-metrics > a:hover { text-decoration:underline; text-underline-offset:3px; }
html.dark .dashboard-guidance-metrics > a { color:#6ee7b7; }
@media(max-width:767px) { .dashboard-guidance-metrics { gap:6px; } .dashboard-guidance-metrics > span { font-size:10px; padding:6px 9px; } .dashboard-guidance-metrics > a { display:none; } }

/* Keep daily usage below the main dashboard cards. */
#dashboard-page > .daily-usage { margin:24px 0 0; }