/* ========================================================================
   Famly - Main layout, typography, base components
   ======================================================================== */

/* === Globální okamžitá odezva na dotek (feedback napříč celou aplikací) === */
button, a, [data-action], [role="button"], .chip, .segment,
.modal-close, .nav-item, label.switch, .color-swatch, .icon-pick-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:active, a.btn:active, a.btn-icon:active, [data-action]:active,
.chip:active, .segment:active, .modal-close:active, .btn-icon:active,
.btn-icon-sm:active, .icon-pick-btn:active {
  transform: scale(0.93);
  transition: transform 60ms ease-out;
}

/* === Reset === */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

a {
  color: var(--brand-primary-light);
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol { list-style: none; }

/* === Animovane pozadi s "blobs" === */

.bg-blobs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.bg-blobs::before,
.bg-blobs::after,
.bg-blobs .blob {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}

.bg-blobs::before {
  width: 60vw;
  height: 60vw;
  background: var(--blob-1);
  top: -10%;
  left: -10%;
  animation: blobFloat1 22s var(--ease-in-out) infinite;
}

.bg-blobs::after {
  width: 50vw;
  height: 50vw;
  background: var(--blob-2);
  bottom: -15%;
  right: -10%;
  animation: blobFloat2 26s var(--ease-in-out) infinite;
}

.bg-blobs .blob-3 {
  width: 45vw;
  height: 45vw;
  background: var(--blob-3);
  top: 30%;
  right: 20%;
  animation: blobFloat3 30s var(--ease-in-out) infinite;
  opacity: 0.35;
}

[data-theme="light"] .bg-blobs::before,
[data-theme="light"] .bg-blobs::after,
[data-theme="light"] .bg-blobs .blob {
  opacity: 0.45;
}

/* === Typografie === */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.text-lg  { font-size: var(--fs-lg); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-info      { color: var(--color-info); }

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

.font-mono { font-family: var(--font-mono); }

/* === Hlavni layout === */

#app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: var(--safe-top);
  padding-bottom: 0;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overflow: hidden;
}

.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  position: relative;
  z-index: var(--z-sticky);
}

.app-header .logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.app-header .logo:active { transform: scale(0.96); }

.app-header .logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.app-main {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: var(--sp-6) var(--sp-5) calc(var(--nav-height) + var(--safe-bottom) + var(--sp-5));
}

.app-main::-webkit-scrollbar { width: 0; display: none; }

.view-container {
  max-width: var(--max-content-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* === Bottom navigation === */

.bottom-nav {
  position: fixed;
  bottom: var(--safe-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--sp-5) * 2 - var(--safe-left) - var(--safe-right));
  max-width: 520px;
  height: var(--nav-height);
  margin-bottom: var(--sp-3);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--sp-3);
  border-radius: var(--r-2xl);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: var(--fw-medium);
  position: relative;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.nav-item .nav-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.nav-item.active {
  color: var(--section-accent);
}

.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 8px var(--section-glow));
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-item .nav-indicator {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--section-accent), var(--section-accent-2));
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}

.nav-item.active .nav-indicator { opacity: 1; }

/* === Tlacitka === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease-spring),
    background-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

/* Když se popisek do tlačítka nevejde (úzké displeje), oříznout s výpustkou –
   bez toho by text tvrdě uřízl overflow:hidden na hraně tlačítka. */
.btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.btn-primary:hover { box-shadow: var(--shadow-lg), var(--shadow-glow); }

.btn-secondary {
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--state-hover); }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-sm { height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-md); }
.btn-lg { height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-md); border-radius: var(--r-xl); }
.btn-block { width: 100%; }

/* === Formulare === */

/* Formuláře v modalech mají konzistentní vertikální rytmus. */
.modal-sheet form { display: flex; flex-direction: column; gap: var(--sp-4); }

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  padding-left: var(--sp-1);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  color: var(--input-text);
  /* 16px je minimum, jinak iOS Safari při fokusu políčko přizoomuje
     (--fs-base je 15px). Nesnižovat pod 16px na žádném vstupu. */
  font-size: 16px;
  font-weight: var(--fw-medium);
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.form-textarea { min-height: 100px; padding: var(--sp-3) var(--sp-4); resize: vertical; }

/* Dlouhý placeholder v úzkém poli oříznout s výpustkou, ne uprostřed slova. */
.form-input::placeholder { text-overflow: ellipsis; }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--state-focus);
}

.form-input.valid   { border-color: var(--color-success); }
.form-input.invalid { border-color: var(--color-danger); animation: shake 400ms var(--ease-out); }

.form-error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  padding-left: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  padding-left: var(--sp-1);
}

/* Rozbalovací kalkulačka maker (Nastavení → Makra a kalorie) */
.macro-calc {
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--glass-bg-soft);
}
.macro-calc-summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  list-style: none;
  padding: var(--sp-1) 0;
}
.macro-calc-summary::-webkit-details-marker { display: none; }
.macro-calc[open] .macro-calc-summary { color: var(--text-primary); margin-bottom: var(--sp-3); }
.macro-calc-body { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Karty 3 metod hubnutí (výsledek kalkulačky) */
.plan-base { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); text-align: center; }
.plan-label { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.method-card {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  border-radius: var(--r-lg); border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  transition: transform 60ms var(--ease-out), border-color var(--t-fast);
}
.method-card:active { transform: scale(0.98); border-color: var(--brand-primary); }
.method-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.method-name { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--text-primary); }
.method-kcal { font-weight: var(--fw-bold); color: var(--brand-primary); white-space: nowrap; }
.method-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 3px; }

/* === PIN input === */

.pin-input-container {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  padding: var(--sp-5) 0;
}

.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--glass-border-strong);
  background: transparent;
  transition: all var(--t-fast) var(--ease-spring);
}

.pin-dot.filled {
  background: var(--brand-gradient);
  border-color: transparent;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(124,58,237,0.5);
}

.pin-dot.error {
  border-color: var(--color-danger);
  animation: shake 400ms var(--ease-out);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  width: min(320px, 100%);
  margin: 0 auto;
}

.pin-key {
  aspect-ratio: 1 / 1;
  min-height: 72px;
  border-radius: var(--r-xl);
  font-size: 26px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform var(--t-fast) var(--ease-spring), background-color var(--t-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-key:active {
  transform: scale(0.93);
  background: var(--state-active);
}

.pin-key.delete,
.pin-key.biometric {
  font-size: 22px;
  font-weight: var(--fw-medium);
  background: transparent;
  border-color: transparent;
}

/* === Switch === */

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  transition: background-color var(--t-base) var(--ease-out);
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-spring);
}

.switch input:checked + .switch-slider {
  background: var(--brand-gradient);
  border-color: transparent;
}

.switch input:checked + .switch-slider::before {
  transform: translateY(-50%) translateX(20px);
}

/* === Progress bar === */

.progress {
  width: 100%;
  height: 8px;
  background: var(--glass-bg-strong);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand-gradient);
  transition: width var(--t-slow) var(--ease-out);
  position: relative;
}

