:root { --blue:#1a73e8; --blue-soft:#e8f0fe; --red:#ea4335; --yellow:#fbbc04; --green:#34a853; --ink:#202124; --muted:#5f6368; --line:#dadce0; --surface:#fff; --canvas:#fff; --shadow:0 1px 2px rgba(60,64,67,.12),0 2px 6px rgba(60,64,67,.08); font-family:"Google Sans Text","Google Sans",Arial,sans-serif; color:var(--ink); background:var(--canvas); font-synthesis:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; overflow-x:hidden; } body { margin:0; min-width:320px; max-width:100%; overflow-x:hidden; background:#fff; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; gap:38px; padding:0 32px; border-bottom:1px solid #f1f3f4; background:#fff; position:sticky; top:0; z-index:10; }.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-family:"Google Sans",Arial,sans-serif; font-size:21px; letter-spacing:-.03em; }.brand-mark { position:relative; display:grid; grid-template-columns:repeat(2,8px); gap:3px; width:19px; height:19px; transform:rotate(-8deg); }.brand-mark i { display:block; width:8px; height:8px; border-radius:3px; }.brand-mark i:nth-child(1){background:var(--blue)}.brand-mark i:nth-child(2){background:var(--red)}.brand-mark i:nth-child(3){background:var(--yellow)}.brand-mark i:nth-child(4){background:var(--green)}.topnav { display:flex; align-items:center; gap:6px; height:100%; }.nav-link { height:40px; padding:0 16px; border:0; border-radius:22px; color:var(--muted); background:transparent; font-size:14px; }.nav-link:hover,.nav-link.active { color:var(--blue); background:var(--blue-soft); }.avatar-button { display:grid; place-items:center; width:40px; height:40px; margin-left:auto; border:0; border-radius:50%; color:var(--muted); background:transparent; font-size:21px; }.avatar-button:hover,.icon-button:hover { color:var(--blue); background:var(--blue-soft); }
.app-shell { max-width:1160px; margin:0 auto; padding:62px 32px 90px; }.view { display:none; }.view.active-view { display:block; }.view-intro { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:42px; }.view-intro.compact { margin-bottom:32px; }.kicker { margin:0 0 10px; color:var(--blue); font-size:11px; font-weight:600; letter-spacing:.12em; }.view-intro h1 { margin:0 0 11px; font-family:"Google Sans",Arial,sans-serif; font-size:clamp(34px,5vw,56px); font-weight:500; letter-spacing:-.06em; line-height:1.08; }.intro-copy { margin:0; color:var(--muted); font-size:16px; }.color-dots { display:flex; gap:9px; padding-bottom:14px; }.dot { width:12px; height:12px; border-radius:50%; }.dot.blue{background:var(--blue)}.dot.red{background:var(--red)}.dot.yellow{background:var(--yellow)}.dot.green{background:var(--green)}
.flow-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:76px; align-items:start; }.record-flow { display:grid; gap:0; }.flow-section { display:grid; grid-template-columns:36px 1fr; gap:18px; padding-bottom:38px; position:relative; }.flow-section:not(:last-child)::after { content:""; position:absolute; left:17px; top:34px; bottom:0; width:1px; background:#e8eaed; }.section-index { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid currentColor; font-family:"Google Sans",Arial,sans-serif; font-size:14px; font-weight:600; }.blue-text{color:var(--blue)}.red-text{color:var(--red)}.yellow-text{color:#d89400}.section-body { min-width:0; max-width:100%; }.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }.section-heading > div { min-width:0; }.section-heading h2 { margin:0 0 5px; font-family:"Google Sans",Arial,sans-serif; font-size:21px; font-weight:500; letter-spacing:-.025em; }.section-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }.section-meta,.time-zone,.rail-status,.history-status { color:#80868b; font-size:12px; }.time-row { display:flex; align-items:center; gap:10px; width:100%; min-width:0; }.time-row input { flex:1 1 auto; min-width:0; max-width:100%; }.time-zone { flex:0 0 auto; white-space:nowrap; }input[type=datetime-local],textarea,input[type=search],select { border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; outline:0; transition:border-color .15s,box-shadow .15s; }input[type=datetime-local] { min-height:48px; padding:0 13px; }textarea { width:100%; min-height:142px; padding:14px; resize:vertical; line-height:1.65; }input[type=search],select { min-height:46px; padding:0 13px; }input:focus,textarea:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,115,232,.15); }
.meal-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }.meal-chip { min-height:34px; padding:0 14px; border:1px solid var(--line); border-radius:18px; color:var(--muted); background:#fff; font-size:13px; }.meal-chip:hover,.meal-chip.selected { color:var(--blue); border-color:var(--blue); background:var(--blue-soft); }.quiet-button,.text-link { border:0; color:var(--blue); background:transparent; font-size:13px; }.quiet-button { padding:6px 8px; border-radius:16px; white-space:nowrap; }.quiet-button:hover,.text-link:hover { background:var(--blue-soft); }.photo-preview { min-height:250px; display:grid; place-items:center; overflow:hidden; border:1px dashed #bdc1c6; border-radius:12px; background:#f8fafd; color:var(--muted); text-align:center; }.photo-empty { display:grid; gap:6px; place-items:center; }.photo-empty strong { color:var(--ink); font-size:14px; font-weight:500; }.photo-empty span:last-child { font-size:12px; }.camera-glyph { display:grid; place-items:center; width:44px; height:44px; margin-bottom:4px; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-size:26px; }.photo-preview img { width:100%; height:300px; object-fit:contain; background:#f1f3f4; }.photo-actions { display:flex; align-items:center; gap:13px; margin-top:12px; }.outline-button,.save-button { min-height:46px; padding:0 18px; border-radius:23px; font-size:14px; font-weight:500; }.outline-button { border:1px solid #aeb4bb; color:var(--blue); background:#fff; }.outline-button:hover { background:var(--blue-soft); border-color:var(--blue); }.save-button { display:flex; justify-content:center; align-items:center; gap:13px; border:1px solid var(--blue); color:#fff; background:var(--blue); }.save-button:hover { background:#185abc; box-shadow:var(--shadow); }.save-button:disabled,.outline-button:disabled { opacity:.55; cursor:wait; }.photo-actions .outline-button { flex:1; }.compression-panel { margin-top:17px; padding:16px; border-radius:10px; background:#f8fafd; }.label-row { display:flex; justify-content:space-between; align-items:baseline; }.compression-panel label { color:var(--ink); font-size:13px; }.compression-panel input { width:100%; accent-color:var(--blue); }.range-labels { display:flex; justify-content:space-between; color:#80868b; font-size:11px; }.status { min-height:39px; margin:13px 0 0; padding:10px 12px; border-radius:6px; font-size:13px; line-height:1.45; }.status:empty { display:none; }.status.info{color:#174ea6;background:#e8f0fe}.status.success{color:#137333;background:#e6f4ea}.status.error{color:#c5221f;background:#fce8e6}.field-error { min-height:16px; margin:6px 0 0; color:#c5221f; font-size:12px; }.action-row { display:grid; grid-template-columns:1fr 1.25fr; gap:10px; margin-top:18px; }
.today-rail { position:sticky; top:105px; padding:22px 22px 20px; border:1px solid #e1e4e8; border-radius:16px; box-shadow:var(--shadow); background:#fff; }.rail-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }.rail-label { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; letter-spacing:.12em; }.rail-heading h2 { margin:0; font-family:"Google Sans",Arial,sans-serif; font-size:20px; font-weight:500; }.icon-button { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; color:var(--muted); background:transparent; font-size:20px; }.rail-list { margin-top:12px; border-top:1px solid #f1f3f4; }.rail-item { display:grid; grid-template-columns:44px 1fr; gap:10px; padding:14px 0; border-bottom:1px solid #f1f3f4; }.rail-item > img,.rail-item .record-avatar { width:44px; height:44px; }.record-avatar { display:grid; place-items:center; border-radius:10px; color:var(--blue); background:var(--blue-soft); font-size:18px; }.record-content { min-width:0; }.record-meta { display:flex; justify-content:space-between; gap:8px; color:#80868b; font-size:11px; }.meal-label { color:var(--blue); font-weight:500; }.record-content h3 { overflow:hidden; margin:6px 0 0; font-size:13px; font-weight:500; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }.record-content p { margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }.food-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.food-tags span { padding:3px 7px; border-radius:10px; color:#5f6368; background:#f1f3f4; font-size:10px; }.text-link { display:block; width:100%; margin-top:17px; padding:8px; text-align:left; }.text-link span { float:right; font-size:16px; }
.history-toolbar { display:grid; grid-template-columns:1fr 150px; gap:10px; max-width:720px; margin-bottom:20px; }.search-box { display:flex; align-items:center; gap:8px; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:24px; color:var(--muted); }.search-box:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,115,232,.15); }.search-box input { width:100%; min-height:42px; padding:0; border:0; box-shadow:none; }.timeline-list { max-width:800px; margin-top:10px; border-top:1px solid #e8eaed; }.timeline-item { display:grid; grid-template-columns:92px 1fr; gap:17px; padding:20px 0; border-bottom:1px solid #e8eaed; }.timeline-item > img,.timeline-item .record-avatar { width:92px; height:92px; border-radius:12px; object-fit:cover; }.timeline-item .record-avatar { font-size:27px; }.timeline-item .record-content h3 { margin-top:8px; font-size:16px; white-space:normal; }.empty-state { padding:70px 20px; color:var(--muted); text-align:center; }.empty-state span { display:block; margin-bottom:12px; color:var(--blue); font-size:34px; }.empty-state strong { display:block; color:var(--ink); font-size:16px; font-weight:500; }.empty-state p { margin:8px 0 0; font-size:13px; }.bottom-nav { display:none; }
.review-dialog { width:min(92vw,500px); padding:26px; border:1px solid #dadce0; border-radius:18px; background:#fff; box-shadow:0 12px 40px rgba(60,64,67,.22); }.review-dialog::backdrop { background:rgba(32,33,36,.38); }.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; }.dialog-head h2 { margin:0; font-family:"Google Sans",Arial,sans-serif; font-size:22px; font-weight:500; }.review-time { margin:18px 0 10px; color:var(--blue); font-size:13px; }.review-summary { padding:14px; border-radius:10px; color:var(--muted); background:#f8fafd; font-size:13px; line-height:1.6; }.review-meal { display:inline-block; margin:14px 0 5px; padding:5px 10px; border-radius:14px; color:#174ea6; background:var(--blue-soft); font-size:12px; }.food-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #f1f3f4; font-size:13px; }.food-row span { color:var(--muted); }.uncertain { color:#b06000; font-size:12px; line-height:1.5; }.full-width { width:100%; margin-top:20px; }
@media (max-width:820px) { .topbar { padding:0 20px; }.app-shell { padding:42px 22px 60px; }.flow-layout { grid-template-columns:1fr; gap:22px; }.today-rail { position:static; }.view-intro { margin-bottom:32px; } }
@media (max-width:600px) { body { padding-bottom:72px; }.topbar { height:62px; padding:0 16px; gap:18px; }.brand { min-width:0; max-width:calc(100vw - 72px); font-size:18px; }.brand > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.topnav { display:none; }.app-shell { width:100%; max-width:100%; padding:34px 16px 30px; }.view-intro { align-items:flex-start; margin-bottom:28px; }.view-intro h1 { max-width:calc(100vw - 72px); font-size:36px; overflow-wrap:anywhere; }.intro-copy { max-width:270px; font-size:14px; line-height:1.5; }.color-dots { flex:0 0 auto; padding-top:8px; }.flow-section { grid-template-columns:30px minmax(0,1fr); gap:12px; padding-bottom:30px; }.flow-section:not(:last-child)::after { left:14px; top:31px; }.section-index { width:29px; height:29px; font-size:12px; }.section-heading h2 { font-size:19px; }.section-heading p { font-size:12px; }.section-heading { gap:8px; }.section-meta { flex:0 0 auto; }.time-row { display:block; width:100%; }.time-row input { display:block; width:100%; min-width:0; max-width:100%; font-size:14px; }.time-zone { display:block; margin-top:7px; }.meal-chips { gap:6px; }.meal-chip { padding:0 12px; }.action-row { grid-template-columns:1fr; }.today-rail { padding:19px 16px; }.history-toolbar { grid-template-columns:1fr; }.timeline-item { grid-template-columns:64px minmax(0,1fr); gap:12px; }.timeline-item > img,.timeline-item .record-avatar { width:64px; height:64px; }.timeline-item .record-content h3 { font-size:14px; }.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:20; display:flex; justify-content:space-around; height:64px; border-top:1px solid #e8eaed; background:rgba(255,255,255,.96); box-shadow:0 -2px 10px rgba(60,64,67,.08); }.bottom-link { display:grid; place-items:center; min-width:96px; border:0; border-radius:0; color:var(--muted); background:transparent; }.bottom-link span { font-size:21px; line-height:20px; }.bottom-link small { font-size:11px; }.bottom-link.active { color:var(--blue); }.review-dialog { padding:22px 18px; } }
@keyframes soft-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes soft-pop { 0% { opacity:0; transform:scale(.96); } 100% { opacity:1; transform:scale(1); } }
@keyframes success-glow { 0% { box-shadow:0 0 0 0 rgba(52,168,83,0); } 35% { box-shadow:0 0 0 5px rgba(52,168,83,.12); } 100% { box-shadow:0 0 0 0 rgba(52,168,83,0); } }
@keyframes dot-breathe { 0%,100% { transform:translateY(0); opacity:.85; } 50% { transform:translateY(-3px); opacity:1; } }
.active-view .view-intro { animation:soft-rise .28s ease-out both; }.active-view .flow-section { animation:soft-rise .3s ease-out both; }.active-view .flow-section:nth-child(1){animation-delay:.04s}.active-view .flow-section:nth-child(2){animation-delay:.09s}.active-view .flow-section:nth-child(3){animation-delay:.14s}.color-dots .dot:nth-child(1){animation:dot-breathe 2.8s ease-in-out infinite}.color-dots .dot:nth-child(2){animation:dot-breathe 2.8s .2s ease-in-out infinite}.color-dots .dot:nth-child(3){animation:dot-breathe 2.8s .4s ease-in-out infinite}.color-dots .dot:nth-child(4){animation:dot-breathe 2.8s .6s ease-in-out infinite}.photo-preview img { animation:soft-pop .25s ease-out both; }.outline-button,.save-button,.meal-chip,.icon-button { transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }.outline-button:active,.save-button:active,.meal-chip:active { transform:scale(.98); }.status.success { animation:success-glow .7s ease-out both; }.timeline-item,.rail-item { transition:transform .2s ease,box-shadow .2s ease; }.timeline-item:hover { transform:translateY(-2px); }.rail-item:hover { transform:translateX(3px); }
.timeline-item:nth-child(1),.rail-item:nth-child(1){animation:soft-rise .28s .03s ease-out both}.timeline-item:nth-child(2),.rail-item:nth-child(2){animation:soft-rise .28s .08s ease-out both}.timeline-item:nth-child(3),.rail-item:nth-child(3){animation:soft-rise .28s .13s ease-out both}.timeline-item:nth-child(4),.rail-item:nth-child(4){animation:soft-rise .28s .18s ease-out both}
.time-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; flex:1 1 auto; min-width:0; max-width:390px; }.time-field { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:10px; margin:0; padding:6px 8px 6px 12px; border:1px solid #c7d7f5; border-radius:12px; background:#f8faff; color:var(--blue); font-size:12px; font-weight:500; }.time-field > span { white-space:nowrap; }.time-fields input { width:100%; min-width:0; max-width:100%; border-color:transparent; background:transparent; }.time-fields input:hover { border-color:#b8cdf4; background:#fff; }.time-fields input:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(26,115,232,.12); }.time-row input { min-width:0; max-width:100%; }input[type=date],input[type=time] { min-height:42px; padding:0 9px; }
@media (max-width:600px) { .time-row { display:block; width:100%; }.time-fields { width:100%; max-width:none; grid-template-columns:minmax(0,1fr); gap:8px; }.time-field { grid-template-columns:48px minmax(0,1fr); padding-left:10px; }.time-fields input { display:block; width:100%; min-width:0; max-width:100%; font-size:14px; }.time-zone { display:block; margin-top:7px; } }
.review-meal-label { margin:14px 0 7px; color:var(--muted); font-size:12px; }.review-meal-options { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }.review-meal-option { min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:17px; color:var(--muted); background:#fff; font-size:12px; }.review-meal-option:hover,.review-meal-option.selected { border-color:var(--blue); color:#174ea6; background:var(--blue-soft); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }