:root {
  --bg: #fafaf9; --fg: #000; --muted: #78716c; --line: #e7e5e4; --card: #fff;
  --accent: #2563eb; --err: #dc2626; --warn: #b45309;
  --weight-bg: #e0f2fe; --weight-line: #bae6fd; --kcal-bg: #ffedd5; --kcal-line: #fed7aa;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0a09; --fg: #e7e5e4; --muted: #a8a29e; --line: #292524; --card: #1c1917;
          --accent: #60a5fa; --err: #f87171; --warn: #fbbf24;
          --weight-bg: #0c2a3d; --weight-line: #164e63; --kcal-bg: #3a2410; --kcal-line: #7c2d12; }
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1100px; padding: 16px; background: var(--bg); color: var(--fg);
       font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--fg); }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
button, .btn { font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
               background: var(--card); color: var(--fg); cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--accent); }
button.link { border: 0; background: none; color: var(--fg); padding: 0 4px; text-decoration: underline; }
form.inline { display: inline; margin: 0; }
.err { color: var(--err); }
.warn { color: var(--warn); }
.flash { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.status { color: var(--fg); font-size: 13px; margin-bottom: 12px; line-height: 1.9; }
#cards { margin-bottom: 14px; }
.rt { font-weight: 600; margin: 10px 0 6px; }
.rt-n { color: var(--fg); font-weight: 400; font-size: 12px; }
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.card .k { color: var(--fg); font-size: 12px; }
.card .v { font-size: 22px; font-weight: 600; white-space: nowrap; }
.card .s { color: var(--fg); font-size: 12px; }
@media (max-width: 760px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .card { padding: 8px; }
  .card .v { font-size: 18px; }
  .card .k, .card .s { font-size: 11px; }
}
.range { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.range .grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.range .lbl { min-width: 9.5em; font-weight: 600; }
.range input[type=date] { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); min-width: 0; }
@media (max-width: 560px) {
  .range .lbl { min-width: 0; width: 100%; }
}
html, body { overflow-x: hidden; }
.range button.on { border-color: var(--accent); color: var(--accent); }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.chart .box { position: relative; height: 280px; }
.login { max-width: 320px; margin: 12vh auto; }
.login form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login label { display: flex; flex-direction: column; gap: 4px; color: var(--fg); font-size: 13px; }
.login input { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
               background: var(--card); color: var(--fg); }
.doc { max-width: 720px; margin: 24px auto; }
.doc h2 { color: var(--fg); font-size: 16px; margin-top: 20px; }
.doc a { color: var(--accent); }
button:disabled { opacity: .6; cursor: wait; }
.spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card.c-weight { background: var(--weight-bg); border-color: var(--weight-line); }
.card.c-kcal { background: var(--kcal-bg); border-color: var(--kcal-line); }