.progress-fill.green  { background: linear-gradient(90deg, #10B981, #34D399); }
.progress-fill.orange { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.progress-fill.red    { background: linear-gradient(90deg, #EF4444, #F87171); }

/* === Progress kruh (SVG) === */

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: var(--glass-bg-strong);
}

.progress-ring-fill {
  fill: none;
  stroke: url(#progressGradient);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--t-slow) var(--ease-out);
}

/* === Avatar === */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 2px solid var(--glass-border);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

button.avatar, .avatar-editable { padding: 0; cursor: pointer; flex-shrink: 0; }

.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-sm); }
.avatar-lg { width: 64px; height: 64px; font-size: var(--fs-lg); }
.avatar-xl { width: 96px; height: 96px; font-size: var(--fs-2xl); border-width: 3px; }

/* === Toast notifikace === */

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: calc(100vw - var(--sp-5) * 2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  animation: toastIn 350ms var(--ease-spring);
}

.toast.removing { animation: toastOut 250ms var(--ease-out) forwards; }

.toast-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Akční tlačítko toastu (např. „Vrátit" po smazání) */
.toast-action {
  flex-shrink: 0;
  margin-left: auto;
  padding: var(--sp-1) var(--sp-3);
  border: none;
  border-radius: var(--r-full);
  background: var(--glass-bg-strong);
  color: var(--brand-primary-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.toast-action:active { transform: scale(0.95); }

.toast.success .toast-icon { color: var(--color-success); }
.toast.warning .toast-icon { color: var(--color-warning); }
.toast.error   .toast-icon { color: var(--color-danger); }
.toast.info    .toast-icon { color: var(--color-info); }

/* === Skeleton loader === */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass-bg) 0%,
    var(--glass-bg-strong) 50%,
    var(--glass-bg) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1400ms linear infinite;
  border-radius: var(--r-md);
}

.skeleton-text {
  height: 14px;
  margin: 6px 0;
}

.skeleton-title { height: 22px; width: 60%; }
.skeleton-card  { height: 120px; border-radius: var(--r-xl); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* === Empty state === */

.empty-state {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-tertiary);
}

.empty-state .empty-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--brand-gradient-soft);
  color: var(--brand-primary-light);
  margin-bottom: var(--sp-1);
}
.empty-state .empty-icon svg {
  width: 34px;
  height: 34px;
  opacity: 0.95;
}

.empty-state-compact { padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); }
.empty-state-compact .empty-title { font-size: var(--fs-base); }
.empty-state .empty-mascot { margin-bottom: calc(var(--sp-2) * -1); }
.empty-state .empty-mascot .sed-mascot { display: block; margin: 0 auto; }

.empty-state .empty-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Drobná prázdná zpráva uvnitř sekce (pod-seznamy) – jednotný vzhled. */
.empty-inline {
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  text-align: center;
}

/* === Dashboard greeting === */

.greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.greeting-text { display: flex; flex-direction: column; gap: 2px; }
.greeting-hello { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.greeting-name  { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.greeting-date  { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-1); }
.greeting-nameday { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* === Karty (grid layout) === */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.cards-grid .card-full { grid-column: span 2; }

/* Stejně vysoké karty v párovém řádku, obsah hezky odshora */
.cards-grid > .card { display: flex; flex-direction: column; }
.cards-grid > .card .card-header { margin-bottom: var(--sp-2); }

/* === Listy === */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  cursor: pointer;
}

.list-item:active { transform: scale(0.98); background: var(--state-active); }

/* Automatické položky (svátky/narozeniny) – jen informativní, bez interakce. */
.list-item-static { cursor: default; }
.list-item-static:active { transform: none; background: transparent; }

.list-item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong);
  flex-shrink: 0;
}

.list-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-item-title { font-weight: var(--fw-semibold); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item-meta { font-size: var(--fs-sm); color: var(--text-tertiary); }
.list-item-trailing { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }

/* === Modal / Bottom sheet === */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn var(--t-base) var(--ease-out);
}

.modal-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  /* --kb-height = výška softwarové klávesnice (js/utils/keyboard.js).
     Sheet se o ni zvedne a zkrátí, aby ho klávesnice na iOS nepřekryla. */
  max-height: calc(88dvh - var(--kb-height, 0px));
  margin: 0 var(--sp-3) calc(var(--safe-bottom) + var(--sp-3) + var(--kb-height, 0px));
  transition: margin-bottom 200ms var(--ease-out), max-height 200ms var(--ease-out);
  border-radius: var(--r-3xl);
  padding: var(--sp-5);
  padding-bottom: calc(var(--sp-5) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: sheetUp 350ms var(--ease-spring);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--text-muted);
  border-radius: var(--r-full);
  margin: 0 auto var(--sp-2);
  opacity: 0.5;
}

/* Zavírací animace modalu */
.modal-backdrop.removing { animation: fadeOut 280ms var(--ease-out) forwards; }
.modal-backdrop.removing .modal-sheet { animation: sheetDown 280ms var(--ease-out) forwards; }
/* Během tažení prstem (swipe-to-dismiss) řídí polohu sheetu inline transform,
   ne CSS animace – jinak by animace přepsala tažení a poskočilo by to. */
.modal-sheet.sheet-dragging { animation: none !important; }
.modal-close {
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}
.modal-close:active { transform: scale(0.85) rotate(90deg); }

.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

.modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

/* === Badge / Chip === */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--glass-bg-strong);
  color: var(--text-secondary);
}

.badge.success { background: rgba(16, 185, 129, 0.15); color: #34D399; }
.badge.warning { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.badge.danger  { background: rgba(239, 68, 68, 0.15);  color: #F87171; }
.badge.info    { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
.badge.primary { background: rgba(124, 58, 237, 0.18); color: #A78BFA; }

/* === Quick actions === */

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-xl);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: transform var(--t-fast) var(--ease-spring);
}

.quick-action:active { transform: scale(0.95); }

.quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary-light);
}

/* === FAB (Floating Action Button) === */

.fab {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--sp-5));
  right: calc(var(--sp-5) + var(--safe-right));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--section-accent), var(--section-accent-2));
  color: #fff;
  box-shadow: var(--shadow-lg), 0 0 32px var(--section-glow);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease-spring);
}

.fab:active { transform: scale(0.92); }
.fab svg { width: 24px; height: 24px; }

/* === Utility === */

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }

.hidden { display: none !important; }
.invisible { visibility: hidden; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.full-width  { width: 100%; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

button:focus:not(:focus-visible) { outline: none; }

/* Přístupnost: dlouhý text (postup receptu, poznámky, ingredience) jde označit
   a zkopírovat i na iOS – tlačítka zůstávají neoznačitelná (mají user-select:none). */
.recipe-steps, .recipe-step, .ingredient-rows, .ingredient-row,
.list-item-title, .list-item-meta, .task-title,
textarea, .modal-title, .card-value, .stat-value {
  -webkit-user-select: text;
  user-select: text;
}


/* ========================================================================
   AUTH SCREEN
   ======================================================================== */

.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  gap: var(--sp-5);
  position: relative;
}

.auth-back {
  position: absolute;
  top: calc(var(--safe-top) + var(--sp-4));
  left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--r-full);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast), background var(--t-fast);
  z-index: 5;
}
.auth-back svg { width: 20px; height: 20px; }
.auth-back:active { transform: scale(0.94); color: var(--text-primary); background: var(--state-active); }

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.auth-logo {
  filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.4));
}

.auth-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin: 0;
}

.auth-subtitle {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0;
}

/* Přihlašovací / zakládací formuláře: rovnoměrné rozestupy mezi poli a
   výrazné oddělení hlavního tlačítka od posledního pole (jinak lepí na sebe). */
.account-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.account-form > button[type="submit"] {
  margin-top: var(--sp-3);
}

.auth-stay-logged {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: var(--sp-3);
}

/* Face ID odemčení na PIN obrazovce */
.auth-faceid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--brand-primary-light);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring), background-color var(--t-fast) var(--ease-out);
}
.auth-faceid-btn:active { transform: scale(0.97); }
.auth-faceid-btn.verifying { opacity: 0.6; pointer-events: none; }
.auth-faceid-btn.verifying span { animation: pulse 1s ease-in-out infinite; }

.badge-faceid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-faceid svg { margin-top: -1px; }

/* Face ID odemykací obrazovka (po kliknutí na avatar) */
.faceid-screen-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-6) 0;
  color: var(--brand-primary-light);
  animation: pulse 1.4s ease-in-out infinite;
}
.auth-usepin-btn { margin-top: var(--sp-2); }

.auth-error {
  color: var(--color-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-top: var(--sp-2);
  text-align: center;
  animation: shake 400ms var(--ease-out);
}

.auth-lockout {
  text-align: center;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--color-danger);
  font-weight: var(--fw-medium);
}

.auth-footer {
  position: absolute;
  bottom: calc(var(--safe-bottom) + var(--sp-4));
  left: var(--sp-5);
  right: var(--sp-5);
}

/* ========================================================================
   CROPPER (avatar upload)
   ======================================================================== */

.cropper-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-base) var(--ease-out);
}

.cropper-content {
  width: 100%;
  max-width: 360px;
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: scaleIn 300ms var(--ease-spring);
}

.cropper-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-align: center;
  margin: 0;
}

.cropper-canvas-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-base);
  touch-action: none;
}

.cropper-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.cropper-canvas:active { cursor: grabbing; }

.cropper-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.cropper-zoom {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--glass-bg-strong);
  border-radius: var(--r-full);
  outline: none;
}

.cropper-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-gradient);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.cropper-zoom::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: none;
  cursor: pointer;
}

.cropper-actions {
  display: flex;
  gap: var(--sp-3);
}

.cropper-actions .btn { flex: 1; }


/* ========================================================================
   DASHBOARD specific
   ======================================================================== */

.weather-card .weather-content {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.weather-icon {
  font-size: 36px;
  line-height: 1;
}

.weight-current {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.weight-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.weight-badge.loss {
  background: rgba(16,185,129,0.15);
  color: #10B981;
}

.weight-badge.gain {
  background: rgba(239,68,68,0.15);
  color: #EF4444;
}

.weight-sparkline {
  margin: var(--sp-2) 0 var(--sp-1);
  opacity: 0.85;
}

.weight-graph {
  margin: var(--sp-3) 0 var(--sp-1);
}

.weight-graph-empty {
  margin: var(--sp-4) 0;
  text-align: center;
}

.weight-goalbar { margin: var(--sp-3) 0 var(--sp-1); }
.weight-goalbar-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: 6px;
}
.weight-goalbar-pct { font-weight: var(--fw-bold); color: var(--section-accent); }
.weight-goalbar-track {
  height: 6px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.weight-goalbar-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--section-accent), var(--section-accent-2));
  transition: width var(--t-slow) var(--ease-out);
}
.weight-goalbar-legend {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.weight-trend { text-align: center; margin-top: var(--sp-2); }

.weight-history-header {
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--glass-border);
}

.weight-history {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-1);
}

.weight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-border);
}
.weight-row:last-child { border-bottom: none; }

.weight-row-main {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

.weight-row-value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.weight-row-date {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.weight-row-actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.btn-icon-sm.danger { color: var(--color-danger); }

.weather-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
}

.weather-day-today {
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.25);
}

.weather-day-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weather-day-icon { font-size: 28px; line-height: 1; }

.weather-day-temps { font-size: var(--fs-sm); }

.weather-day-desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.chart-wrap {
  width: 100%;
  margin-top: var(--sp-3);
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-bar-group {
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out);
}

.chart-bar-group:hover { opacity: 0.7; }


/* ========================================================================
   BUDGET MODUL
   ======================================================================== */

.budget-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.budget-toolbar .segmented { flex: 1; }

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.segment {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
  white-space: nowrap;
}

.segment:active { transform: scale(0.96); }

.segment.active {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.category-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.category-row:active {
  transform: scale(0.98);
  background: var(--state-active);
}

.category-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.category-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.category-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

.category-amount {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

.category-row-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 2px;
}

.text-xs { font-size: var(--fs-xs); }

.expense-item .list-item-trailing {
  font-variant-numeric: tabular-nums;
}

.expense-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-row {
  display: flex;
  gap: var(--sp-3);
}

.amount-input {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  height: 64px;
  letter-spacing: -0.02em;
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.form-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

.chip:active { transform: scale(0.95); }

.chip.selected {
  border-width: 1.5px;
  font-weight: var(--fw-semibold);
}

.chip svg { width: 16px; height: 16px; }

/* Řádek potraviny ve vyhledávání (picker + builder receptu) */
.food-row { border-radius: var(--r-md); overflow: hidden; position: relative; }
.food-row-main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.food-row-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
  background: transparent;
  padding: 0;
}
.food-row-head:active { opacity: 0.65; }
.food-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.food-row-name { font-weight: var(--fw-medium); font-size: var(--fs-base); }
.food-row-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }
.food-row-kcal {
  flex-shrink: 0;
  display: flex; align-items: baseline; gap: 3px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}
.food-row-kcal span { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-regular); }

.food-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--glass-bg-soft);
}

.food-row-plus {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}
.food-row-plus:active { transform: scale(0.86); }
.food-row-plus svg { width: 18px; height: 18px; }

/* Hvězdička oblíbené potraviny v řádku */
.food-row-fav {
  flex-shrink: 0;
  width: 30px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast);
}
.food-row-fav.active { color: #F59E0B; }
.food-row-fav:active { transform: scale(0.82); }
.food-row-fav svg { width: 18px; height: 18px; }

/* Odezva po přidání: zelený záblesk přes řádek + zelené „+" s ✓ */
.food-row::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-success);
  opacity: 0;
  pointer-events: none;
}
.food-row.added::after { animation: foodRowFlash 950ms var(--ease-out); }
@keyframes foodRowFlash { 0% { opacity: 0.18; } 100% { opacity: 0; } }
.food-row.added .food-row-plus { background: var(--color-success); }

.food-row-body {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.food-row[data-open] .food-row-body {
  display: flex;
  animation: fadeIn var(--t-fast) var(--ease-out);
}
/* Presety porcí – auto šířka, zalamují se (dlouhé „sklenice" se vejde celé) */
.portion-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.portion-amount { display: flex; align-items: center; gap: var(--sp-1); }
.portion-input {
  width: 68px; height: 38px; min-height: 38px;
  padding: 0 var(--sp-2);
  text-align: center;
}
.portion-unit { color: var(--text-tertiary); font-size: var(--fs-sm); }
.portion-amount .btn { margin-left: auto; flex-shrink: 0; }
.food-row-preview { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-medium); min-height: 16px; }

.portion-chip {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.portion-chip.selected {
  border-color: var(--brand-primary);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  background: var(--state-focus);
}
.portion-chip:active { transform: scale(0.93); }

/* Badge s počtem přidaných položek (vedle titulku pickeru) */
.picker-count-badge {
  flex-shrink: 0;
  min-width: 30px; height: 30px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--brand-gradient);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-spring);
}
.picker-count-badge:active { transform: scale(0.9); }

/* Seznam „Právě přidáno" – dodatečná editace gramáže a mazání */
.added-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.added-item + .added-item { margin-top: var(--sp-1); }
.added-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: transparent; text-align: left; padding: 0; }
.added-item-info:active { opacity: 0.65; }
.added-item-name { font-weight: var(--fw-medium); }
.added-item-macros { font-size: var(--fs-xs); color: var(--text-tertiary); }
.added-item-grams {
  width: 56px; height: 34px; min-height: 34px; text-align: center;
  padding: 0 var(--sp-1); flex-shrink: 0;
}
.added-item-unit { font-size: var(--fs-xs); color: var(--text-tertiary); flex-shrink: 0; }
.added-item-del {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-danger); background: var(--glass-bg-strong);
}
.added-item-del:active { transform: scale(0.9); }

/* Pitný režim (voda) */
.water-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.water-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.water-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text-primary); }
.water-title svg { color: var(--brand-secondary); }
.water-amount { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; background: transparent; }
.water-amount strong { color: var(--text-primary); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.water-amount.done strong { color: var(--color-success); }
.water-amount:active { transform: scale(0.96); }
.water-goal-edit { display: inline-flex; color: var(--text-muted); }
.water-goal-edit svg { width: 13px; height: 13px; }
.water-glasses { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.water-glass {
  width: 32px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-base);
}
.water-glass .glass-water { fill: transparent; transition: fill var(--t-base) var(--ease-out); }
.water-glass.filled { color: var(--brand-secondary); }
.water-glass.filled .glass-water { fill: var(--brand-secondary); opacity: 0.85; }
.water-glass:active { transform: scale(0.85); }
.progress-fill.water-fill { background: linear-gradient(90deg, #22D3EE, #06B6D4); }
.water-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.water-actions .btn { flex: 1; min-width: 96px; }

/* Vodní dlaždice na dashboardu */
.dash-water { display: flex; align-items: center; gap: var(--sp-3); }
.dash-water-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); background: transparent; text-align: left; padding: 0; }
.dash-water-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(6,182,212,0.15); color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; }
.dash-water-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-water-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.dash-water-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-primary); }
.dash-water-val { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }
.dash-water-val.done { color: var(--color-success); }
.dash-water-add {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-spring);
}
.dash-water-add:active { transform: scale(0.86); }
.dash-water-add svg { width: 20px; height: 20px; }

/* Oslava splněného cíle (Sedmáček + konfety) */
.goal-celebrate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-toast);
  pointer-events: none; opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.goal-celebrate.show { opacity: 1; pointer-events: auto; }
.goal-celebrate-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-3xl);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: scale(0.8);
  transition: transform 400ms var(--ease-spring);
}
.goal-celebrate.show .goal-celebrate-card { transform: scale(1); }
.goal-celebrate-msg {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--text-primary); text-align: center; max-width: 22ch;
}

/* Picker na celou obrazovku (přidávání jídla) */
.modal-backdrop.picker-full { align-items: flex-start; }
.modal-backdrop.picker-full .picker-sheet {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: calc(100dvh - var(--kb-height, 0px));
  max-height: calc(100dvh - var(--kb-height, 0px));
  border-radius: 0;
  padding-top: calc(var(--safe-top) + var(--sp-3));
}

/* Dva filtry ve výchozím pohledu pickeru (Potraviny / Časté) */
.picker-filters { display: flex; gap: var(--sp-2); }
.picker-select-wrap { flex: 1; position: relative; }
.picker-select-wrap::after {
  content: '';
  position: absolute; right: 14px; top: 45%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.picker-select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  padding: 10px 34px 10px 14px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.picker-select:focus { outline: none; border-color: var(--brand-primary); }

/* Záložky nahoře v pickeru (Hledat / Čárový kód / Vlastní) */
.picker-tabs { display: flex; gap: var(--sp-2); }
.picker-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 62px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.picker-tab-ico { display: flex; }
.picker-tab.active {
  background: var(--brand-gradient-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary-light);
}
.picker-tab:active { transform: scale(0.94); }

/* Dlouhý text chipu (např. nedávné jídlo) nesmí přetéct – zkrátit s … */
.chip { max-width: 100%; }
.chip > span, .chip { min-width: 0; }
.tag-chips .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ========================================================================
   MEALS MODUL
   ======================================================================== */

.meals-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.meals-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin: 0;
}

.meals-toggle {
  width: 100%;
}

/* Tydenni grid */
.week-grid {
  display: grid;
  /* minmax(0,1fr) místo 1fr: jinak by se sloupce nezmenšily pod min. obsah buňky
     a 7 dní by se na úzkém telefonu nevešlo (neděle přetékala mimo obrazovku). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
  min-height: 110px;
}

.week-day:active { transform: scale(0.96); }

.week-day.today {
  border-color: var(--brand-primary);
  background: var(--brand-gradient-soft);
}

.week-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.week-day-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.week-day-date {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.week-day.today .week-day-date { color: var(--brand-primary-light); }

.week-day-meals {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.week-day-meal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.week-day-meal-dot.empty {
  background: var(--glass-bg-strong);
  opacity: 0.5;
}

.week-day-kcal {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}

.week-day-progress {
  width: 100%;
  margin-top: auto;
}

/* Denni detail */
.day-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.day-kcal-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-3);
  min-width: 90px;
}

.day-kcal-big .text-lg {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
}

/* Kalorický progress pod denním souhrnem */
.day-cal-bar { margin-top: var(--sp-4); }
.day-cal-legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Meal slots */
.meal-slots {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.meal-slot {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  position: relative;
}

.meal-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

.meal-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}

.meal-slot-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.meal-empty {
  display: block;
  width: 100%;
  padding: var(--sp-4);
  text-align: center;
  border: 1.5px dashed var(--glass-border-strong);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.meal-empty:hover { background: var(--state-hover); }
.meal-empty:active { transform: scale(0.98); background: var(--state-active); }

.meal-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.meal-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--glass-bg-soft);
  border-radius: var(--r-md);
}

/* Hlavička sekce panelů (tlačítko Upravit panely) */
.day-toolbar {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  margin-bottom: calc(-1 * var(--sp-1));
}

.day-toolbar-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}

.day-toolbar-btn:hover { background: var(--state-hover); color: var(--text-primary); }
.day-toolbar-btn:active { transform: scale(0.96); }
.day-toolbar-btn svg { width: 18px; height: 18px; flex: none; opacity: 0.8; }

/* Editor panelů jídel */
.mt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-border);
}
.mt-drag {
  flex: none;
  width: 30px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-tertiary);
  cursor: grab;
  touch-action: none;       /* aby tažení nescrollovalo stránku */
}
.mt-drag:active { cursor: grabbing; }
.mt-row.dragging {
  opacity: 0.9;
  background: var(--glass-bg-strong);
  border-radius: var(--r-sm);
  border-bottom-color: transparent;
}
.mt-row .form-input { height: 38px; padding: 0 10px; font-size: 16px; }
.mt-row [data-label] { flex: 1; min-width: 0; }
.mt-row .mt-cat { flex: none; width: 96px; }
.btn-icon-sm.danger { color: var(--color-danger); }
.btn-icon-sm:disabled { opacity: 0.3; pointer-events: none; }

/* Klikací část jídla – otevře detail receptu */
.meal-item-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: opacity var(--t-fast) var(--ease-out);
}
.meal-item-info:active { opacity: 0.6; }

.btn-icon-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--t-fast), color var(--t-fast);
}

/* Vizuál zůstává 28px, ale dotykový cíl je ~44px (Apple HIG). Sousední
   tlačítka se zónami mírně překrývají – vyhrává to bližší středu tapu. */
.btn-icon-sm::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.btn-icon-sm:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.min-w-0 { min-width: 0; }

/* Recipe list */
.recipe-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.recipe-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              background-color var(--t-fast) var(--ease-out);
  text-align: left;
  width: 100%;
}

.recipe-card:active { transform: scale(0.98); }
.recipe-card:hover { background: var(--state-hover); }

.recipe-card-button {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
}

.recipe-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.recipe-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.recipe-kcal {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-1) 0;
}

.tag-chips::-webkit-scrollbar { display: none; }

/* Filtry receptů – jeden vodorovně scrollovací řádek pilulek (iOS/Apple styl) */
.filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-1) 0;
  /* jemné odstřižení na krajích naznačí, že řádek jde scrollovat */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .chip { flex: 0 0 auto; }

.recipe-sort {
  height: 34px;
  min-height: 34px;
  width: auto;
  max-width: 100%;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.recipe-toolbar { display: flex; justify-content: flex-start; margin-top: var(--sp-2); }

/* === Recepty – fotografická mřížka === */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.recipe-gcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              background-color var(--t-fast) var(--ease-out);
}
.recipe-gcard:active { transform: scale(0.97); }
.recipe-gcard:hover { background: var(--state-hover); }

.recipe-gcard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-gcard-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-gcard-media > svg { width: 30px; height: 30px; opacity: 0.9; }

.recipe-gcard-kcal {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.recipe-gcard-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.recipe-gcard-body {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.recipe-gcard-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.recipe-gcard-macros {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.recipe-gcard-body .badge { margin-top: 2px; }

/* === Detail receptu === */
.recipe-hero {
  position: relative;
  height: 150px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-hero > svg { width: 42px; height: 42px; opacity: 0.9; }

.recipe-hero-btn {
  position: absolute;
  top: var(--sp-2);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.recipe-hero-btn:active { transform: scale(0.9); }
.recipe-hero-btn.left { left: var(--sp-2); }
.recipe-hero-btn.right { right: var(--sp-2); }
.recipe-hero-btn.photo { top: auto; bottom: var(--sp-2); right: var(--sp-2); }

.recipe-add-row { display: flex; gap: var(--sp-2); align-items: stretch; }

.portion-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 0 var(--sp-1);
  flex-shrink: 0;
}
.stepper-btn {
  width: 36px;
  height: 44px;
  background: none;
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stepper-btn:disabled { opacity: 0.3; }
.stepper-btn:active { transform: scale(0.9); }
.portion-stepper-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  min-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ingredient-rows { display: flex; flex-direction: column; }
.ingredient-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--fs-sm);
}
.ingredient-row:last-child { border-bottom: none; }
.ingredient-amount {
  color: var(--text-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Akce v prázdném stavu (Recepty bez knihovny) */
.empty-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* Náhled receptu v pickeru (foto, nebo barevný blok kategorie s ikonou) */
.picker-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-thumb svg { width: 20px; height: 20px; }

.recipe-steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.recipe-step {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.recipe-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Picker actions */
.picker-actions {
  display: flex;
  gap: var(--sp-2);
}

/* Shopping list */
.shopping-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.shopping-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast);
}

.shopping-item:hover { background: var(--state-hover); }
.shopping-item input { display: none; }

.shopping-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--glass-border-strong);
  flex-shrink: 0;
  position: relative;
  transition: all var(--t-fast) var(--ease-spring);
}

.shopping-item.checked .shopping-check {
  background: var(--brand-gradient);
  border-color: transparent;
}

.shopping-item.checked .shopping-check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.shopping-name {
  flex: 1;
  text-transform: capitalize;
  transition: opacity var(--t-base), text-decoration var(--t-base);
}

.shopping-item.checked .shopping-name {
  text-decoration: line-through;
  opacity: 0.5;
}

.shopping-amount {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}


/* ========================================================================
   CALENDAR
   ======================================================================== */

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.calendar-month-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: capitalize;
  margin: 0;
  flex: 1;
  text-align: center;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--sp-2);
}

.calendar-weekdays span {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 2px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
  min-height: 44px;
}

.cal-day:active { transform: scale(0.92); }
.cal-day:hover { background: var(--state-hover); }

.cal-day.other-month .cal-day-num { color: var(--text-muted); opacity: 0.5; }

.cal-day.today .cal-day-num {
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}

.cal-day.selected {
  background: var(--brand-gradient-soft);
  border: 1px solid var(--brand-primary);
}

.cal-day-num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.cal-day-dots {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  justify-content: center;
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Týdenní agenda */
.week-agenda { display: flex; flex-direction: column; gap: var(--sp-2); }
.wk-day {
  display: flex; flex-direction: column; gap: var(--sp-1);
  text-align: left; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.wk-day:active { transform: scale(0.99); }
.wk-day.today { border-color: var(--section-accent); background: var(--section-grad); }
.wk-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.wk-day-name { font-weight: var(--fw-semibold); }
.wk-day-date { font-size: var(--fs-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wk-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.wk-item-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-muted .wk-item-t { color: var(--text-tertiary); }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.wk-empty { font-size: var(--fs-sm); color: var(--text-muted); }

/* ========================================================================
   CONTACTS
   ======================================================================== */

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--glass-bg-soft);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.contact-card:active { transform: scale(0.98); }
.contact-card:hover { background: var(--state-hover); }

.contact-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contact-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
  flex-wrap: wrap;
}

.contact-actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.contact-actions .btn-icon {
  width: 42px;
  height: 42px;
}

/* ========================================================================
   DOGS
   ======================================================================== */

.dogs-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dog-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.dog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}

.dog-card:active { transform: scale(0.98); }
.dog-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.dog-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--glass-border-strong);
}

.dog-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dog-photo-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--glass-border-strong);
}

.dog-photo-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dog-photo-placeholder {
  color: var(--brand-primary-light);
}

.dog-info {
  flex: 1;
  min-width: 0;
}

.dog-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.dog-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.dog-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Vaccinations timeline */
.vaccination-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: var(--sp-4);
}

.vaccination-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--glass-border-strong);
}

.vaccination-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  position: relative;
  transition: opacity var(--t-fast);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
}

.vaccination-item:hover { opacity: 0.85; }

.vaccination-item.past .vac-dot {
  background: var(--color-success);
}

.vaccination-item.future .vac-dot {
  background: var(--brand-primary);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
}

.vac-dot {
  position: absolute;
  left: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--bg-base);
  flex-shrink: 0;
}

.vac-content {
  flex: 1;
  min-width: 0;
}

.vac-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

.vac-date {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.vac-next {
  font-size: var(--fs-xs);
  color: var(--brand-primary-light);
  font-weight: var(--fw-medium);
  margin-top: 2px;
}

/* ========================================================================
   SETTINGS
   ======================================================================== */

.settings-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.settings-row:active {
  transform: scale(0.98);
  background: var(--state-active);
}

.settings-row:hover { background: var(--state-hover); }

.settings-row.danger { color: var(--color-danger); }

.settings-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.settings-row.danger .settings-row-icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

/* Stacked settings row (e.g. theme picker) */
.settings-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  cursor: default;
}
.settings-row-stacked:active { transform: none; background: transparent; }
.settings-row-stacked:hover { background: transparent; }

.theme-segmented { width: 100%; }
.theme-segmented .segment { flex: 1; }

/* Avatar edit overlay */
.avatar-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  border-radius: 50%;
}

.avatar:hover .avatar-edit-overlay,
.avatar:active .avatar-edit-overlay {
  opacity: 1;
}

/* ========================================================================
   UPDATE BANNER
   ======================================================================== */

.update-banner {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-4);
  min-width: 280px;
  animation: slideUp 400ms var(--ease-spring);
  box-shadow: var(--shadow-xl);
}

.update-banner-content {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.update-banner-content .btn { flex-shrink: 0; }

/* ========================================================================
   BUDGET - category item + category CRUD modals
   ======================================================================== */

.category-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  position: relative;
}

.category-item:active { transform: scale(0.98); background: var(--state-active); }

.category-edit-btn {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out), background var(--t-fast);
  z-index: 1;
}

.category-item:hover .category-edit-btn,
.category-item:focus-within .category-edit-btn {
  opacity: 1;
}

.category-edit-btn:hover { background: var(--state-hover); color: var(--text-primary); }
.category-edit-btn:active { transform: scale(0.92); }

/* Always show edit icon on touch (no hover) */
@media (hover: none) {
  .category-edit-btn { opacity: 0.55; }
}

/* Color swatches */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.color-swatch.selected {
  border-color: #fff;
  transform: scale(1.15);
}

/* Icon picker */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.icon-pick-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1.5px solid transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.icon-pick-btn.selected {
  background: var(--brand-primary-muted);
  border-color: var(--brand-primary);
  color: var(--brand-primary-light);
}

.icon-pick-btn:active { transform: scale(0.92); }
/* === Dnešní jídelníček pod týdnem === */
.day-section-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin: var(--sp-5) 0 var(--sp-1);
}

/* === Mobilní zmenšení fontů === */
@media (max-width: 480px) {
  .card-value { font-size: var(--fs-xl); }
  .weight-panel .weight-current span:first-child { font-size: var(--fs-xl) !important; }
  .week-day-date { font-size: var(--fs-base); }
  .week-day { min-height: 96px; padding: var(--sp-2) 2px; }
  .week-day-name { font-size: 9px; letter-spacing: 0.04em; }
  .day-kcal-big .text-lg { font-size: var(--fs-xl); }
  h2[style*="fs-2xl"], .dog-name { font-size: var(--fs-xl) !important; }
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.dog-photo-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.shopping-item-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.shopping-item .btn-icon-sm { flex-shrink: 0; }

/* === Měsíční rozpočet (příjmy / pravidelné výdaje) === */
.recurring-summary {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.recurring-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--glass-bg-soft);
  border-radius: var(--r-md);
}
.recurring-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.recurring-stat-value {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.recurring-stat-value.income { color: #10B981; }
.recurring-stat-value.expense { color: #EF4444; }

/* Zbývá tento měsíc – hero karta nahoře v přehledu výdajů */
.budget-remaining-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.budget-remaining-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.budget-remaining-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 16%, transparent);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
.budget-remaining-badge.over { color: var(--color-danger); background: rgba(239,68,68,0.15); }

.budget-remaining-value {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  margin: var(--sp-2) 0 var(--sp-3);
}
.budget-remaining-value.negative { color: var(--color-danger); }

.budget-remaining-bar {
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.budget-remaining-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--section-accent), var(--section-accent-2));
  transition: width var(--t-slow) var(--ease-out);
}
.budget-remaining-bar-fill.over { background: var(--color-danger); }

.budget-remaining-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.brp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  font-size: var(--fs-xs);
}
.brp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.brp-dot.income { background: #10B981; }
.brp-dot.fixed  { background: #F59E0B; }
.brp-dot.spent  { background: #EC4899; }
.brp-label { color: var(--text-tertiary); }
.brp-amt { font-weight: var(--fw-semibold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.budget-remaining-hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.recurring-list {
  display: flex;
  flex-direction: column;
}
.recurring-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.recurring-item:last-child { border-bottom: none; }
.recurring-item:active { opacity: 0.6; }
.recurring-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.recurring-dot.income { background: #10B981; }
.recurring-dot.expense { background: #EF4444; }
.recurring-body { flex: 1; min-width: 0; }
.recurring-name { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.recurring-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }
.recurring-amount {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.recurring-amount.income { color: #10B981; }
.recurring-amount.expense { color: #EF4444; }

/* PIN – vizuální zpětná vazba při ověřování */
.pin-input-container.verifying { animation: pinPulse 700ms ease-in-out infinite; }
.pin-input-container.verifying .pin-dot.filled {
  background: var(--brand-primary);
  box-shadow: 0 0 10px rgba(124,58,237,0.6);
}
@keyframes pinPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === Calendar inline day panel === */
.day-panel-empty {
  padding: var(--sp-4) 0;
  text-align: center;
}
.day-panel { scroll-margin-top: var(--sp-4); }

/* === Jemnější stisk karet (mobile feedback) === */
.card[data-action]:active,
button.card:active {
  transform: scale(0.985);
  filter: brightness(1.04);
}
.card { transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), filter var(--t-fast); }

/* === Plynulé scrollování === */
.app-main, .modal-sheet, .segmented { -webkit-overflow-scrolling: touch; }

/* === Ripple jemnější === */
.ripple { background: rgba(255,255,255,0.22); }
[data-theme="light"] .ripple { background: rgba(124,58,237,0.12); }

/* === Polish pass: konzistence velikostí a odsazení === */

/* Kompaktní týdenní hlavička v Jídle */
.week-nav-header { align-items: center; gap: var(--sp-3); }
.week-range {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-top: 2px;
  white-space: nowrap;
}
.btn-icon-sm.glass {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
}
.min-w-0 { min-width: 0; }

/* FAB nepřekrývá poslední obsah – víc místa dole */
.app-main { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 104px); }

/* Měsíční rozpočet – čitelnější hodnoty */
.recurring-stat-value { font-size: var(--fs-base); }

/* FAB jemný stín a stisk – stín v barvě akcentu sekce */
.fab {
  box-shadow: 0 10px 28px var(--section-glow), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base);
}
.fab:active { transform: scale(0.9); }

/* Jednotné mezery sekcí (view-container) na mobilu o kousek menší */
@media (max-width: 480px) {
  .view-container { gap: var(--sp-4); }
  .card { padding: var(--sp-4); }
  .week-range { font-size: var(--fs-base); }
}

/* === Weight empty state === */
.weight-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
}
.weight-empty-icon {
  width: 88px;
  height: 88px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary-light);
  background: var(--brand-gradient-soft);
  margin-bottom: var(--sp-1);
}
.weight-empty-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* === Dog birthday card === */
.birthday-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.birthday-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--brand-gradient-soft);
  flex-shrink: 0;
}
.birthday-date {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.birthday-next {
  font-size: var(--fs-sm);
  color: var(--brand-primary-light);
  font-weight: var(--fw-medium);
  margin-top: 2px;
}

/* === Jednotný nadpis stránky === */
/* Jednotná hlavička stránky: titulek (+ podtitulek). Kontextové ovládání
   (přepínač měsíce, segmenty) je samostatný sourozenec pod ní – rozestup
   drží gap .view-containeru, takže je všude stejný. */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-title, .meals-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin: 0;
}
.page-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin: 0;
}
@media (max-width: 480px) {
  .page-title, .meals-title { font-size: var(--fs-xl); }
}

/* === Dashboard dnešní události === */
.card-today-events { width: 100%; text-align: left; }
.today-events-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.today-event { display: flex; align-items: center; gap: var(--sp-2); }
.today-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.today-event-title { flex: 1; font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-event-time { font-size: var(--fs-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* === Přepínač měsíců (Výdaje) === */
.month-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.month-switcher-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.btn-icon-sm[disabled] { opacity: 0.3; pointer-events: none; }

/* === Obálky (spoření) === */
.envelope-list { display: flex; flex-direction: column; }
.envelope-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--glass-border);
  cursor: pointer; transition: opacity var(--t-fast);
}
.envelope-item:last-child { border-bottom: none; }
.envelope-item:active { opacity: 0.6; }
.envelope-emoji {
  font-size: 22px; width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: var(--glass-bg-strong);
}
.envelope-body { flex: 1; min-width: 0; }
.envelope-name { font-weight: var(--fw-semibold); }
.envelope-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }
.envelope-balance { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--brand-primary-light); }

.env-balance-box {
  text-align: center; padding: var(--sp-4);
  background: var(--brand-gradient-soft); border-radius: var(--r-lg);
}
.env-balance-big { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.env-actions { display: flex; gap: var(--sp-2); }
.env-history-header { letter-spacing: -0.01em; font-weight: var(--fw-semibold); padding-top: var(--sp-2); }
.env-moves { display: flex; flex-direction: column; }
.env-move {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--glass-border);
}
.env-move:last-child { border-bottom: none; }
.env-move-amount { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.env-move-amount.pos { color: #10B981; }
.env-move-amount.neg { color: #EF4444; }
.env-move-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 1px; }

.emoji-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.emoji-btn {
  width: 44px; height: 44px; font-size: 22px; border-radius: var(--r-md);
  background: var(--glass-bg); border: 1.5px solid transparent; cursor: pointer;
}
.emoji-btn.selected { border-color: var(--brand-primary); background: var(--brand-primary-muted); }

/* === Graf výdajů v čase === */
.trend-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  height: 140px;
  margin-top: var(--sp-3);
}
.trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.trend-val {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.trend-bar {
  width: 70%;
  max-width: 28px;
  border-radius: var(--r-sm);
  background: var(--glass-bg-strong);
  transition: height var(--t-base) var(--ease-spring), background var(--t-fast), transform var(--t-fast);
  min-height: 4px;
}
.trend-col.active .trend-bar { background: var(--brand-gradient); box-shadow: 0 0 14px rgba(124,58,237,0.5); }
.trend-col:active .trend-bar { transform: scaleY(0.96); }
.trend-col.active .trend-val { color: var(--brand-primary-light); }
.trend-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: capitalize;
}
.trend-col.active .trend-label { color: var(--text-secondary); font-weight: var(--fw-semibold); }

/* === Připomínky (dashboard) === */
.reminders-card { width: 100%; text-align: left; }
.reminders-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.reminder-item { display: flex; align-items: center; gap: var(--sp-3); }
.reminder-emoji {
  font-size: 18px; width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: var(--glass-bg-strong);
}
.reminder-item.urgent .reminder-emoji { background: rgba(239,68,68,0.18); }
.reminder-text { display: flex; flex-direction: column; min-width: 0; }
.reminder-text strong { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reminder-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }
.reminder-item.urgent .reminder-sub { color: var(--color-danger); font-weight: var(--fw-medium); }

/* === iOS „Přidat na plochu" banner === */
.ios-install {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--sp-3));
  transform: translate(-50%, 140%);
  width: min(420px, calc(100vw - var(--sp-5) * 2));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-toast);
  opacity: 0;
  transition: transform 400ms var(--ease-spring), opacity 300ms var(--ease-out);
}
.ios-install.show { transform: translate(-50%, 0); opacity: 1; }
.ios-install-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: #fff; background: var(--brand-gradient);
}
.ios-install-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.ios-install-text strong { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.ios-install-text span { font-size: var(--fs-xs); color: var(--text-secondary); }
.ios-install-text b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.ios-install-close {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); color: var(--text-tertiary);
  background: var(--glass-bg);
}

/* === Pull-to-refresh (iOS styl) === */
.ptr {
  position: fixed;
  top: calc(var(--safe-top) + var(--header-height) - 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  z-index: var(--z-sticky);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 250ms var(--ease-spring);
}
.ptr-spin {
  width: 18px; height: 18px;
  border: 2px solid var(--glass-border-strong);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
}
.ptr.ready .ptr-spin { border-top-color: var(--brand-primary-light); }
.ptr.spinning .ptr-spin { animation: spin 700ms linear infinite; }

/* ====================================================================
   DASHBOARD – REDESIGN
   Kompaktní hlavička, agenda „Dnes", sloučená výživa, statistické
   dlaždice a rychlé zkratky. Rozestupy řeší .view-container (gap).
   ==================================================================== */

/* --- Hlavička --- */
.dash-top { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-top-main { display: flex; align-items: center; gap: var(--sp-3); }
.dash-top-forecast { display: flex; padding-top: var(--sp-3); border-top: 1px solid var(--glass-border); }
.dash-top-avatar { flex: none; }
.dash-top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-hello { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-primary); line-height: var(--lh-tight); }
.dash-date { font-size: var(--fs-sm); color: var(--text-secondary); }
.dash-nameday { font-size: var(--fs-xs); color: var(--text-tertiary); }
.dash-wchip {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--r-full);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
}
.dash-wchip-icon { font-size: 15px; line-height: 1; }

/* --- Tenký 3denní proužek počasí --- */
.dash-weather { display: flex; padding: var(--sp-3) var(--sp-2); }
.dash-wday { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.dash-wday + .dash-wday { border-left: 1px solid var(--glass-border); }
.dash-wday-l { font-size: var(--fs-xs); color: var(--text-tertiary); }
.dash-wday-i { font-size: 22px; line-height: 1; }
.dash-wday-t { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); white-space: nowrap; }

/* --- Obecná dashboard karta --- */
.dash-card { display: block; width: 100%; text-align: left; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dash-title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-primary); }
.dash-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }
.dash-empty { font-size: var(--fs-sm); color: var(--text-tertiary); padding: var(--sp-1) 0; }

/* --- Sedmáček radí (asistent) --- */
.sed-tip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--brand-gradient-soft);
  border: 1px solid var(--glass-border);
}
.sed-tip-mascot { flex: 0 0 auto; width: 58px; height: 58px; }
.sed-tip-mascot .sed-mascot { display: block; }
.sed-tip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sed-tip-name {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em;
  color: var(--brand-primary-light);
}
.sed-tip-text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
.sed-tip-btn { align-self: flex-start; margin-top: var(--sp-1); }

/* --- Agenda „Dnes" --- */
.agenda-list { display: flex; flex-direction: column; }
.agenda-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.agenda-item + .agenda-item { border-top: 1px solid var(--glass-border); }
.agenda-ico {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.agenda-title { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-meta { flex: none; font-size: var(--fs-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.agenda-item.urgent .agenda-meta { color: var(--color-danger); font-weight: var(--fw-medium); }

/* --- Výživa: kruh kalorií + makro pruhy --- */
.nutri { display: flex; align-items: center; gap: var(--sp-4); }
.cal-ring { position: relative; flex: none; width: 112px; height: 112px; }
.cal-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cal-ring-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
.cal-ring-goal { font-size: var(--fs-xs); color: var(--text-tertiary); }
.cal-ring-of { font-size: 10px; color: var(--text-muted); line-height: 1; margin-top: 1px; }
.nutri-empty-hint {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--glass-border);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  text-align: center;
}

/* Globální hledání (lupa v hlavičce) */
.app-header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.global-search {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--bg-overlay);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  display: flex; flex-direction: column;
  padding: calc(var(--safe-top) + var(--sp-3)) var(--sp-4) var(--sp-4);
  animation: fadeIn var(--t-base) var(--ease-out);
}
.global-search.removing { opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.gsearch-bar { display: flex; align-items: center; gap: var(--sp-2); }
.gsearch-ico { color: var(--text-tertiary); flex-shrink: 0; margin-left: var(--sp-1); }
.gsearch-input {
  flex: 1; min-width: 0; height: 46px; padding: 0 var(--sp-3);
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--r-md); color: var(--input-text); font-size: 16px;
}
.gsearch-cancel {
  background: none; border: none; color: var(--section-accent);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  padding: var(--sp-2); flex-shrink: 0; cursor: pointer;
}
.gsearch-results { flex: 1; overflow-y: auto; margin-top: var(--sp-4); -webkit-overflow-scrolling: touch; }
.gsearch-hint { color: var(--text-tertiary); text-align: center; padding: var(--sp-7) var(--sp-4); font-size: var(--fs-sm); }
.gsearch-group { margin-bottom: var(--sp-4); }
.gsearch-group-title {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-tertiary); letter-spacing: 0.02em;
  margin-bottom: var(--sp-2); padding: 0 var(--sp-2);
}
.gsearch-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
  text-align: left; margin-bottom: var(--sp-1); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.gsearch-item:active { transform: scale(0.99); background: var(--state-active); }
.gsearch-item-ico { font-size: 20px; flex-shrink: 0; }
.gsearch-item-body { display: flex; flex-direction: column; min-width: 0; }
.gsearch-item-title { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-item-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Účtenka u výdaje – náhled + lightbox */
.receipt-preview {
  width: 56px; height: 56px; border-radius: var(--r-md);
  overflow: hidden; background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; padding: 0;
}
.receipt-preview img { width: 100%; height: 100%; object-fit: cover; }
.receipt-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5); animation: fadeIn var(--t-base) var(--ease-out);
}
.receipt-lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r-md); box-shadow: var(--shadow-xl); }
.receipt-lightbox-close {
  position: absolute; top: calc(var(--safe-top) + var(--sp-4)); right: var(--sp-4);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Úkoly domácnosti */
.task-list { display: flex; flex-direction: column; }
.task-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.task-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--glass-border-strong); background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.task-check:active { transform: scale(0.88); }
.task-item.done .task-check { background: var(--section-accent); border-color: var(--section-accent); }
.task-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  background: none; border: none; text-align: left; cursor: pointer; padding: 0;
}
.task-title { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-item.done .task-title { text-decoration: line-through; color: var(--text-tertiary); }
.task-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.task-assignee { font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 2px var(--sp-2); border-radius: var(--r-full); }
.task-due { font-size: var(--fs-xs); color: var(--text-tertiary); }
.task-due.overdue { color: var(--color-danger); font-weight: var(--fw-semibold); }
.task-rec { font-size: var(--fs-xs); color: var(--text-tertiary); background: var(--glass-bg-soft); padding: 2px var(--sp-2); border-radius: var(--r-full); }
.task-alldone { text-align: center; padding: var(--sp-4); color: var(--text-secondary); font-size: var(--fs-md); }

.dogs-card { text-align: left; }
.dash-card-line { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dogs-card-vac {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.dogs-card-vac.urgent { color: var(--color-danger); font-weight: var(--fw-semibold); }
.macro-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.mbar-row { display: flex; flex-direction: column; gap: 5px; }
.mbar-top { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); gap: var(--sp-2); }
.mbar-label { color: var(--text-secondary); }
.mbar-val { color: var(--text-primary); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mbar-goal { color: var(--text-tertiary); font-weight: var(--fw-regular); }
.mbar-track { height: 7px; border-radius: var(--r-full); background: var(--glass-bg-strong); overflow: hidden; }
.mbar-fill { height: 100%; border-radius: var(--r-full); transition: width 600ms var(--ease-out); }

/* --- Statistické dlaždice (útrata + váha) --- */
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.stat-tile { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.stat-label { font-size: var(--fs-sm); color: var(--text-tertiary); }
.stat-ico {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient-soft); color: var(--brand-primary-light);
}
.stat-value { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; }
.stat-progress { margin: var(--sp-3) 0 var(--sp-2); height: 6px; }
.stat-foot { font-size: var(--fs-xs); color: var(--text-tertiary); }
.wt-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.wt-unit { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: var(--fw-regular); margin-left: 3px; }
.wt-badge { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 2px 7px; border-radius: var(--r-full); }
.wt-badge.loss { background: rgba(16,185,129,0.15); color: #34D399; }
.wt-badge.gain { background: rgba(239,68,68,0.15); color: #F87171; }
.stat-tile .weight-sparkline { margin-top: var(--sp-2); }

/* --- Rychlé zkratky --- */
.quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: var(--sp-2); }

/* Tlačítko „Přizpůsobit dashboard" + modal s customizací widgetů */
.dash-customize-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: var(--sp-3) auto var(--sp-1); padding: var(--sp-2) var(--sp-4);
  background: transparent; border: 1px solid var(--glass-border);
  border-radius: var(--r-full); color: var(--text-tertiary);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.dash-customize-btn:active { transform: scale(0.97); color: var(--text-secondary); background: var(--state-active); }
.cust-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cust-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.cust-reorder { display: flex; flex-direction: column; gap: 2px; }
.cust-move {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 20px; border-radius: 6px;
  background: var(--glass-bg-strong); border: none; color: var(--text-secondary);
}
.cust-move:disabled { opacity: 0.3; }
.cust-move:active:not(:disabled) { transform: scale(0.9); color: var(--brand-primary); }
.cust-label { flex: 1; font-weight: var(--fw-medium); }

/* Farma – Prodeje */
.farm-chips {
  display: flex; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px var(--sp-1); margin: 0 0 var(--sp-3); scrollbar-width: none;
}
.farm-chips::-webkit-scrollbar { display: none; }
.farm-chip {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
}
.farm-chip.active {
  background: var(--section-accent); border-color: var(--section-accent);
  color: #fff;
}
.farm-total-row { display: flex; align-items: center; justify-content: space-between; }
.farm-total-label { color: var(--text-secondary); font-size: var(--fs-sm); }
.farm-total-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--section-accent); }
.farm-month-sub { color: var(--section-accent); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.farm-list { display: flex; flex-direction: column; }
.farm-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; text-align: left; padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--glass-border); background: transparent;
}
.farm-row:last-child { border-bottom: none; }
.farm-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.farm-row-title { font-weight: var(--fw-semibold); }
.farm-row-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }
.farm-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.farm-row-amt { font-weight: var(--fw-semibold); }
.farm-row-note { font-size: var(--fs-xs); color: var(--text-tertiary); }
.farm-unitprice { min-height: 18px; font-size: var(--fs-sm); color: var(--section-accent); font-weight: var(--fw-medium); margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); }

