/* ===== Trackerrr ===== */
/* Paleta: Aegean Sky #1A6FBF · Sandy Linen #F5F0E8 · Scarlet #D91A2A (+ námořnická modř z textu) */
@property --tint { syntax: '<color>'; inherits: true; initial-value: #1A6FBF; }
:root {
  /* tmavý (výchozí): hluboká Aegean modř místo lnu, lněný text */
  --bg: #0B1626; --surface: #13233A; --surface2: #1B3150; --line: rgba(245,240,232,.08);
  --ink: #F5F0E8; --ink-rgb: 245 240 232; --sh: 0 0 0; --mut: rgba(245,240,232,.74); --dim: rgba(245,240,232,.56);
  --blue: #4592DC; --blue2: #1A6FBF; --red: #EE3B48; --linen: #F5F0E8;
  --orb-bg: radial-gradient(circle at 32% 26%, #2C4A70 0%, #172D4A 58%, #0F2036 100%); --orb-hi: rgba(255,255,255,.18);
  --dock-bg: rgba(19,35,58,.78); --toast-bg: rgba(31,52,82,.96); --toast-ink: #F5F0E8; --grain-blend: overlay; --grain-op: .09;
  --logo-filter: none; --glare: rgba(255,255,255,.3);
  --water: var(--blue); --supp: var(--red); --food: var(--ink); --star: var(--red);
  --ok: var(--blue); --no: var(--red); --flame: var(--red);
  --accent: var(--blue);
  --shadow: 0 1px 2px rgb(var(--sh) / .2), 0 8px 20px -10px rgb(var(--sh) / .45);
  --ease-out: cubic-bezier(.23,1,.32,1); --ease-io: cubic-bezier(.77,0,.175,1); --ease-drawer: cubic-bezier(.32,.72,0,1);
  --spring: cubic-bezier(.34,1.32,.64,1);
  --gut: 16px; --r: 20px;
  --mono: 'Geist Mono', ui-monospace, monospace; --dot: 'Doto', var(--mono);
}
:root[data-theme="light"] { color-scheme: light;
  --bg: #F5F0E8; --surface: #FFFCF7; --surface2: #ECE5D9; --line: rgba(16,35,61,.09);
  --ink: #10233D; --ink-rgb: 16 35 61; --sh: 16 35 61; --mut: rgba(16,35,61,.72); --dim: rgba(16,35,61,.58);
  --blue: #1A6FBF; --blue2: #0F4C8A; --red: #D91A2A;
  --orb-bg: radial-gradient(circle at 32% 26%, #fff 0%, #E7EEF6 55%, #D6E2EF 100%); --orb-hi: rgba(255,255,255,.9);
  --dock-bg: rgba(255,252,247,.8); --toast-bg: rgba(16,35,61,.95); --toast-ink: #F5F0E8; --grain-blend: multiply; --grain-op: .12;
  --glare: rgba(255,255,255,.75); --logo-filter: brightness(0) invert(13%) sepia(30%) saturate(1500%) hue-rotate(185deg);
  --shadow: 0 1px 2px rgb(var(--sh) / .05), 0 6px 18px -8px rgb(var(--sh) / .14);
}
body[data-tab="supps"] { --accent: var(--red); --tint: #D91A2A; }
body[data-tab="food"] { --accent: var(--ink); --tint: #10233D; }
body[data-tab="stats"] { --tint: #0F4C8A; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { margin: 0; min-height: 100dvh; color: var(--ink); background: var(--bg); overflow-x: hidden;
  font: 400 16px/1.4 Geist, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
body.noscroll { overflow: hidden; }
/* ovládací prvky se nevybírají a neotevírají menu při podržení; obsah ano */
button, .dock, .week, .seg, .chips, .quick { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { opacity: .28; cursor: default; }
h1, h2, h3, p { margin: 0; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
input { caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.num, .row__v, .dose small, input[type="number"], input[type="time"] { font-variant-numeric: tabular-nums; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dot { font-family: var(--dot); font-weight: 900; letter-spacing: .02em; }
.warn { color: var(--red) !important; } .okc { color: var(--blue); }

/* pozadí: nádech barvy záložky + zrno papíru */
.tint { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(110% 46% at 50% -10%, color-mix(in srgb, var(--tint) 13%, transparent) 0%, transparent 70%);
  transition: --tint .7s var(--ease-out); }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ===== úvod: bílé logo na Aegean modré, rozplyne se do appky ===== */
.boot { position: fixed; inset: 0; z-index: 400; background: var(--blue); display: grid; place-items: center; transition: opacity .5s var(--ease-out); }
.boot.out { opacity: 0; pointer-events: none; }
.boot__in { display: flex; flex-direction: column; align-items: center; transition: transform .55s var(--ease-out), filter .55s var(--ease-out); }
.boot.out .boot__in { transform: scale(1.5); filter: blur(12px); }
/* logo.png má kolem textu hodně průhledného okraje → proto tak velké */
.boot__logo { width: 320px; height: 320px; animation: logoIn .7s .05s var(--ease-out) both; }
@keyframes logoIn { from { opacity: 0; transform: scale(.9) rotate(-4deg); filter: blur(10px); } }
body:not(.ready) .wrap, body:not(.ready) .top, body:not(.ready) .dock { opacity: 0; }
.ready .top { animation: appIn .6s var(--ease-out) both; }
.ready .wrap { animation: appIn .6s .06s var(--ease-out) both; }
.ready .dock { animation: dockIn .7s .14s var(--ease-out) both; }
@keyframes appIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } }
@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 40px); } }

/* ===== hlavička ===== */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) var(--gut) 12px; max-width: 560px; margin: 0 auto;
  background: linear-gradient(180deg, var(--bg) 58%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.top__l { flex: 1; min-width: 0; }
.top h1 { font: 900 26px/1 var(--dot); letter-spacing: .05em; white-space: nowrap; }
.top h1.swap { animation: titleIn .45s var(--ease-out) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.top__sub { font-size: 14px; color: var(--mut); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__sub::first-letter { text-transform: uppercase; }
.top__r { display: flex; gap: 6px; }
.ibtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--mut); box-shadow: var(--shadow);
  transition: transform .16s var(--ease-out), color .2s; }
.ibtn:active { transform: scale(.94); }
.ibtn.ghost { background: none; color: var(--dim); box-shadow: none; }
.ibtn.ghost .i { width: 18px; height: 18px; }
#syncBtn[data-state="ok"] { color: var(--blue); }
#syncBtn[data-state="busy"] { color: var(--blue2); }
#syncBtn[data-state="err"] { color: var(--red); }
.battery { position: relative; width: 56px; height: 22px; border-radius: 999px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; flex: none; }
.battery i { position: absolute; inset: 0 auto 0 0; transition: width 1s var(--ease-out); background: linear-gradient(90deg, #f0623b, var(--red)); }
.battery[data-phase="day"] i { background: linear-gradient(90deg, #4a95dc, var(--blue)); }
.battery[data-phase="night"] i { background: linear-gradient(90deg, #24456f, var(--ink)); }
.battery span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #fff 0 var(--w, 50%), var(--ink) var(--w, 50%)); }

/* ===== obsah a přechody mezi záložkami ===== */
.wrap { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 var(--gut); }
.view { --dir: 1; display: flex; flex-direction: column; gap: 16px; }
.view.leave { position: absolute; left: var(--gut); right: var(--gut); pointer-events: none; animation: viewOut .26s var(--ease-out) both; }
@keyframes viewOut { to { opacity: 0; transform: translateX(calc(var(--dir) * -40px)) scale(.97); filter: blur(5px); } }
.view.enter { animation: viewIn .5s var(--ease-out) both; }
@keyframes viewIn { from { transform: translateX(calc(var(--dir) * 48px)); } }
.view.enter > * { animation: itemIn .55s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 45ms + 30ms); }
@keyframes itemIn { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px); } }

.card { background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.sec { display: flex; align-items: baseline; gap: 8px; margin: 8px 4px -6px; font-size: 15px; font-weight: 600; }
.sec span { color: var(--dim); font-weight: 500; font-size: 14px; }
.sec .i { width: 16px; height: 16px; color: var(--dim); align-self: center; }
.empty { padding: 22px 16px; text-align: center; color: var(--dim); font-size: 15px; }
.note { font-size: 14px; color: var(--dim); line-height: 1.45; }
.note b { color: var(--ink); font-weight: 600; }
.pastbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 6px 6px 6px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--red) 9%, var(--surface)); color: var(--red); font-size: 14.5px; }
.pastbar button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 600; font-size: 14px; transition: transform .16s var(--ease-out); }
.pastbar button:active { transform: scale(.97); }

/* seskupený seznam (jako iOS): jeden blok, řádky oddělené linkou */
.group { background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.group > * + * { box-shadow: inset 0 1px 0 var(--line); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 6px 8px 14px; text-align: left; }
button.row { transition: background .15s; }
button.row:active { background: var(--surface2); }
.row.sel { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.row.new { animation: rowIn .5s var(--ease-out) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } }
.row.out { transition: transform .2s var(--ease-out), opacity .2s; transform: translateX(40px); opacity: 0; }
.gi { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.gi .i { width: 18px; height: 18px; }
.gi--food, .grow--food .gi { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.grow--supp .gi { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--red); }
.row__e { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface2); font-size: 19px; }
.row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; }
.row__t b { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__t small { font-size: 13.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__t small.cat { color: var(--blue); font-size: 12.5px; font-weight: 600; }
.row__v { font-size: 15px; font-weight: 600; white-space: nowrap; padding-right: 8px; }
.row > .i.on { width: 15px; height: 15px; margin: 0 8px 0 -6px; }
.srow { display: flex; gap: 1px; flex: none; }
.srow .i, .avg .i, .row > .i { width: 13px; height: 13px; stroke-width: 0; fill: rgb(var(--ink-rgb) / .13); }
.srow .i.on, .avg .i.on, .row > .i.on { fill: var(--star); }
.dhead { padding: 14px 14px 6px; font-size: 13.5px; font-weight: 600; color: var(--mut); }
.dhead::first-letter { text-transform: uppercase; }
.group > .dhead + .row { box-shadow: none; }

.bar { height: 6px; border-radius: 6px; background: rgb(var(--ink-rgb) / .08); overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .8s var(--spring); }
.bar--lg { height: 10px; overflow: visible; }
.bar--lg i { max-width: 100%; }
.view.enter .bar i { animation: barIn 1s .2s var(--ease-out) both; }
@keyframes barIn { from { width: 0; } }
.bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); opacity: .45; }

/* tlačítka */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px;
  font-weight: 600; font-size: 16px; transition: transform .16s var(--ease-out), background .2s; }
.btn:active { transform: scale(.97); }
.btn .i { width: 18px; height: 18px; }
.btn.sm { min-height: 44px; font-size: 15px; }
.btn--water { background: var(--blue); color: #fff; }
.btn--supp { background: var(--red); color: #fff; }
.btn--food { background: var(--ink); color: var(--bg); }
.btn--ghost { background: var(--surface); color: var(--mut); box-shadow: var(--shadow); }
.btn--danger { background: color-mix(in srgb, var(--red) 9%, var(--surface)); color: var(--red); }
.seg { display: flex; padding: 3px; border-radius: 13px; background: var(--surface2); }
.seg button { flex: 1; min-height: 38px; padding: 0 8px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--mut); text-align: center; white-space: nowrap; transition: background .25s var(--ease-out), color .2s, box-shadow .25s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(var(--sh) / .14); }
.seg--sm button { min-height: 32px; font-size: 13.5px; padding: 0 10px; }

/* ===== přehled: týden ===== */
.week__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.streak { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); transition: transform .16s var(--ease-out); }
.streak:active { transform: scale(.97); }
.streak .i { width: 18px; height: 18px; fill: color-mix(in srgb, var(--red) 25%, transparent); animation: flicker 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.08, .95) rotate(-3deg); } 60% { transform: scale(.96, 1.06) rotate(2deg); } }
.streak b { font: 900 20px/1 var(--dot); color: var(--ink); }
.streak span { font-size: 14px; color: var(--mut); }
.week__nav { display: flex; align-items: center; }
.week__nav span { min-width: 96px; text-align: center; font-size: 14px; font-weight: 500; color: var(--mut); }
.week__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.week__row.slideR { animation: weekIn .4s var(--ease-out) both; --wd: 1; }
.week__row.slideL { animation: weekIn .4s var(--ease-out) both; --wd: -1; }
@keyframes weekIn { from { opacity: 0; transform: translateX(calc(var(--wd) * 30px)); filter: blur(3px); } }
.day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 7px; border-radius: 14px; transition: background .25s, transform .16s var(--ease-out), box-shadow .25s; }
.day:active { transform: scale(.95); }
.day.on { background: var(--surface); box-shadow: var(--shadow); }
.day__ring { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.day__ring svg:first-child { position: absolute; inset: 0; transform: rotate(-90deg); }
.day__ring circle { fill: none; stroke-width: 3; }
.day__ring .bg { stroke: rgb(var(--ink-rgb) / .09); }
.day__ring .fg { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease-out); }
.view.enter .day__ring .fg { animation: ringIn 1.1s var(--ease-out) both; animation-delay: .15s; }
@keyframes ringIn { from { stroke-dashoffset: 94.25; } }
.day__ring b { font: 500 13px/1 Geist; font-variant-numeric: tabular-nums; color: var(--mut); }
.day.today .day__ring b { color: var(--ink); font-weight: 700; }
.day.full .day__ring .i { width: 16px; height: 16px; color: var(--blue); stroke-width: 3; }
.day__l { font-size: 12px; font-weight: 500; color: var(--dim); }
.day.on .day__l, .day.today .day__l { color: var(--ink); }
.day__dots { display: flex; gap: 3px; height: 4px; }
.day__dots i { width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--ink-rgb) / .1); }
.day__dots i.p { background: var(--red); } .day__dots i.f { background: var(--ink); }

/* ===== přehled: kapka (hlavní moment appky) ===== */
.orbwrap { display: flex; flex-direction: column; align-items: center; padding: 8px 0 0; }
.orb { position: relative; width: 216px; height: 216px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--orb-bg);
  box-shadow: inset 10px 16px 26px var(--orb-hi), inset -10px -18px 30px rgb(var(--sh) / .14), 0 26px 50px -20px rgba(26,111,191,.6), 0 4px 12px -6px rgb(var(--sh) / .2);
  animation: morph 9s ease-in-out infinite; transition: transform .2s var(--ease-out); isolation: isolate; }
.orb:active { transform: scale(.97); }
.orb.splash { animation: morph 9s ease-in-out infinite, squash .7s var(--spring); }
@keyframes squash { 0% { scale: 1; } 25% { scale: 1.06 .94; } 55% { scale: .97 1.03; } 100% { scale: 1; } }
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 66% 34% / 42% 48% 58% 52%; }
  33% { border-radius: 64% 36% 52% 48% / 36% 38% 62% 64%; }
  66% { border-radius: 50% 50% 38% 62% / 58% 56% 44% 42%; }
}
.orb__water { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* lesk skla nahoře, přes vodu */
.orb::after { content: ''; position: absolute; left: 18%; top: 10%; width: 38%; height: 22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--glare), transparent); filter: blur(2px); transform: rotate(-24deg); }
.orb__eyes { width: 96px; height: 48px; }
.orb__pct { --cut: 999px; font: 900 44px/1 var(--dot); letter-spacing: .02em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, var(--ink) 0 var(--cut), #fff var(--cut) 100%); }
.orb__sub { margin-top: 16px; font-size: 16px; color: var(--mut); }
.orb__sub .num { color: var(--ink); font-weight: 600; }
.pace { margin-top: 4px; font-size: 14px; font-weight: 500; }

.quick { display: flex; gap: 8px; }
.qd { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; padding: 0 10px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow); color: var(--blue); transition: transform .16s var(--ease-out), background .2s; }
.qd:active { transform: scale(.95); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); }
.qd .i { width: 18px; height: 18px; }
.qd span { display: none; }
.qd small { font-size: 16px; font-weight: 600; color: var(--ink); }
/* odlétající „+900 ml“ */
.floaty { position: fixed; z-index: 350; pointer-events: none; transform: translate(-50%, 0); font: 900 20px/1 var(--dot); color: var(--blue); white-space: nowrap;
  animation: floatUp .9s var(--ease-out) both; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -8px) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -64px) scale(1); filter: blur(2px); } }

.grow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 12px 10px 14px; text-align: left; }
.grow__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
button.grow:active, .grow__main:active { opacity: .7; }
.grow__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grow__t b { font-size: 16px; font-weight: 600; }
.grow__t small { font-size: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frac { font: 900 20px/1 var(--dot); }
.frac i { font-style: normal; color: var(--dim); font-size: 15px; }
.take { flex: none; min-height: 40px; padding: 0 16px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 600; font-size: 15px; transition: transform .16s var(--ease-out); }
.take:active { transform: scale(.95); }
.meals { display: flex; gap: 4px; padding-right: 4px; }
.meals i { width: 16px; height: 6px; border-radius: 3px; background: rgb(var(--ink-rgb) / .1); transition: background .3s; }
.meals i.on { background: var(--ink); }

/* ===== hlavička záložky (pití, suply) ===== */
.head { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0; }
.head__num { display: flex; align-items: baseline; gap: 8px; }
.head__num b { font-size: 52px; line-height: .9; color: var(--accent); }
.head__num span { font-size: 16px; color: var(--mut); }
.head__hint { font-size: 14.5px; color: var(--mut); }

/* ===== pití ===== */
.drinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drink { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; min-height: 66px; padding: 10px 12px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow); color: var(--blue); text-align: left; transition: transform .16s var(--ease-out), background .2s; min-width: 0; }
.drink:active { transform: scale(.97); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.drink .i { grid-row: span 2; width: 26px; height: 26px; }
.drink b { color: var(--ink); font-size: 15px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
.drink small { font-size: 13.5px; color: var(--dim); align-self: start; }
.drink--custom { color: var(--mut); }
.drink--custom.on { background: var(--blue); color: #fff; }
.drink--custom.on b, .drink--custom.on small { color: #fff; }
.custom { display: flex; flex-direction: column; gap: 14px; animation: itemIn .4s var(--ease-out) both; }
.custom__top { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--mut); }
.custom__top b { font-size: 26px; color: var(--blue); }
.custom__presets { display: flex; gap: 6px; }
.custom__presets button { flex: 1; min-height: 40px; border-radius: 11px; background: var(--surface2); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mut); text-align: center; transition: transform .16s var(--ease-out); }
.custom__presets button:active { transform: scale(.95); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; outline: none; margin: 8px 0;
  background: linear-gradient(90deg, var(--blue) var(--p, 50%), rgb(var(--ink-rgb) / .1) var(--p, 50%)); touch-action: pan-y; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(var(--sh) / .3), 0 0 0 1px rgb(var(--sh) / .06); }
.range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; }

/* ===== suplementy ===== */
.supp { display: flex; flex-direction: column; gap: 10px; padding: 10px 6px 16px 16px; }
.supp__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.supp__top b { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.supp__top b .i { width: 17px; height: 17px; color: var(--red); stroke-width: 3; }
.supp__doses { display: flex; flex-wrap: wrap; gap: 8px; }
.dose { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 52px; }
.dose span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--surface2);
  font-size: 16px; font-weight: 600; color: var(--mut); transition: background .25s, color .2s, transform .16s var(--ease-out); }
.dose:active span { transform: scale(.9); }
.dose small { font-size: 12.5px; color: var(--dim); }
.dose.on span { background: var(--red); color: #fff; }
.dose.on span .i { width: 20px; height: 20px; stroke-width: 3; }
.dose.on small { color: var(--red); }
.dose.pop span { animation: pop .5s var(--spring) both; }
.dose.pop span .i { animation: draw .45s .1s var(--ease-out) both; stroke-dasharray: 24; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.dose.late span { box-shadow: inset 0 0 0 1.5px var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
.dose.late small { color: var(--red); }

/* ===== jídlo ===== */
.foodform { display: flex; flex-direction: column; gap: 12px; }
.foodform.editing { box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow); }
.editing__bar { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 14.5px; font-weight: 600; }
.editing__bar .i { width: 16px; height: 16px; }
.editing__bar button { margin-left: auto; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--surface2); color: var(--ink); font-size: 14px; }
.seg--food button.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-padding: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 38px; padding: 0 13px; border-radius: 999px; background: var(--surface2); font-size: 14.5px; white-space: nowrap; transition: background .2s, color .2s, transform .16s var(--ease-out); }
.chips button:active { transform: scale(.95); }
.chips button.on { background: var(--blue); color: #fff; }
.foodin { display: flex; gap: 8px; }
.emoji { width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--surface2); font-size: 24px; display: grid; place-items: center; transition: transform .16s var(--ease-out); }
.emoji:active { transform: scale(.92) rotate(-6deg); }
.in, .foodin input, .field input, .search input { width: 100%; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--surface2); border: 1.5px solid transparent;
  color: var(--ink); font: 400 16px Geist, system-ui, sans-serif; outline: none; transition: border-color .2s, background .2s; }
