1:root {
  2  color-scheme: light;
  3  --bg: #f6f7f5;
  4  --panel: #ffffff;
  5  --ink: #0f172a;
  6  --muted: #64748b;
  7  --accent: #0f766e;
  8  --accent-soft: #e6f5f1;
  9  --border: #e2e8f0;
 10  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
 11  --field-bg: #f8fafc;
 12  --radius: 18px;
 13  --font: "Space Grotesk", "Montserrat", "Poppins", system-ui, sans-serif;
 14}
 15
 16:root[data-theme="dark"] {
 17  color-scheme: dark;
 18  --bg: #09111a;
 19  --panel: #121b27;
 20  --ink: #e6edf5;
 21  --muted: #9dafc5;
 22  --accent: #14b8a6;
 23  --accent-soft: #16303a;
 24  --border: #263546;
 25  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
 26  --field-bg: #1a2736;
 27}
 28
 29* {
 30  box-sizing: border-box;
 31  margin: 0;
 32  padding: 0;
 33}
 34
 35body {
 36  font-family: var(--font);
 37  background: radial-gradient(circle at top, #ffffff 0%, #f3f4f2 45%, #eef2f1 100%);
 38  color: var(--ink);
 39  min-height: 100vh;
 40}
 41
 42:root[data-theme="dark"] body {
 43  background: radial-gradient(circle at top, #122131 0%, #0b141d 45%, #09111a 100%);
 44}
 45
 46.app {
 47  max-width: 960px;
 48  margin: 32px auto 48px;
 49  padding: 0 20px;
 50}
 51
 52.topbar {
 53  display: flex;
 54  justify-content: space-between;
 55  align-items: center;
 56  gap: 24px;
 57  margin-bottom: 24px;
 58}
 59
 60.topbar-actions {
 61  display: flex;
 62  align-items: center;
 63  gap: 10px;
 64}
 65
 66.brand {
 67  display: flex;
 68  align-items: center;
 69  gap: 16px;
 70}
 71
 72.brand-logo {
 73  width: 44px;
 74  height: 44px;
 75  border-radius: 14px;
 76  box-shadow: var(--shadow);
 77  display: block;
 78}
 79
 80.brand h1 {
 81  font-size: 1.6rem;
 82  letter-spacing: -0.02em;
 83}
 84
 85.brand p {
 86  color: var(--muted);
 87  font-size: 0.9rem;
 88}
 89
 90.nav {
 91  display: flex;
 92  gap: 8px;
 93  background: var(--panel);
 94  padding: 6px;
 95  border-radius: 999px;
 96  border: 1px solid var(--border);
 97}
 98
 99.ghost {
100  background: var(--panel);
101  color: var(--ink);
102  border: 1px solid var(--border);
103  border-radius: 999px;
104  padding: 8px 14px;
105  font-weight: 600;
106  cursor: pointer;
107}
108
109.icon-button {
110  width: 40px;
111  height: 40px;
112  padding: 0;
113  display: inline-flex;
114  align-items: center;
115  justify-content: center;
116}
117
118.theme-icon {
119  width: 18px;
120  height: 18px;
121  display: inline-flex;
122}
123
124.theme-icon svg {
125  width: 100%;
126  height: 100%;
127  fill: currentColor;
128}
129
130.icon-sun {
131  display: none;
132}
133
134:root[data-theme="dark"] .icon-sun {
135  display: inline-flex;
136}
137
138:root[data-theme="dark"] .icon-moon {
139  display: none;
140}
141
142.file-input-hidden {
143  display: none;
144}
145
146.tab {
147  border: none;
148  background: transparent;
149  padding: 8px 18px;
150  border-radius: 999px;
151  font-weight: 600;
152  color: var(--muted);
153  cursor: pointer;
154  transition: all 160ms ease;
155}
156
157.tab.active {
158  color: var(--ink);
159  background: var(--accent-soft);
160}
161
162main {
163  display: grid;
164  gap: 20px;
165}
166
167.card {
168  background: var(--panel);
169  border-radius: var(--radius);
170  padding: 20px;
171  border: 1px solid var(--border);
172  box-shadow: var(--shadow);
173}
174
175.card-header {
176  display: flex;
177  justify-content: space-between;
178  align-items: baseline;
179  margin-bottom: 16px;
180  gap: 12px;
181}
182
183.card-header p {
184  color: var(--muted);
185  font-size: 0.9rem;
186}
187
188form {
189  display: grid;
190  gap: 14px;
191  grid-template-columns: 1.4fr 1fr 1fr auto;
192  align-items: end;
193}
194
195label {
196  display: grid;
197  gap: 6px;
198  font-size: 0.85rem;
199  color: var(--muted);
200}
201
202input,
203select {
204  padding: 10px 12px;
205  border-radius: 12px;
206  border: 1px solid var(--border);
207  font-size: 0.95rem;
208  background: var(--field-bg);
209  color: var(--ink);
210}
211
212.food-combobox {
213  position: relative;
214}
215
216.food-suggestions {
217  position: absolute;
218  top: calc(100% + 6px);
219  left: 0;
220  right: 0;
221  max-height: 220px;
222  overflow-y: auto;
223  border: 1px solid var(--border);
224  background: var(--panel);
225  border-radius: 12px;
226  box-shadow: var(--shadow);
227  z-index: 5;
228  padding: 4px;
229}
230
231.food-suggestion {
232  width: 100%;
233  text-align: left;
234  border: none;
235  background: transparent;
236  color: var(--ink);
237  padding: 10px 11px;
238  border-radius: 9px;
239  cursor: pointer;
240}
241
242.food-suggestion:hover,
243.food-suggestion.active {
244  background: var(--accent-soft);
245}
246
247button.primary {
248  background: var(--accent);
249  color: white;
250  border: none;
251  border-radius: 12px;
252  padding: 10px 18px;
253  font-weight: 600;
254  cursor: pointer;
255  transition: transform 140ms ease, box-shadow 140ms ease;
256}
257
258button.primary:hover {
259  transform: translateY(-1px);
260  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.25);
261}
262
263.hint {
264  margin-top: 10px;
265  color: var(--muted);
266  font-size: 0.85rem;
267}
268
269.intake-preview {
270  margin-top: 12px;
271  border: 1px solid var(--border);
272  background: var(--field-bg);
273  border-radius: 14px;
274  padding: 12px;
275}
276
277.preview-title {
278  font-size: 0.8rem;
279  color: var(--muted);
280  margin-bottom: 8px;
281}
282
283.preview-grid {
284  display: grid;
285  grid-template-columns: repeat(2, minmax(0, 1fr));
286  gap: 10px;
287}
288
289.preview-block {
290  background: var(--panel);
291  border: 1px solid var(--border);
292  border-radius: 10px;
293  padding: 10px;
294}
295
296.preview-block-title {
297  font-size: 0.75rem;
298  color: var(--muted);
299  margin-bottom: 6px;
300}
301
302.preview-values {
303  font-size: 0.86rem;
304  line-height: 1.35;
305}
306
307.totals {
308  display: grid;
309  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
310  gap: 12px;
311  margin-bottom: 16px;
312}
313
314.total-card {
315  padding: 12px 14px;
316  border-radius: 14px;
317  background: var(--field-bg);
318  border: 1px solid var(--border);
319}
320
321.total-card strong {
322  display: inline-flex;
323  align-items: baseline;
324  flex-wrap: nowrap;
325  font-size: 1.2rem;
326  line-height: 1.1;
327  white-space: nowrap;
328}
329
330.goal-soft {
331  display: inline-block;
332  color: var(--muted);
333  font-weight: inherit;
334  opacity: 0.85;
335}
336
337.total-unit {
338  display: inline-block;
339  margin-left: 4px;
340  font-size: 0.7em;
341  font-weight: 600;
342  color: var(--muted);
343}
344
345.total-card span {
346  display: block;
347  color: var(--muted);
348  font-size: 0.8rem;
349}
350
351.list {
352  display: grid;
353  gap: 10px;
354}
355
356.history-day-group {
357  display: grid;
358  gap: 8px;
359}
360
361.history-day-group + .history-day-group {
362  margin-top: 10px;
363}
364
365.history-day-title {
366  font-size: 0.82rem;
367  color: var(--muted);
368  font-weight: 700;
369  letter-spacing: 0.02em;
370  text-transform: uppercase;
371  margin: 2px 2px 0;
372}
373
374.row {
375  display: flex;
376  justify-content: space-between;
377  align-items: center;
378  padding: 12px 14px;
379  border-radius: 12px;
380  background: var(--field-bg);
381  border: 1px solid var(--border);
382}
383
384.row-actions {
385  display: flex;
386  align-items: center;
387  gap: 10px;
388}
389
390.row-title {
391  font-weight: 600;
392}
393
394.row-sub {
395  color: var(--muted);
396  font-size: 0.8rem;
397  margin-top: 2px;
398}
399
400.row-kcal {
401  font-weight: 700;
402}
403
404.row-delete {
405  border: 1px solid var(--border);
406  background: transparent;
407  color: var(--ink);
408  border-radius: 999px;
409  width: 34px;
410  height: 34px;
411  padding: 0;
412  cursor: pointer;
413}
414
415.row-edit {
416  border: 1px solid var(--border);
417  background: transparent;
418  color: var(--ink);
419  border-radius: 999px;
420  width: 34px;
421  height: 34px;
422  padding: 0;
423  cursor: pointer;
424}
425
426.icon-action {
427  display: inline-flex;
428  align-items: center;
429  justify-content: center;
430}
431
432.icon-action svg {
433  width: 16px;
434  height: 16px;
435  fill: currentColor;
436  display: block;
437}
438
439.row-edit:hover {
440  color: var(--accent);
441  border-color: var(--accent);
442}
443
444.row-delete:hover {
445  color: #ef4444;
446  border-color: #ef4444;
447}
448
449.history-controls {
450  display: grid;
451  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
452  gap: 12px;
453  margin-bottom: 16px;
454}
455
456.history-charts {
457  display: grid;
458  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
459  gap: 12px;
460  margin-bottom: 16px;
461}
462
463.chart-card {
464  background: var(--field-bg);
465  border: 1px solid var(--border);
466  border-radius: 14px;
467  padding: 12px;
468  position: relative;
469}
470
471.chart-card h3 {
472  font-size: 0.9rem;
473  margin-bottom: 10px;
474}
475
476.chart-grid {
477  min-height: 170px;
478}
479
480#history-kcal-chart {
481  display: block;
482}
483
484#history-macro-chart {
485  display: grid;
486  grid-auto-flow: column;
487  grid-auto-columns: minmax(26px, 1fr);
488  gap: 8px;
489  overflow-x: auto;
490  padding-bottom: 4px;
491}
492
493.chart-col {
494  display: grid;
495  grid-template-rows: auto 1fr auto;
496  align-items: end;
497  min-width: 26px;
498}
499
500.chart-value {
501  font-size: 0.7rem;
502  color: var(--muted);
503  text-align: center;
504  margin-bottom: 4px;
505}
506
507.chart-track {
508  height: 110px;
509  border-radius: 10px;
510  border: 1px solid var(--border);
511  background: var(--panel);
512  position: relative;
513  overflow: hidden;
514}
515
516.chart-fill {
517  position: absolute;
518  left: 0;
519  right: 0;
520  bottom: 0;
521  border-radius: 8px;
522}
523
524.chart-fill.kcal {
525  background: linear-gradient(180deg, #14b8a6, #0f766e);
526}
527
528.chart-track.stacked {
529  display: flex;
530  flex-direction: column-reverse;
531  justify-content: flex-start;
532  align-self: end;
533  height: 110px;
534}
535
536.chart-seg {
537  width: 100%;
538}
539
540.chart-seg.protein,
541.legend-dot.protein {
542  background: #22c55e;
543}
544
545.chart-seg.carbs,
546.legend-dot.carbs {
547  background: #f59e0b;
548}
549
550.chart-seg.fat,
551.legend-dot.fat {
552  background: #ef4444;
553}
554
555.chart-label {
556  font-size: 0.68rem;
557  color: var(--muted);
558  text-align: center;
559  margin-top: 5px;
560  white-space: nowrap;
561}
562
563.chart-legend {
564  display: flex;
565  gap: 10px;
566  flex-wrap: wrap;
567  margin-top: 10px;
568  font-size: 0.75rem;
569  color: var(--muted);
570}
571
572.chart-legend span {
573  display: flex;
574  align-items: center;
575  gap: 5px;
576}
577
578.line-chart-scroll {
579  overflow-x: auto;
580  padding-bottom: 2px;
581}
582
583.line-chart-svg {
584  display: block;
585  width: 100%;
586  min-width: 320px;
587  height: 180px;
588}
589
590.line-axis {
591  stroke: var(--border);
592  stroke-width: 1;
593}
594
595.line-path {
596  fill: none;
597  stroke: var(--accent);
598  stroke-width: 3;
599  stroke-linecap: round;
600  stroke-linejoin: round;
601}
602
603.goal-line {
604  stroke: #f59e0b;
605  stroke-width: 1.5;
606  stroke-dasharray: 6 4;
607}
608
609.line-point {
610  fill: var(--accent);
611  stroke: var(--panel);
612  stroke-width: 2;
613}
614
615.line-point.goal-under {
616  fill: #ef4444;
617}
618
619.line-point.goal-over {
620  fill: #22c55e;
621}
622
623.line-chart-labels {
624  display: flex;
625  justify-content: space-between;
626  margin-top: 4px;
627  color: var(--muted);
628  font-size: 0.72rem;
629}
630
631.chart-tooltip {
632  position: absolute;
633  z-index: 3;
634  max-width: 180px;
635  padding: 6px 8px;
636  border-radius: 8px;
637  border: 1px solid var(--border);
638  background: var(--panel);
639  color: var(--ink);
640  font-size: 0.72rem;
641  pointer-events: none;
642  box-shadow: var(--shadow);
643}
644
645.goal-indicators {
646  display: grid;
647  gap: 8px;
648}
649
650.goal-row {
651  display: flex;
652  flex-wrap: wrap;
653  gap: 8px;
654  align-items: center;
655  padding: 10px;
656  border: 1px solid var(--border);
657  border-radius: 10px;
658  background: var(--panel);
659}
660
661.goal-row strong {
662  font-size: 0.86rem;
663}
664
665.goal-row > span {
666  font-size: 0.75rem;
667  color: var(--muted);
668}
669
670.goal-chip {
671  padding: 3px 8px;
672  border-radius: 999px;
673  border: 1px solid var(--border);
674  font-size: 0.72rem;
675}
676
677.goal-chip.under {
678  color: #dc2626;
679}
680
681.goal-chip.on {
682  color: #16a34a;
683}
684
685.goal-chip.over {
686  color: #0369a1;
687}
688
689.settings-panels {
690  display: grid;
691  gap: 14px;
692}
693
694.settings-panel {
695  background: var(--field-bg);
696  border: 1px solid var(--border);
697  border-radius: 14px;
698  padding: 14px;
699}
700
701.settings-panel h3 {
702  font-size: 0.95rem;
703  margin-bottom: 10px;
704}
705
706.settings-actions {
707  display: flex;
708  gap: 10px;
709  flex-wrap: wrap;
710}
711
712.goals-form {
713  display: grid;
714  gap: 12px;
715  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
716}
717
718.legend-dot {
719  display: inline-block;
720  width: 10px;
721  height: 10px;
722  border-radius: 50%;
723}
724
725.hidden {
726  display: none;
727}
728
729@media (max-width: 720px) {
730  .topbar {
731    flex-direction: column;
732    align-items: flex-start;
733  }
734
735  .topbar-actions {
736    width: 100%;
737    justify-content: space-between;
738    gap: 10px;
739  }
740
741  .nav {
742    flex: 1;
743    justify-content: center;
744  }
745
746  form {
747    grid-template-columns: 1fr;
748  }
749
750  .goals-form {
751    grid-template-columns: 1fr;
752  }
753
754  .settings-actions .ghost {
755    width: 100%;
756  }
757
758  .preview-grid {
759    grid-template-columns: 1fr;
760  }
761}