/* Farma – Brigádníci (rozbalitelné osoby) */
.farm-worker-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; text-align: left; background: transparent; padding: 0;
}
.farm-worker-name { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.farm-worker-right { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.farm-worker-chev { color: var(--text-tertiary); display: flex; transition: transform var(--t-fast) var(--ease-out); }
.farm-worker.open .farm-worker-chev { transform: rotate(180deg); color: var(--section-accent); }
.farm-worker.open .farm-list { margin-top: var(--sp-3); border-top: 1px solid var(--glass-border); }

/* Farma – Přehled (statistiky) */
.farm-hero { text-align: center; }
.farm-hero-label { color: var(--text-secondary); font-size: var(--fs-sm); }
.farm-hero-val { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--section-accent); margin: var(--sp-1) 0 var(--sp-3); letter-spacing: -0.02em; }
.farm-hero-val.negative { color: var(--color-danger); }
.farm-hero-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.farm-pill {
  flex: 1 1 140px; display: flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.farm-pill-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.farm-pill-dot.rev { background: var(--section-accent); }
.farm-pill-dot.gig { background: #CA8A04; }
.farm-pill-dot.wage { background: var(--color-danger); }
.farm-pill-amt { margin-left: auto; font-weight: var(--fw-semibold); color: var(--text-primary); }
.farm-stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--glass-border);
}
.farm-stat-row:last-child { border-bottom: none; }
.farm-badge {
  display: inline-block; margin-left: var(--sp-2); padding: 1px 8px;
  border-radius: var(--r-full); font-size: 11px; font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--section-accent) 22%, transparent); color: var(--section-accent);
  vertical-align: middle;
}
.farm-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-tertiary); }

/* Farma – Kšefty (práce se strojem). 4 záložky → sevřenější segmenty. */
.segmented-farm .segment { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.farm-mbadge {
  display: inline-block; margin-left: var(--sp-2); padding: 1px 8px;
  border-radius: var(--r-full); font-size: 11px; font-weight: var(--fw-semibold);
  vertical-align: middle;
}
.farm-mbadge.kombajn { background: color-mix(in srgb, #CA8A04 22%, transparent); color: #CA8A04; }
.farm-mbadge.traktor { background: color-mix(in srgb, #15803D 22%, transparent); color: #15803D; }

/* Farma – správa plodin */
.farm-chip-manage { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-2); color: var(--text-tertiary); }
.farm-crop-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.farm-crop-row { display: flex; align-items: center; gap: var(--sp-2); }
.farm-crop-row .farm-crop-name { flex: 1; min-width: 0; }
.farm-crop-row .farm-crop-unit { flex: 0 0 82px; }
.farm-crop-del {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--color-danger);
}
.farm-crop-del:active { transform: scale(0.92); }
.farm-crop-add { display: flex; align-items: center; gap: var(--sp-2); }
.farm-crop-add [data-new-name] { flex: 1; min-width: 0; }
.farm-crop-add [data-new-unit] { flex: 0 0 82px; }
.farm-crop-add [data-add] { flex: 0 0 auto; }

/* Průvodce prvním nastavením profilu */
.setup-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: var(--sp-4); }
.setup-dot { width: 28px; height: 4px; border-radius: 2px; background: var(--glass-border); transition: background var(--t-fast); }
.setup-dot.on { background: var(--brand-primary); }
.setup-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.setup-hero .avatar { margin-bottom: var(--sp-1); }
.setup-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; }
.setup-body > .setup-title { margin-bottom: 2px; }
.setup-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; line-height: 1.45; }
.setup-body > .setup-sub { margin-bottom: var(--sp-3); }
.setup-methods { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.setup-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-4); }
.setup-nav { display: flex; align-items: center; gap: var(--sp-2); }
.quick-pill {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: var(--sp-3) var(--sp-1); border-radius: var(--r-md);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.quick-ico { color: var(--brand-primary-light); display: flex; }
.quick-ico svg { width: 22px; height: 22px; }
.quick-label { font-size: var(--fs-xs); }