.in:focus, .foodin input:focus, .field input:focus, .search input:focus { border-color: var(--accent); background: var(--surface); }
.in::placeholder, input::placeholder { color: var(--dim); }
.emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface2); animation: itemIn .35s var(--ease-out) both; }
.emojis button { height: 44px; border-radius: 10px; font-size: 22px; display: grid; place-items: center; transition: transform .16s var(--ease-out); }
.emojis button:active { background: var(--surface); transform: scale(1.15); }
.rate { display: flex; align-items: center; justify-content: space-between; padding-left: 4px; font-size: 15px; color: var(--mut); }
.stars { display: flex; }
.stars button { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .16s var(--ease-out); }
.stars .i { width: 28px; height: 28px; stroke-width: 0; fill: rgb(var(--ink-rgb) / .12); transition: fill .2s; }
.stars button.on .i { fill: var(--star); }
.stars button.pop .i { animation: pop .45s var(--spring) both; animation-delay: calc(var(--s) * 45ms); }
.stars button:active { transform: scale(.85); }

/* ===== statistiky ===== */
.statbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.statbar .seg { flex: 0 1 160px; }
.statbar .week__nav span { min-width: 0; padding: 0 2px; }
.chart { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 0; }
.chart__head { display: flex; flex-direction: column; gap: 4px; }
.chart__head b { font-size: 40px; line-height: .95; color: var(--blue); }
.chart__head span { font-size: 14.5px; color: var(--mut); }
.chart__plot { height: 150px; }
.chart__plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart__plot rect { fill: color-mix(in srgb, var(--blue) 28%, transparent); transition: fill .3s; }
.chart__plot rect.hit { fill: var(--blue); }
.chart__plot rect.today { fill: var(--red); }
.chart__plot rect.hitbox { fill: transparent; cursor: pointer; }
.view.enter .chart__plot rect:not(.hitbox) { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .7s var(--spring) both; animation-delay: calc(var(--i, 0) * 25ms + 120ms); }
@keyframes grow { from { transform: scaleY(0); } }
.chart__plot .goal { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; opacity: .4; vector-effect: non-scaling-stroke; }
.chart__labels { position: relative; height: 16px; }
.chart__labels span { position: absolute; transform: translateX(-50%); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim); }
.adh { gap: 14px; }
.adh .row__t { flex: 0 0 38%; }
.adh .bar { flex: 1; }
.adh .bar i { background: var(--red); }
.adh .row__v { min-width: 52px; text-align: right; }
.dayrow { gap: 8px; }
.dayrow .row__t b { font-size: 15px; }
.dayrow .row__t b::first-letter { text-transform: uppercase; }
.dstat { display: flex; align-items: center; gap: 4px; min-width: 52px; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dim); }
.dstat .i { width: 14px; height: 14px; }
.dstat.w { color: var(--blue); } .dstat.p { color: var(--red); } .dstat.f { color: var(--ink); }

/* ===== spodní dok s jezdící lampičkou ===== */
.dock { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 380px);
  display: flex; justify-content: space-around; padding: 6px 8px; border-radius: 999px;
  background: var(--dock-bg); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 14px 34px -10px rgb(var(--sh) / .28), 0 2px 6px rgb(var(--sh) / .06), inset 0 0 0 1px rgb(var(--sh) / .06); }
.dock button { position: relative; z-index: 1; width: 56px; height: 48px; display: grid; place-items: center; color: rgb(var(--ink-rgb) / .38); transition: color .3s var(--ease-out); }
.dock button .i { width: 23px; height: 23px; transition: transform .25s var(--spring); }
.dock button:active .i { transform: scale(.86); }
.dock button.on { color: var(--accent); }
.dock button.on .i { transform: translateY(-1px); }
.dock__lamp { position: absolute; left: 0; top: 0; width: 0; height: 100%; pointer-events: none; transition: transform .55s var(--spring); }
.dock__lamp.instant { transition: none; }
.dock__lamp::before { content: ''; position: absolute; top: 0; left: -11px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); transition: background .4s;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.dock__lamp::after { content: ''; position: absolute; top: 2px; left: -26px; width: 52px; height: 44px; transition: background .4s;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }

/* ===== toast: vjede shora, odjede rychleji ===== */
.toast { position: fixed; z-index: 300; left: 50%; top: calc(10px + env(safe-area-inset-top)); width: min(calc(100% - 24px), 420px);
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 10px 10px 16px; border-radius: 18px;
  background: var(--toast-bg); color: var(--toast-ink); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 18px 40px -12px rgb(var(--sh) / .5);
  transform: translate(-50%, calc(-100% - 20px)) scale(.96); opacity: 0; transition: transform .2s ease-in, opacity .2s; pointer-events: none; }
.toast.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; transition: transform .5s var(--spring), opacity .25s; }
.toast__i { color: #7fb6ea; display: grid; }
.toast--err .toast__i { color: #ff8a93; } .toast--sync .toast__i { color: #7fb6ea; }
.toast__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toast__t b { font-size: 15px; font-weight: 600; }
.toast__t small { font-size: 13.5px; color: rgba(245,240,232,.72); overflow-wrap: anywhere; }
.toast button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 12px; background: var(--linen); color: #10233D; font-weight: 600; font-size: 14.5px; transition: transform .16s var(--ease-out); }
.toast button:active { transform: scale(.95); }

/* ===== vysouvací okno ===== */
.sheet { position: fixed; inset: 0; z-index: 200; }
.sheet__bg { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / .32); opacity: 0; transition: opacity .35s var(--ease-drawer); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sheet__box { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 90dvh; min-height: 40dvh; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 26px 26px 0 0; box-shadow: 0 -16px 50px rgb(var(--sh) / .22);
  transform: translateY(100%); transition: transform .45s var(--ease-drawer); }
.sheet.on .sheet__bg { opacity: 1; }
.sheet.on .sheet__box { transform: none; }
.sheet__grab { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgb(var(--ink-rgb) / .18); flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px 18px; flex: none; touch-action: none; }
.sheet__head h2 { font: 900 22px/1.1 var(--dot); letter-spacing: .04em; text-transform: uppercase; }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gut) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sheet__body .sec { margin-top: 12px; }
.card .btn--ghost { background: var(--surface2); color: var(--ink); box-shadow: none; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--mut); }
.times { display: flex; flex-wrap: wrap; gap: 8px; }
.time { display: flex; align-items: center; gap: 4px; padding-left: 12px; border-radius: 14px; background: var(--surface2); }
.time small { font-size: 13px; color: var(--dim); }
.time input { width: 104px; height: 48px; border: 0; background: none; padding: 0 8px; font: 500 16px Geist; color: var(--ink); }
.search { display: flex; align-items: center; position: relative; }
.search .i { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--dim); }
.search input { padding-left: 42px; height: 46px; background: var(--surface); }
.sortrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--dim); }
.place .rank { width: 18px; font-size: 13px; color: var(--dim); text-align: center; flex: none; }
.avg { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.avg b { font-size: 17px; font-weight: 600; }
.avg .i { width: 15px; height: 15px; }
.set { display: flex; flex-direction: column; gap: 12px; }
.set__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; }
.set__row > span { display: flex; flex-direction: column; gap: 2px; }
.set__row small { font-size: 13.5px; color: var(--dim); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper b { font-size: 22px; min-width: 64px; text-align: center; color: var(--blue); }
.stepper .ibtn { background: var(--surface2); box-shadow: none; }
.switch { position: relative; width: 51px; height: 31px; flex: none; border-radius: 999px; background: rgb(var(--ink-rgb) / .16); transition: background .25s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(var(--sh) / .25); transition: transform .35s var(--spring); }
.switch.on { background: var(--blue); }
.switch.on i { transform: translateX(20px); }
.inrow { display: flex; gap: 8px; }
.inrow .btn { flex: 1; }
.inrow .in { flex: 2; height: 44px; }
.drinkedit { display: flex; flex-direction: column; gap: 6px; }
.de { display: flex; align-items: center; gap: 6px; }
.de__icon { color: var(--blue); background: var(--surface2) !important; box-shadow: none !important; }
.de input { height: 44px; padding: 0 10px; border-radius: 12px; background: var(--surface2); border: 1.5px solid transparent; color: var(--ink); font: 400 16px Geist, system-ui; outline: none; min-width: 0; }
.de input:focus { border-color: var(--blue); }
.de__name { flex: 1; }
.de__ml { width: 76px; text-align: right; }
.de small { font-size: 13px; color: var(--dim); }
.foot { text-align: center; font-size: 13px; color: var(--dim); padding: 0 0 4px; }
/* bílé logo → na lněném pozadí námořnicky modré */
.foot__logo { display: block; width: 180px; height: 180px; margin: -50px auto -60px; filter: var(--logo-filter); opacity: .85; }

/* soukromý cloud */
.keybox { display: flex; align-items: center; gap: 4px; padding-left: 14px; border-radius: 14px; background: var(--surface2); }
.keybox code { flex: 1; min-width: 0; font: 500 15px var(--mono); letter-spacing: .02em; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }

/* úzké telefony */
@media (max-width: 360px) {
  :root { --gut: 12px; }
  .top h1 { font-size: 22px; }
  .battery { width: 48px; }
  .orb { width: 188px; height: 188px; }
  .week__nav span { min-width: 80px; font-size: 13px; }
  .seg button { font-size: 13.5px; }
  .qd { gap: 5px; padding: 0 6px; } .qd small { font-size: 15px; }
}
/* omezení pohybu: jen prolínání, žádné posuny */
@media (prefers-reduced-motion: reduce) {
  .orb, .spin, .streak .i { animation: none; }
  .view.enter, .view.enter > *, .ready .top, .ready .wrap, .ready .dock, .row.new, .dose.pop span, .stars button.pop .i, .week__row[class*="slide"], .top h1.swap { animation: fadeOnly .2s ease both; }
  .view.enter .chart__plot rect, .view.enter .bar i, .view.enter .day__ring .fg { animation: none; }
  .sheet__box, .toast, .toast.on, .dock__lamp { transition: opacity .2s ease; }
  @keyframes fadeOnly { from { opacity: 0; } }
}

.emoji.bump { animation: pop .45s var(--spring); }