/* ============================================================================
   Projektovník — Apple-native design system (rebuilt from scratch)
   One coherent pass: tokens → base → components → responsive → a11y.
   Logic/markup unchanged; every existing selector is restyled here.
   ============================================================================ */

/* ===== 0. Design tokens (single source) ===== */
@import url('design-tokens.css');

/* ===== 1. Base ===== */

/* ===== 2. Reset + base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  background: var(--bg);
  color: var(--text);
  /* --app-h meria app.js z innerHeight; 100vh je na iOS väčšie než viditeľná plocha */
  height: var(--app-h, 100vh);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; }
button, input, textarea, select { font-family: inherit; }
a { color: var(--primary); }
.hidden { display: none !important; }
/* Utility pre drobné rozostupy v šablónach — namiesto inline style="" (CSP-friendly, jedno miesto na zmenu). */
.u-flex1 { flex: 1; }
.u-mt8 { margin-top: 8px; } .u-mt10 { margin-top: 10px; } .u-mt-6 { margin-top: -6px; }
.u-mb8 { margin-bottom: 8px; } .u-mb10 { margin-bottom: 10px; } .u-mb12 { margin-bottom: 12px; } .u-mb14 { margin-bottom: 14px; }
.u-cols2 { grid-template-columns: repeat(2, 1fr); } .u-cols3 { grid-template-columns: repeat(3, 1fr); }
.u-fw400 { font-weight: 400; } .u-p16 { padding: 16px; }
.dot.dot-view { background: var(--warn); }
.spacer { flex: 1; }
.muted-hint { color: var(--muted); font-size: 13px; padding: 4px 10px; }
.field-hint { color: var(--muted); font-weight: 400; font-size: 12px; }

/* ===== 3. Icon system (.sfi) — defs appended below programmatically ===== */
.sfi {
  display: inline-block; width: 1.05em; height: 1.05em; flex: none;
  background: currentColor; vertical-align: -.15em;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}

/* ===== 4. App shell layout ===== */
.app { display: flex; height: var(--app-h, 100vh); }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }

/* ---- sidebar ---- */
.sidebar {
  width: 220px; min-width: 220px;
  display: flex; flex-direction: column;
  padding: 16px 8px 12px;
  gap: 2px;
  color: var(--sidebar-text);
  background: var(--col-bg);
  border-right: 1px solid var(--glass-brd);
  overflow: hidden;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 6px 12px;
}
.sidebar-header .logo {
  font-size: 14px; font-weight: 800; letter-spacing: -.03em; color: var(--text);
  display: inline-flex; align-items: center; gap: 7px;
}
.sidebar-header .logo-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--primary); display: inline-flex; align-items: center; justify-content: center;
  flex: none; font-size: 12px; font-weight: 900; color: #fff; letter-spacing: 0;
}
.sidebar-header .logo-dot { display: none; }

/* nav section label */
.nav-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px 3px; width: 100%;
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--faint); border: none; background: none;
}
.nav-section:first-child { padding-top: 4px; }
.nav-collapse { cursor: pointer; text-align: left; }
.nav-collapse:hover span { color: var(--muted); }

/* nav item */
.project-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -1px; padding: 0 1px; }
.nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: none; background: none; cursor: pointer;
  color: var(--sidebar-muted); font-size: 13px; font-weight: 500; border-radius: 8px; text-align: left;
  transition: background var(--motion-fast), color var(--motion-fast);
  min-height: 32px;
}
.nav-item:hover { background: var(--sidebar-fill); color: var(--sidebar-text); }
.nav-item.active {
  background: var(--sidebar-fill-2);
  color: #fff; font-weight: 600;
}
/* active accent stripe */
.nav-item.active::before {
  content: ''; display: block; width: 3px; height: 14px; border-radius: 2px;
  background: var(--primary); flex: none; margin-left: -2px;
}
.nav-item:not(.active)::before { content: ''; width: 3px; flex: none; margin-left: -2px; }
.nav-item .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.nav-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .sfi { width: 16px; height: 16px; opacity: .7; flex: none; }
.nav-item.active .sfi { opacity: 1; }
.nav-item .count {
  font-size: 10.5px; font-weight: 700; background: var(--danger); color: #fff;
  border-radius: 20px; padding: 1px 5px; min-width: 17px; text-align: center; line-height: 1.6;
  opacity: 1;
}
.nav-item .count.ok { background: var(--primary); }
.nav-item .count.muted { background: var(--fill-2); color: var(--muted); font-weight: 600; }
.nav-item.active .count { opacity: 1; }
.nav-item .count:empty { display: none; }
.archived-item { opacity: .5; }
.archived-item:hover { opacity: 1; }

/* module groups — colored icon on hover/active */
.nav-item[data-route="fitness"] .sfi { color: var(--m-fitness); }
.nav-item[data-route="strava"] .sfi { color: var(--m-strava); }
.nav-item[data-route="data"] .sfi { color: var(--m-sleep); }
.nav-item[data-route="skola"] .sfi { color: var(--m-school); }
.nav-item[data-route="studio"] .sfi { color: var(--m-inbox); }
.nav-item[data-route="content"] .sfi { color: var(--m-padel); }
.nav-item[data-route="retro"] .sfi { color: var(--m-work); }
.nav-item[data-route="inbox"] .sfi { color: var(--m-inbox); }

/* project tree */
.proj-item { gap: 6px; position: relative; }
.proj-caret, .proj-caret-spacer {
  width: 18px; height: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; opacity: .55; border-radius: 5px;
}
.proj-caret { cursor: pointer; }
.proj-caret:hover { background: var(--sidebar-fill-2); opacity: 1; }
.proj-edit, .proj-addsub {
  color: var(--sidebar-text); font-size: 12px; padding: 2px 5px;
  border-radius: 5px; opacity: 0; flex: none; background: none; border: none; cursor: pointer;
}
.proj-item:hover .proj-edit, .proj-item:hover .proj-addsub { opacity: .55; }
.proj-edit:hover, .proj-addsub:hover { opacity: 1 !important; background: var(--sidebar-fill-2); }
.crumb-sep { opacity: .45; margin: 0 2px; font-weight: 400; }
@media (hover: none) { .proj-edit, .proj-addsub, .view-item .view-del { opacity: .5; } }

.view-item .view-del { margin-left: auto; opacity: 0; font-size: 11px; }
.view-item:hover .view-del { opacity: .8; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; }

.sidebar-footer {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 2px 0;
  border-top: 1px solid var(--glass-brd);
  margin-top: 8px;
}
.sidebar-footer .btn { color: var(--sidebar-muted); width: 100%; text-align: left; font-size: 13px; padding: 7px 8px; border-radius: 8px; }
.sidebar-footer .btn:hover { background: var(--sidebar-fill); color: var(--sidebar-text); }
.settings-list {
  display: flex; flex-direction: column; gap: 1px;
  margin-bottom: 6px; padding: 4px;
  background: var(--fill); border: 1px solid var(--glass-brd); border-radius: var(--r-card);
}
.settings-list .btn .sfi { color: var(--muted); margin-right: 4px; }
#btn-settings, #btn-theme, #btn-logout { color: var(--sidebar-muted); }
#btn-settings:hover, #btn-theme:hover, #btn-logout:hover { background: var(--sidebar-fill); color: var(--sidebar-text); }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
  color: var(--sidebar-text); font-size: 13px; font-weight: 500;
  transition: background var(--motion-fast);
}
.user-chip:hover { background: var(--sidebar-fill); }
.user-chip .user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 6px; background: var(--fill-2); color: rgba(255,255,255,.6);
}
#btn-logout { font-size: 15px; }

/* ===== 4. Utilities: Motion, Glass, Skeleton, Empty States, Touch ===== */

/* Motion */
.motion-fade-in { animation: fadeIn var(--motion-base) var(--motion-ease-out) forwards; }
.motion-slide-up { animation: slideUp var(--motion-slow) var(--motion-ease) forwards; }
.motion-slide-down { animation: slideDown var(--motion-slow) var(--motion-ease) forwards; }
.motion-scale-in { animation: scaleIn var(--motion-fast) var(--motion-ease-out) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Glass morphism */
.glass { background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); }
.glass-strong { background: var(--glass-strong); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--fill) 25%, var(--fill-2) 50%, var(--fill) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-control); }
.skeleton-text { height: 1em; margin: 0.5em 0; }
.skeleton-title { height: 1.5em; width: 60%; margin-bottom: 0.5em; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { padding: var(--space-4); }
.skeleton-tile { padding: var(--space-4); min-height: 120px; }
.skeleton-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 56px; }

/* Stagger entrance for lists */
.stagger > * { opacity: 0; animation: slideUp var(--motion-slow) var(--motion-ease) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }
.stagger > *:nth-child(7) { animation-delay: 240ms; }
.stagger > *:nth-child(8) { animation-delay: 280ms; }

/* Empty states */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted); gap: var(--space-3); }
.empty .empty-icon { width: 64px; height: 64px; opacity: 0.4; color: var(--faint); }
.empty .empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-2); }
.empty .empty-desc { font-size: var(--fs-sm); max-width: 280px; line-height: 1.5; }
.empty .empty-action { margin-top: var(--space-2); }

/* Touch targets & active states */
.touch-target { min-height: var(--touch-min); min-width: var(--touch-min); display: flex; align-items: center; justify-content: center; }
.touch-active { transition: transform var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast); }
.touch-active:active { transform: scale(0.97); }
.tile[data-go].touch-active:active { transform: scale(0.98); background: var(--fill-2); }
.btn.touch-active:active { transform: scale(0.97); }
.nav-item.touch-active:active { background: var(--hover); }

/* Ripple effect (CSS-only, no JS) */
.ripple { position: relative; overflow: hidden; }
.ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,.15); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.ripple:active::after { animation: ripple var(--motion-slow) var(--motion-ease-out); }
@keyframes ripple { to { width: 300px; height: 300px; opacity: 0; } }

/* Tabbar glass */
.tabbar.glass { background: var(--glass); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-brd); }

/* Topbar glass */
.topbar.glass { background: var(--glass); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-brd); }

/* Sheet glass */
.kd-sheet { background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-sheet); border-radius: var(--r-sheet, 16px); animation: slideUp var(--motion-sheet, .32s) var(--motion-ease, cubic-bezier(.22,1,.36,1)) forwards; }
.kd-ov { backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
.kd-sh-head { border-bottom: 1px solid var(--glass-brd); }
.kd-sh-foot { border-top: 1px solid var(--glass-brd); }
.kd-sheet.glass, .zivot-sheet.glass { background: var(--glass-strong); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sheet); border: 1px solid var(--glass-brd); }

/* High contrast focus for accessibility */
@media (prefers-contrast: high) {
  :focus-visible { outline-width: 3px; outline-offset: 3px; }
  .btn { border: 1px solid currentColor; }
}

/* Typography utilities */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: var(--font-feature-tnum); font-family: var(--font-display); }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* ===== 5. Buttons / icon buttons ===== */
.btn {
  border: none; border-radius: var(--r-control); padding: 8px 14px;
  font-size: 13px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, opacity .12s;
}
.btn .sfi { margin-right: 1px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--fill); color: var(--text-2); border: 1px solid var(--glass-brd); }
.btn-ghost:hover { background: var(--fill-2); }
.btn-danger { background: var(--danger-soft); color: var(--danger-text); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.icon-btn {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 15px; border-radius: 8px; padding: 6px 8px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--hover); }

/* ===== 6. Chips / pills / badges ===== */
.chip {
  --c: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 590; padding: 4px 11px; border-radius: 100px;
  border: 1.5px solid var(--c); color: var(--c); background: transparent; cursor: pointer;
}
.chip.chip-on { background: var(--c); color: #fff; }
.chip i { font-style: normal; opacity: .75; font-size: 10px; }
.chip.mini { padding: 1px 9px; font-size: 10.5px; cursor: inherit; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }

.pill-select { display: flex; flex-wrap: wrap; gap: 7px; }
.pill-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--input-bg); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer;
}
.pill-opt:hover { border-color: var(--muted); }
.pill-opt .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pill-opt.sel { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.pill-select.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pill-select.seg .pill-opt { justify-content: center; padding: 9px 4px; }
.pill-opt.prio-high.sel { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.pill-opt.prio-low.sel { border-color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 100px; font-weight: 590; display: inline-flex; align-items: center; gap: 3px; }
.badge .sfi { width: 12px; height: 12px; vertical-align: -.12em; }
.badge-project { color: #fff; }
.badge-due { background: var(--fill); color: var(--muted); }
.badge-due.overdue { background: var(--danger-soft); color: var(--danger-text); }
.badge-due.today { background: rgba(255,149,0,.16); color: var(--warn-text); }
.badge-due.complete { background: rgba(52,199,89,.16); color: var(--success-text); }
.badge-blocked { background: var(--danger-soft); color: var(--danger-text); }
.prio { font-size: 11px; font-weight: 700; }
.prio-1 { color: var(--danger-text); }
.prio-3 { color: var(--muted); }

/* date-quick + remind-quick */
.date-quick, .remind-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.dq {
  border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
  border-radius: var(--r-control); padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dq:hover { border-color: var(--muted); }
.dq.sel { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.dq-clear { color: var(--muted); font-weight: 700; padding: 7px 11px; }
.dq-clear.sel { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--text); border-color: var(--border); }

/* ===== 7. Topbar ===== */
.topbar {
  position: relative; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 22px;
  height: 52px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-brd);
}
#view-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); flex: 1; min-width: 0; }
#view-title { margin-right: auto; }
.topbar-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }


.view-switch { display: flex; background: var(--fill); border-radius: var(--r-control); padding: 2px; gap: 2px; }
.view-switch button {
  border: none; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 590; display: inline-flex; align-items: center;
}
.view-switch .sfi { width: 16px; height: 16px; }
.view-switch button.active { background: var(--bg-2); color: var(--text); box-shadow: var(--shadow-1); font-weight: 600; }

#filter-priority, #filter-assignee, #search {
  padding: 7px 11px; border: 1px solid var(--glass-brd); border-radius: var(--r-control);
  font-size: 13px; background: var(--input-bg); color: var(--text);
}
#search { width: 180px; }
#filter-priority:focus, #filter-assignee:focus, #search:focus {
  outline: none; border-color: var(--primary); background: var(--fill);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* notifications */
.notif-wrap { position: relative; }
#btn-notif, #btn-scratch { position: relative; }
.notif-badge {
  position: absolute; top: 0; right: 0;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(360px, 92vw);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel);
  box-shadow: var(--shadow-pop); z-index: 60; overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--separator);
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.notif-readall { border: none; background: none; color: var(--primary); font-size: 13px; cursor: pointer; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--separator); cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--hover); }
.notif-item.unread { background: var(--primary-soft); }
.notif-ic { flex: none; width: 22px; text-align: center; color: var(--primary); display: inline-flex; justify-content: center; }
.notif-ic .sfi { width: 17px; height: 17px; }
.notif-txt { font-size: 13px; line-height: 1.4; min-width: 0; }
.notif-body { color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-when { color: var(--faint); font-size: 11px; margin-top: 3px; }

/* timer chip */
.timer-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--primary-soft); color: var(--primary); border: 1px solid transparent;
  border-radius: 100px; padding: 6px 12px; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.timer-chip button { border: none; background: var(--primary); color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 9px; cursor: pointer; }

/* project subbar */
.project-subbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 22px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.subbar-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.subbar-chip, .subbar-up, .subbar-add {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); cursor: pointer;
}
.subbar-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.subbar-chip i { font-style: normal; opacity: .6; font-size: 11px; }
.subbar-chip:hover, .subbar-up:hover { border-color: var(--primary); }
.subbar-up { color: var(--muted); }
.subbar-add { border-style: dashed; color: var(--muted); }
.subbar-add:hover { color: var(--primary); border-color: var(--primary); }

/* quick add */
.quick-add { padding: 10px 22px 0; }
.quick-add input {
  width: 100%; padding: 9px 14px; border: 1px dashed var(--glass-brd); border-radius: var(--r-control);
  font-size: 13px; background: var(--panel); color: var(--text);
}
.quick-add input:focus { outline: none; border-style: solid; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ===== 8. Board / column / card ===== */
.board { flex: 1; display: flex; align-items: stretch; gap: 12px; padding: 16px 20px; overflow: auto; }
.column {
  background: var(--col-bg); border-radius: 12px; border: 1px solid var(--glass-brd);
  display: flex; flex-direction: column; flex: 1 0 260px; min-width: 260px; max-width: 380px; max-height: 100%;
}
.column-header {
  padding: 13px 16px 10px; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col-todo { background: #aeaeb2; } .col-doing { background: var(--warn); } .col-done { background: var(--success); }
.col-count { margin-left: auto; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.col-gear { font-size: 12px; padding: 2px 5px; opacity: .55; background: none; border: none; cursor: pointer; color: inherit; }
.col-gear:hover { opacity: 1; }
.column-body { flex: 1; overflow-y: auto; padding: 2px 10px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.column-body.drag-over { background: var(--primary-soft); border-radius: 0 0 var(--r-panel) var(--r-panel); }
.col-add {
  flex: 0 0 auto; align-self: flex-start; border: 1px dashed var(--border); background: none;
  color: var(--muted); border-radius: var(--r-card); padding: 12px 18px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.col-add:hover { color: var(--primary); border-color: var(--primary); }

.card {
  background: var(--panel); border-radius: var(--r-card); padding: 11px 13px;
  box-shadow: none; cursor: grab; border-left: 3px solid transparent;
  border: 1px solid var(--glass-brd);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.card:hover { background: var(--fill); border-color: var(--glass-brd); }
.card.dragging { opacity: .5; }
.card.blocked { opacity: .55; }
.card.has-cover { padding-top: 0; overflow: hidden; }
.card-cover { margin: -12px -14px 10px; height: 128px; background: var(--fill); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.card.done .card-title { text-decoration: line-through; color: var(--muted); }
.card-desc { font-size: 12px; color: var(--muted); margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.card.touch-ghost { position: fixed; z-index: 200; pointer-events: none; opacity: .95; transform: rotate(2deg) scale(1.03); box-shadow: var(--shadow-pop); }

.empty-hint { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 0; }
.empty-hint.big { padding: 64px 0; font-size: 15px; }
.empty-hint .sfi { width: 22px; height: 22px; vertical-align: -.22em; opacity: .6; }

/* ===== 9. List / rows ===== */
.list-view { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior-y: contain; }
.list-group { flex-shrink: 0; background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow-1); overflow: hidden; }
.list-group-title {
  padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--separator);
}
.list-group-title .sfi { width: 16px; height: 16px; vertical-align: -.16em; color: var(--muted); }
.row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.row:hover { background: rgba(255,255,255,.04); }
.row.done .row-title { text-decoration: line-through; color: var(--muted); }
.row-check { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex: none; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.row-meta { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; align-items: center; }

/* swipe */
.row-swipe { position: relative; overflow: hidden; border-bottom: 1px solid var(--separator); }
.row-swipe:last-child { border-bottom: none; }
.row-swipe .row { border-bottom: none; touch-action: pan-y; }
.row-swipe-action { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; font-weight: 700; font-size: 14px; pointer-events: none; }
.row-swipe-action .ic { display: inline-flex; align-items: center; gap: 6px; transition: transform .12s ease; }
.row-swipe-action.armed .ic { transform: scale(1.18); }
.row-swipe-action.armed { filter: saturate(1.25) brightness(1.08); }
.swipe-del { justify-content: flex-end; padding-right: 20px; background: var(--danger); clip-path: inset(0 0 0 100%); }
.swipe-done { justify-content: flex-start; padding-left: 20px; background: var(--success); clip-path: inset(0 100% 0 0); }
.swipe-done.swipe-reopen { background: var(--primary); }
.row.completing { animation: rowFlash .38s ease; }
.row.reopening { animation: rowFlash .38s ease; }
@keyframes rowFlash { 0% { background: transparent; } 35% { background: var(--primary-soft); } 100% { background: transparent; } }
.row.completing .row-check { animation: checkPop .32s ease; }
@keyframes checkPop { 50% { transform: scale(1.4); } }

/* selection */
.card.selected, .row.selected { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-card); }
.row.selected { background: var(--primary-soft); }

/* ===== 10. Today tiles ===== */
#today-view { flex: 1; overflow-y: auto; padding: 20px 24px; overscroll-behavior-y: contain; }

/* hlavička dňa — veľký dátum, podtitul, hodiny (mockup) */
.today-head {
  display: flex; align-items: flex-end; gap: 16px;
  max-width: 1180px; margin: 0 auto 18px;
}
.today-head .th-date { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.today-head .th-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.today-head .th-clock {
  margin-left: auto; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .today-head { margin-bottom: 14px; }
  .today-head .th-date { font-size: 21px; }
  .today-head .th-clock { font-size: 18px; }
}

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
/* Na širokom monitore ostávala vpravo prázdna plocha a karty boli zbytočne roztiahnuté. */
@media (min-width: 1440px) {
  .today-grid { max-width: 1420px; }
}
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } }
.today-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tile {
  background: var(--panel);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  padding: 18px;
  box-shadow: none;
}
.tile[data-go] { cursor: pointer; }
.tile[data-go]:hover { background: var(--fill-2); }
.tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.tile-head span { display: inline-flex; align-items: center; gap: 5px; }
.tile-head .sfi { width: 14px; height: 14px; vertical-align: -.18em; color: var(--primary); }
.tile-head b { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tile-head b.tile-warn, .tile .tile-warn { color: var(--danger-text); }
.tile-head b.tile-ok, .tile .tile-ok { color: var(--success-text); }
/* Návrh obeda ešte nie je príjem — odlíš ho od potvrdeného „zjedené“. */
.tile-head b.tile-navrh, .tile .tile-navrh { color: var(--muted); font-style: italic; font-weight: 600; }
.tile-eat { width: 100%; justify-content: center; margin-top: 8px; }
.tile-line { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; overflow-wrap: anywhere; border-bottom: 1px solid var(--separator); }
.tile-line:last-of-type { border-bottom: none; }
.tile-line .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.tile-stats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.tile-stats span { font-size: 11px; color: var(--muted); margin-top: 2px; display: block; }
.tile-stats .warn b { color: var(--danger-text); }
/* First cell = hero number — bigger, colored */
.tile-stats > :first-child b { font-size: 32px; letter-spacing: -.04em; color: #fff; }
[data-tile-key="sleep"] .tile-stats > :first-child b { color: var(--m-sleep); }
[data-tile-key="strava"] .tile-stats > :first-child b { color: var(--m-strava); }
[data-tile-key="kondicia"] .tile-stats > :first-child b { color: var(--m-fitness); }
[data-tile-key="praca"] .tile-stats > :first-child b { color: var(--m-work); }

/* Hero number layout pre sleep/kondicia tiles */
.tile-hero-row { display: flex; align-items: center; gap: 16px; }
.tile-hero-num { text-align: center; flex: none; min-width: 72px; }
.tile-hero-num b { display: block; font-size: 48px; font-weight: 800; letter-spacing: -.05em; color: var(--tile-hero-color, var(--m-sleep)); line-height: 1; }
.tile-hero-num span { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; }
.tile-hero-num.warn b { color: var(--danger-text); }
.tile-hero-side { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tile-hero-side > div { display: flex; flex-direction: column; }
.tile-hero-side b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.tile-hero-side span { font-size: 11px; color: var(--muted); }

/* praca tile: čísla statusov */
.tile-stat-n { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.tile-stat-l { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tile-tasks .row { padding: 7px 5px; }
.tile-tasks .row-swipe { border-radius: 8px; }
[data-tile-key="tasks"] { border-left: 3px solid var(--primary); }
.tile-btn { margin-top: 8px; width: 100%; min-height: 38px; font-size: 13px; }
/* hero tile — tréning */
.tile-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--m-fitness) 16%, var(--panel)) 0%, var(--panel) 65%);
  border-left: 3px solid var(--m-fitness) !important;
  border-color: rgba(255,69,58,.22);
}
.tile-hero .tile-head .sfi { color: var(--m-fitness); }
.hero-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(255,69,58,.18); color: #ff8f86;
}
.hero-tag .sfi { width: 12px; height: 12px; color: #ff8f86; }
.hero-sub { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.hero-name { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #fff; margin: 4px 0 10px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hchip {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px;
  background: var(--hover); color: var(--text-2);
}
.hchip.on { background: rgba(255,69,58,.20); color: #ff8f86; }
.hero-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; margin-left: auto; min-height: 40px; padding: 10px 18px;
  border: none; border-radius: 8px; cursor: pointer;
  background: var(--m-fitness); color: #fff; font-size: 14px; font-weight: 700;
}
.hero-btn:hover { background: #ff6961; }

/* footer riadku úloh na Dnes */
.tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--separator);
  font-size: 12px; color: var(--muted);
}
.tile-foot .tile-more { color: var(--primary); font-weight: 600; }

/* Tile edit mode — drag & drop + skrývanie */
.tiles-edit .tile[data-tile-key] {
  cursor: grab;
  position: relative;
}
.tiles-edit .tile[data-tile-key]::before {
  content: '⠿';
  position: absolute;
  top: 10px;
  right: 38px;
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
}
.tile-hide-btn {
  display: none;
  position: absolute;
  top: 6px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  z-index: 2;
}
.tile-hide-btn:hover { background: var(--fill-2); color: var(--danger-text); }
.tiles-edit .tile[data-tile-key] .tile-hide-btn { display: flex; align-items: center; justify-content: center; }
.tile-dragging { opacity: .4; }
.tile-dragover { outline: 2px dashed var(--primary); outline-offset: -2px; }
.tile-hidden-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--fill-1);
  border-radius: 10px;
  margin-bottom: 10px;
}

/* tile-head icon color per module context */
[data-tile-key="fitness"] .tile-head .sfi,
[data-go="fitness"] .tile-head .sfi { color: var(--m-fitness); }

[data-tile-key="strava"] .tile-head .sfi,
[data-go="strava"] .tile-head .sfi { color: var(--m-strava); }

[data-tile-key="sleep"] .tile-head .sfi { color: var(--m-sleep); }
[data-go="data"] .tile-head .sfi { color: var(--m-sleep); }

[data-tile-key="school"] .tile-head .sfi,
[data-go="skola"] .tile-head .sfi { color: var(--m-school); }

[data-tile-key="padel"] .tile-head .sfi { color: var(--m-padel); }

[data-tile-key="inbox"] .tile-head .sfi,
[data-go="inbox"] .tile-head .sfi { color: var(--m-inbox); }

[data-tile-key="praca"] .tile-head .sfi,
[data-go="praca"] .tile-head .sfi { color: var(--m-work); }

[data-tile-key="crypto"] .tile-head .sfi { color: var(--m-crypto); }

/* tile left-border accent per module */
[data-tile-key="fitness"],
[data-go="fitness"]:not([data-tile-key]) { border-left: 3px solid var(--m-fitness); }
[data-tile-key="strava"],
[data-go="strava"]:not([data-tile-key]) { border-left: 3px solid var(--m-strava); }
[data-tile-key="sleep"],
.tile[data-go="data"] { border-left: 3px solid var(--m-sleep); }
[data-tile-key="school"],
[data-go="skola"] { border-left: 3px solid var(--m-school); }
[data-tile-key="padel"] { border-left: 3px solid var(--m-padel); }
[data-tile-key="inbox"],
[data-go="inbox"] { border-left: 3px solid var(--m-inbox); }
[data-tile-key="praca"],
[data-go="praca"] { border-left: 3px solid var(--m-work); }
[data-tile-key="crypto"] { border-left: 3px solid var(--m-crypto); }


.ai-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  padding: 1px 6px; border-radius: 100px; vertical-align: 1px;
  background: var(--fill-2); color: var(--faint);
  border: 1px solid var(--glass-brd);
}

/* TERAZ tag (živá hodina) */
.now-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 1px 7px; border-radius: 100px;
  background: rgba(48,209,88,.18); color: var(--success);
}

/* Strava — veľké kcal + macro bary */
.macros { display: flex; flex-direction: column; gap: 9px; }
/* mockup varianta — 4 stĺpce: kcal + B/S/T s mini barmi */
.macros.macros-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.macros-grid .mg { min-width: 0; }
.macros-grid .mg b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.macros-grid .mg span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.macros-grid .mg .mgbar { height: 5px; border-radius: 3px; background: var(--fill-2); margin-top: 7px; overflow: hidden; }
.macros-grid .mg .mgbar i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--primary)); }
.macros-grid .mg.m-kcal { --c: var(--warn); }
.macros-grid .mg.m-protein { --c: #0a84ff; }
.macros-grid .mg.m-carbs { --c: var(--success); }
.macros-grid .mg.m-fat { --c: #ff375f; }
.kcal-rest-line { margin-top: 12px; font-size: 12px; color: var(--muted); }
.kcal-rest-line b { color: var(--text); font-weight: 700; }
@media (max-width: 420px) { .macros.macros-grid { grid-template-columns: repeat(2, 1fr); } }
/* Prvý stĺpec bol pevných 66 px, ale „Bielkoviny" potrebuje 93 — text pretekal cez bar.
   auto si vezme, koľko treba, a bar dostane zvyšok. */
.macro { display: grid; grid-template-columns: auto 1fr 62px; align-items: center; gap: 10px; font-size: 12px; }

/* metriky 2×2 */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc {
  position: relative; background: var(--panel); border: 1px solid var(--glass-brd);
  border-radius: 14px; padding: 13px 14px 13px 18px; overflow: hidden;
}
.mc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--primary)); }
.mc .mc-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); }
.mc .mc-val { font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: #fff; margin: 2px 0 1px; }
.mc .mc-val small { font-size: 12px; font-weight: 600; color: var(--faint); }
.mc .mc-sub { font-size: 11px; color: var(--faint); }
.mc.mc-orange { --c: var(--warn); } .mc.mc-red { --c: var(--danger); }
.mc.mc-green { --c: var(--success); } .mc.mc-purple { --c: var(--primary); }

/* škola — živá hodina */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none;
  box-shadow: 0 0 0 3px rgba(48,209,88,.2); animation: livePulse 2s ease infinite;
}
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(48,209,88,.08); } }
.lesson-now { font-weight: 700; color: #fff; }

/* jedáleň */
.meal { display: flex; align-items: center; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--separator); }
.meal:last-of-type { border-bottom: none; }
.meal-ic {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 17px; border-radius: 9px; background: var(--hover);
}
.meal-main { flex: 1; min-width: 0; }
.meal-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-macros { font-size: 11.5px; color: var(--faint); margin-top: 1px; }

/* agent moduly */
.agent-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; }
.agent-row .dot.ok { background: var(--success); }
.agent-row .dot.warn { background: var(--warning, #ff9f0a); }   /* dobehlo, ale naprázdno (bez LLM) */
.agent-row .dot.bad { background: var(--danger); }
.agent-row .agent-when { margin-left: auto; font-size: 11.5px; color: var(--faint); white-space: nowrap; }

/* ===== 10b. Inbox ===== */
#inbox-view { display: flex; flex-direction: column; gap: 16px; }
.ibx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; max-width: 860px; margin: 0 auto; }
.segmented { display: flex; background: var(--fill); border-radius: var(--r-control); padding: 2px; gap: 2px; flex: none; }
.seg-btn {
  border: none; background: none; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 590;
}
.seg-btn b { font-weight: 700; opacity: .65; }
.seg-btn.active { background: var(--bg-2); color: var(--text); box-shadow: var(--shadow-1); font-weight: 600; }
.ibx-add { display: flex; gap: 8px; flex: 1; min-width: 200px; }
.ibx-add input {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: var(--r-control);
  border: 1px solid transparent; background: var(--fill); color: var(--text); font: inherit; font-size: 14px;
}
.ibx-add input:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3.5px var(--primary-soft); }

.ibx-list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 860px; margin: 0 auto; }
.ibx-empty { text-align: center; padding: 40px 20px; }
.ibx {
  display: flex; gap: 13px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-panel); padding: 14px 16px; box-shadow: var(--shadow-1);
}
.ibx-processed { opacity: .6; }
.ibx-thumb { width: 108px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; background: var(--fill); }
.ibx-main { flex: 1; min-width: 0; }
.ibx-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.ibx-src {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 100px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.ibx-verdict { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px; border: 1px solid var(--border); }
.ibx-verdict.v-watch { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.ibx-verdict.v-skip { color: var(--muted); }
.ibx-cat { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--fill); padding: 2px 9px; border-radius: 100px; }
.ibx-meta { font-size: 12px; color: var(--muted); }
/* čas prijatia — vpravo v hlavičke, aby bolo vidieť KEDY to prišlo, nie len dátum */
.ibx-when { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ibx-title {
  display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
a.ibx-title:hover { color: var(--primary); text-decoration: underline; }
.ibx-sum { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
/* Zabalený brief: ~7 riadkov a fade dole, nech karta nezaberie celú obrazovku.
   Zámerne max-height v px, nie dvh — dvh v Safari web appke kolabuje na 0. */
.ibx-sum-fold { max-height: 140px; overflow: hidden; position: relative; }
.ibx-sum-fold::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(to bottom, transparent, var(--panel));
  pointer-events: none;
}
.ibx-more {
  margin: 4px 0 0; padding: 3px 0; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.ibx-more:hover { text-decoration: underline; }
.ibx-sum .md p { margin: 2px 0; }
.ibx-sum .md h3, .ibx-sum .md h4 { font-size: 13px; font-weight: 600; margin: 6px 0 2px; color: var(--foreground); }
.ibx-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.ibx-acts button {
  border: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 12.5px;
  font-weight: 590; padding: 5px 11px; border-radius: 100px; cursor: pointer;
}
.ibx-acts button:hover { background: var(--fill); }
.ibx-rate { display: inline-flex; gap: 4px; margin-left: auto; }
.ibx-rate button { padding: 4px 8px; border-color: transparent; filter: grayscale(1); opacity: .55; }
.ibx-rate button.on { filter: none; opacity: 1; border-color: var(--border); }
.ibx-acts button.ibx-del { color: var(--muted); border-color: transparent; }
.ibx-acts button.ibx-del:hover { color: var(--danger-text); }
.ibx-proj { padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: 13px; max-width: 220px; }
.ibx-acts button.ibx-confirm { background: var(--primary); color: #fff; border-color: transparent; }
.ibx-acts button.ibx-confirm:hover { background: var(--primary); }

/* ===== 11. Dashboard / calendar / timeline / sheet ===== */
.dashboard { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dash-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 16px 18px; box-shadow: var(--shadow-1); }
.dash-card b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.dash-card span { font-size: 12px; color: var(--muted); }
.dash-card.warn b { color: var(--danger-text); }
.dash-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 18px; box-shadow: var(--shadow-1); }
.dash-panel h4 { font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.dash-panel h4 .sfi { width: 15px; height: 15px; color: var(--muted); }
.dash-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bar-wrap .bar { width: 100%; max-width: 46px; background: var(--primary); border-radius: 6px 6px 0 0; min-height: 2px; }
.bar-val { font-size: 12px; font-weight: 700; }
.bar-wrap label { font-size: 10.5px; color: var(--muted); }
.proj-progress { margin-bottom: 12px; }
.proj-progress:last-child { margin-bottom: 0; }
.proj-progress[data-proj-id] { cursor: pointer; }
.proj-progress[data-proj-id]:hover .name { color: var(--primary); }
.proj-progress-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.proj-progress-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.proj-progress-head .pct { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12px; }
.progress-track { height: 7px; background: var(--fill); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; }
.prio-split { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.prio-box { border-radius: 10px; padding: 12px; text-align: center; background: var(--fill); }
.prio-box b { display: block; font-size: 22px; font-weight: 700; }
.prio-box span { font-size: 11px; color: var(--muted); }
.prio-box.p1 b { color: var(--danger-text); } .prio-box.p3 b { color: var(--muted); }

.feed-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.feed-item.comment { background: var(--fill); border-radius: 10px; padding: 8px 10px; }
.feed-author { font-weight: 600; }
.feed-body { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.feed-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.feed-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; }
.feed-del:hover { color: var(--danger); }
.feed-item.activity { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 2px 4px; }

.calendar { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.cal-head h3 { font-size: 17px; min-width: 160px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow div { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cal-body { flex: 1; grid-auto-rows: minmax(96px, 1fr); }
.cal-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:hover { border-color: var(--primary); }
.cal-cell.off { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.off:hover { border-color: transparent; }
.cal-cell.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-day { font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-cell.today .cal-day { color: var(--primary); }
.cal-task {
  --c: var(--primary); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text);
  border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-task:hover { background: color-mix(in srgb, var(--c) 32%, transparent); }
.cal-task.done { text-decoration: line-through; opacity: .55; }
.cal-task.overdue { color: var(--danger-text); }

.timeline { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 0; }
.tl-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-1); }
.tl-grid { display: grid; grid-template-columns: 210px calc(var(--dayw) * var(--days)); align-items: stretch; min-width: max-content; }
.tl-corner { position: sticky; left: 0; background: var(--panel); z-index: 2; border-bottom: 1px solid var(--separator); }
.tl-head { display: flex; border-bottom: 1px solid var(--separator); }
.tl-day { width: var(--dayw); flex: none; text-align: center; font-size: 10.5px; color: var(--muted); padding: 6px 0; position: relative; }
.tl-day b { display: block; font-size: 9px; text-transform: uppercase; color: var(--primary); }
.tl-day.wknd { background: var(--fill); }
.tl-day.today { background: var(--primary-soft); color: var(--primary); font-weight: 700; border-radius: 6px 6px 0 0; }
.tl-project { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); position: sticky; left: 0; width: max-content; max-width: 320px; }
.tl-project .dot { width: 9px; height: 9px; border-radius: 50%; }
.tl-label { position: sticky; left: 0; background: var(--panel); z-index: 1; padding: 5px 14px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--separator); display: flex; align-items: center; }
.tl-track { position: relative; border-top: 1px solid var(--separator); min-height: 30px; }
.tl-bar { --c: var(--primary); position: absolute; top: 5px; bottom: 5px; background: color-mix(in srgb, var(--c) 30%, transparent); border: 1.5px solid var(--c); border-radius: 7px; cursor: pointer; }
.tl-bar:hover { background: color-mix(in srgb, var(--c) 50%, transparent); }
.tl-bar.late { border-color: var(--danger); }

.sheet-view { flex: 1; overflow: hidden; padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.sheet-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet-toolbar .btn { font-size: 13px; padding: 7px 12px; text-decoration: none; }
.sheet-updated { font-size: 12px; color: var(--muted); }
.sheet-table-wrap { flex: 1; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-1); }
.sheet-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sheet-table th { position: sticky; top: 0; background: var(--fill); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 10px 12px; white-space: nowrap; z-index: 1; }
.sheet-table td { padding: 8px 12px; border-top: 1px solid var(--separator); vertical-align: top; min-width: 90px; max-width: 340px; overflow-wrap: break-word; }
.sheet-table tbody tr:hover { background: var(--hover); }

/* ===== 12. Modals / forms ===== */
dialog {
  margin: auto; border: none; border-radius: var(--r-sheet); padding: 26px;
  width: min(540px, 92vw); max-height: 90vh; overflow-y: auto;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow-pop);
}
dialog::backdrop { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.wide { width: min(780px, 95vw); }
#task-modal { width: min(620px, 94vw); }
dialog h3 { margin-bottom: 18px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 7px; }
dialog h3 .sfi { width: 1.05em; height: 1.05em; color: var(--primary); }
dialog form { display: flex; flex-direction: column; gap: 14px; }
dialog label, .field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--muted); flex: 1; }
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
dialog input, dialog textarea, dialog select {
  padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-control);
  font-size: 14px; color: var(--text); background: var(--fill);
}
dialog input:focus, dialog textarea:focus, dialog select:focus {
  outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.form-row { display: flex; gap: 14px; }
.modal-actions { display: flex; gap: 10px; margin-top: 6px; align-items: center; }
.modal-actions .btn .sfi, .settings-list .btn .sfi { color: currentColor; }

.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.color-swatch.selected { border-color: var(--text); }

.desc-tabs, .notes-tabs { display: flex; background: var(--fill); border-radius: 8px; padding: 2px; align-self: flex-start; }
.desc-tabs button, .notes-tabs button { border: none; background: none; padding: 4px 12px; font-size: 12px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.desc-tabs button.active, .notes-tabs button.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-1); }

/* details sections */
.det { border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.det > summary {
  list-style: none; cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); display: flex; align-items: center; gap: 8px; user-select: none;
}
.det > summary::-webkit-details-marker { display: none; }
.det > summary::after { content: '›'; margin-left: auto; font-size: 15px; transition: transform .15s; opacity: .6; }
.det[open] > summary::after { transform: rotate(90deg); }
.det > summary:hover { color: var(--text); background: var(--hover); }
.det > summary .sfi { width: 1.05em; height: 1.05em; color: var(--muted); }
.det-count { color: var(--primary); font-weight: 700; font-size: 12px; }
.det-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }

/* subtasks */
.subtask-progress { font-weight: 500; margin-left: 6px; }
.subtask-list { display: flex; flex-direction: column; gap: 4px; }
.subtask { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--fill); }
.subtask input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.subtask span { flex: 1; font-size: 13px; color: var(--text); }
.subtask.done span { text-decoration: line-through; color: var(--muted); }
.subtask-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 3px; }
.subtask-del:hover { color: var(--danger); }

/* tags modal */
.tags-existing { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.tag-row { display: flex; align-items: center; gap: 10px; }
.tag-usage { font-size: 11px; color: var(--muted); margin-left: auto; }
.tag-edit, .tag-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.tag-del:hover { color: var(--danger); }

/* mentions */
.comment-box { position: relative; }
.mention { color: var(--primary); font-weight: 600; background: var(--primary-soft); padding: 0 3px; border-radius: 4px; }
.mention-pop { position: absolute; bottom: calc(100% + 4px); left: 0; width: min(280px, 90%); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); overflow: hidden; z-index: 5; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.mention-item i { color: var(--muted); font-style: normal; font-size: 12px; }
.mention-item.sel, .mention-item:hover { background: var(--primary-soft); }

/* attachments */
.attach-list { display: flex; flex-direction: column; gap: 4px; }
.attach-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--fill); }
.attach-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-name:hover { color: var(--primary); text-decoration: underline; }
.attach-size { font-size: 11px; color: var(--muted); white-space: nowrap; }
.attach-add { align-self: flex-start; font-size: 13px; padding: 7px 12px; cursor: pointer; }
.attach-del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 3px; }
.attach-del:hover { color: var(--danger); }
.attach-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; background: var(--fill); }

/* deps + templates + time + someday */
.dep-chip { gap: 6px; }
.dep-chip.dep-done { opacity: .7; }
.dep-del { border: none; background: none; color: inherit; cursor: pointer; font-size: 13px; padding: 0; line-height: 1; opacity: .8; }
.dep-del:hover { opacity: 1; }
#deps-select { max-width: 100%; }
.template-row { display: flex; gap: 8px; align-items: center; }
.template-row select { flex: 1; min-width: 0; }
.template-row .icon-btn { color: var(--danger); font-size: 16px; }
.time-controls { display: flex; gap: 8px; }
.time-when { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 6px; }
.time-del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 3px; }
.time-del:hover { color: var(--danger); }
#btn-timer-toggle { align-self: flex-start; font-size: 13px; padding: 7px 12px; border: 1px dashed var(--border); }
#btn-timer-toggle.timer-running { background: var(--danger-soft); color: var(--danger-text); border-style: solid; border-color: var(--danger); }
.someday-box { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 9px 0; }
.someday-box input { width: 16px; height: 16px; accent-color: var(--primary); }
.someday-label { font-weight: 500; }
.share-actions { display: flex; gap: 8px; margin-top: 8px; }
.share-actions .btn { font-size: 13px; padding: 7px 12px; }

/* notes preview */
#notes-textarea { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; line-height: 1.6; width: 100%; }
.notes-preview { min-height: 200px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.65; }
.notes-preview h2, .notes-preview h3, .notes-preview h4 { margin: 12px 0 6px; }
.notes-preview h2:first-child, .notes-preview p:first-child { margin-top: 0; }
.notes-preview p { margin: 8px 0; }
.notes-preview ul { margin: 8px 0 8px 22px; }
.notes-preview code { background: var(--fill); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.notes-preview a { color: var(--primary); }

/* import */
.import-inner { display: flex; flex-direction: column; gap: 4px; }
.import-inner h3 { margin-bottom: 14px; }
#import-step1, #import-step2 { display: flex; flex-direction: column; gap: 14px; }
#import-step1 label, #import-step2 label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
#import-text { font-family: ui-monospace, monospace; font-size: 12px; }
.import-or { text-align: center; font-size: 12px; color: var(--muted); }
.import-error { color: var(--danger-text); font-size: 13px; min-height: 16px; }
.import-preview-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
#import-preview { border-collapse: collapse; width: 100%; font-size: 12.5px; }
#import-preview th { padding: 8px; background: var(--fill); text-align: left; vertical-align: bottom; min-width: 120px; }
#import-preview th select { width: 100%; padding: 6px 8px; font-size: 12px; margin-bottom: 6px; }
.import-header { font-weight: 700; font-size: 12px; }
#import-preview td { padding: 6px 8px; border-top: 1px solid var(--separator); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.import-more { color: var(--muted); font-style: italic; }
.import-map { display: flex; flex-direction: column; gap: 4px; }

/* ical */
.ical-info { font-size: 13px; color: var(--muted); }
.ical-url-row { display: flex; gap: 8px; }
.ical-url-row input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; }
.ical-steps { font-size: 13px; line-height: 1.7; background: var(--fill); border-radius: 10px; padding: 12px 14px; color: var(--text); }
.ical-steps i { color: var(--primary); font-style: normal; font-weight: 600; }

/* trash */
.trash-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.trash-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--fill); border-radius: 10px; }
.trash-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.trash-main { flex: 1; min-width: 0; }
.trash-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-meta { font-size: 11px; color: var(--muted); }
.trash-row .btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.trash-restore { color: var(--primary); }
.trash-purge { color: var(--danger-text); }

/* users */
.user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; flex: none; letter-spacing: .3px; }
.user-avatar.mini { width: 18px; height: 18px; font-size: 8.5px; }
.user-avatar.big { width: 42px; height: 42px; font-size: 16px; }
.user-inactive { opacity: .5; }
.users-head { margin-bottom: 12px; }
.users-summary { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.users-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; margin-bottom: 16px; }
.user-member { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.user-member:hover { background: var(--hover); }
.member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.member-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.member-meta { font-size: 11px; color: var(--muted); }
.member-tasks { font-size: 12px; color: var(--muted); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.member-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.user-member:hover .member-actions, .user-member:focus-within .member-actions { opacity: 1; }
.user-edit, .user-toggle { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 3px 5px; border-radius: 6px; }
.user-edit:hover, .user-toggle:hover { background: var(--hover); color: var(--text); }
.user-form-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.field-col { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.you-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }
.role-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.role-badge.admin { background: var(--primary-soft); color: var(--primary); }
#profile-form .field input[type="password"] { margin-top: 8px; width: 100%; }

/* passkeys */
.passkey-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.passkey-row .btn { padding: 4px 10px; }
.btn-passkey-del { color: var(--danger-text); }
#btn-login-passkey { margin-top: 4px; }

/* ===== 13. Command palette ===== */
.palette-dialog { margin-top: 10vh; padding: 0; width: min(580px, 92vw); overflow: hidden; }
#palette-input { width: 100%; border: none; border-bottom: 1px solid var(--separator); border-radius: 0; padding: 16px 18px; font-size: 16px; background: var(--panel); color: var(--text); }
#palette-input:focus { outline: none; box-shadow: none; background: var(--panel); }
.palette-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 12px 3px; }
.palette-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.palette-item.sel { background: var(--primary-soft); }
.palette-icon { width: 22px; text-align: center; flex: none; display: inline-flex; justify-content: center; color: var(--muted); }
.palette-icon .sfi { width: 18px; height: 18px; }
.palette-icon .dot { width: 10px; height: 10px; border-radius: 50%; }
.palette-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ===== 14. Scratch / toast / bulk / ptr / offline ===== */
.scratch-panel { position: fixed; top: calc(62px + env(safe-area-inset-top)); right: 12px; z-index: 70; width: min(360px, 92vw); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); overflow: hidden; }
.scratch-form { padding: 8px 10px; border-bottom: 1px solid var(--separator); }
.scratch-form input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 14px; }
.scratch-list { max-height: 55vh; overflow-y: auto; }
.scratch-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--separator); }
.scratch-item:last-child { border-bottom: none; }
.scratch-check { width: 16px; height: 16px; accent-color: var(--primary); flex: none; cursor: pointer; }
.scratch-body { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: break-word; }
.scratch-item.done .scratch-body { text-decoration: line-through; color: var(--muted); }
.scratch-item .icon-btn { opacity: 0; font-size: 12px; flex: none; }
.scratch-item:hover .icon-btn { opacity: .75; }
@media (hover: none) { .scratch-item .icon-btn { opacity: .55; } }
.scratch-promote { color: var(--primary); font-weight: 700; }
.scratch-del:hover { color: var(--danger); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #2c2c2e; color: #f2f2f7; padding: 12px 18px; border-radius: var(--r-card); border: 1px solid var(--glass-brd); display: flex; align-items: center; gap: 14px; font-size: 14px; box-shadow: var(--shadow-pop); z-index: 300; animation: toast-in .2s ease; }
:root[data-theme="dark"] .toast { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.toast-action { border: none; background: none; color: #b3b1f2; font-weight: 700; font-size: 14px; cursor: pointer; padding: 2px 4px; }
.toast-action:hover { text-decoration: underline; }

.bulk-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 18px; max-width: calc(100vw - 12px); background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-pop); }
.bulk-count { font-size: 13px; font-weight: 600; padding: 0 6px; white-space: nowrap; }
.bulk-bar button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.bulk-bar button:hover { background: var(--hover); }
.bulk-bar .bulk-danger:hover { background: var(--danger-soft); }
.bulk-bar .bulk-clear { opacity: .7; }
.bulk-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 200px; max-height: 45vh; overflow-y: auto; padding: 6px; border-radius: var(--r-card); background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; }
.bulk-menu .bm-item { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; }
.bulk-menu .bm-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bulk-menu .bm-date { margin: 4px 6px 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: inherit; }

.ptr { position: absolute; left: 50%; top: 58px; z-index: 60; width: 38px; height: 38px; margin-left: -19px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--glass-strong); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-2); color: var(--text); font-size: 18px; transform: translateY(-110px); transition: transform .15s ease; pointer-events: none; }
.ptr.armed { color: var(--primary); }
.ptr.armed .ptr-ic { transform: rotate(180deg); }
.ptr-ic { display: inline-block; transition: transform .15s ease; }
.ptr.spin .ptr-ic { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

.offline-note { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel); color: var(--text); padding: 22px 28px; border-radius: var(--r-panel); box-shadow: var(--shadow-pop); font-size: 15px; z-index: 100; display: flex; align-items: center; gap: 10px; }
.logbook-more { display: block; margin: 14px auto 24px; }

/* ===== 15. Login + welcome ===== */
.login-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
.login-box { background: var(--panel); padding: 32px 28px; border-radius: var(--r-sheet); width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.login-box h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; text-align: center; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-box h1 .sfi { width: 1.05em; height: 1.05em; }
.login-box input { padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-control); font-size: 16px; background: var(--input-bg); color: var(--text); min-height: 48px; }
.login-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-soft); }
.login-box .btn-primary { min-height: 48px; font-size: 16px; font-weight: 600; }
.login-error { color: var(--danger-text); font-size: 13px; text-align: center; min-height: 16px; }

.welcome { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.welcome-card { max-width: 480px; text-align: center; padding: 36px 28px; border-radius: var(--r-sheet); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.welcome-card h2 { margin: 0 0 8px; font-size: 24px; }
.welcome-card p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.welcome-cta { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.welcome-tips { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.welcome-tip { font-size: 13.5px; color: var(--muted); padding: 10px 12px; border-radius: 12px; background: var(--fill); border: 1px solid var(--border); }
.welcome-tip b { color: var(--text); }
.welcome-tip kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--fill); font-size: 12px; }

/* ===== 16. Motion (subtle, native) ===== */
.btn, .pill-opt, .chip, .card, .nav-item, .view-switch button, .icon-btn, .color-swatch, .row, .palette-item, .notif-item, .tile[data-go], .dq {
  transition: transform .12s cubic-bezier(.2,.8,.3,1), background .15s, box-shadow .15s, border-color .15s;
}
.btn:active, .pill-opt:active, .chip:active, .view-switch button:active, .icon-btn:active, .nav-item:active, .row:active, .dq:active { transform: scale(.97); }
.card:active, .tile[data-go]:active { transform: scale(.985); }

/* ===== 17. Responsive: drawer, tabbar, FAB, mobile topbar ===== */
.btn-menu { display: none; }
.mobile-only { display: none; }
.tabbar { display: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 49; }
.sidebar-backdrop.show { -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px); animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } }


@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 85vw); min-width: 0;
    z-index: 50; transform: translateX(-105%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.5); overflow-y: auto;
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .sidebar.open { transform: none; }
  .sidebar-backdrop.show { display: block; }

  /* height je na desktope pevných 52 px; tu potrebujeme druhý riadok pre dátum,
     inak by vytiekol mimo lišty (namerané: dátum na 54 px, lišta vysoká 52 px). */
  .topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); gap: 8px 6px; }
  .topbar-actions { display: contents; }
  .btn-menu { display: inline-flex; align-items: center; justify-content: center; order: 0; width: 44px; height: 44px; font-size: 20px; padding: 0; flex: none; }
  #view-title { order: 1; flex: 1; font-size: 22px; min-width: 0; }
  /* Bez vlastného order dostal dátum implicitne 0 a flexbox ho vtlačil PRED nadpis —
     medzi tlačidlo menu a „Fitness". Patrí pod nadpis, zarovnaný s ním vľavo. */
  .topbar-date { order: 3; flex-basis: 100%; margin: -4px 0 0 50px; font-size: 12.5px; }
  .notif-wrap { order: 2; }
  #btn-notif, #btn-search-toggle, #btn-filter-toggle, #btn-notes, #btn-edit-project, #btn-save-view {
    order: 2; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  }
  #btn-filter-toggle { position: relative; }
  #btn-filter-toggle.on::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); transform: translate(12px, -12px); }

  .view-switch { order: 4; flex-basis: 100%; width: 100%; padding: 3px; gap: 3px; }
  .view-switch button { flex: 1; min-height: 42px; justify-content: center; font-size: 17px; }
  .view-switch button .vs-label { display: none; }

  #search { order: 5; display: none; flex: 1 1 100%; min-width: 0; height: 44px; font-size: 16px; }
  body.search-open #search { display: block; }
  #filter-priority, #filter-assignee, #btn-save-view { display: none; }
  body.filters-open #filter-priority { display: block; order: 6; flex: 1 1 45%; height: 44px; font-size: 14px; }
  body.filters-open #filter-assignee:not(.hidden) { display: block; order: 6; flex: 1 1 45%; height: 44px; font-size: 14px; }
  body.filters-open #btn-save-view:not(.hidden) { display: inline-flex; order: 6; }
  .timer-chip { order: 7; flex-basis: 100%; height: 40px; justify-content: center; }

  /* tab bar */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    align-items: center; justify-content: space-around;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-brd);
  }
  .tabbar button { flex: 1; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--muted); position: relative; border-radius: 12px; transition: color var(--motion-fast); }
  .tabbar .tb-ic { display: inline-flex; }
  .tabbar .tb-ic .sfi { width: 24px; height: 24px; }
  .tabbar button.active { color: var(--primary); }
  .tabbar .tb-add { flex: 0 0 54px; width: 54px; height: 54px; min-height: 54px; margin-top: -20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 30px; font-weight: 400; box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 55%, transparent); }
  .tabbar .tb-add:active { transform: scale(.94); }
  .tb-badge { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; line-height: 15px; font-weight: 700; }

  #btn-new-task, #btn-scratch { display: none !important; }

  .board, .list-view, .dashboard, .calendar, .timeline, .sheet-view, #today-view {
    padding: 14px; padding-bottom: var(--nad-tabbarom);
  }
  .board { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px; padding: 12px 10px var(--nad-tabbarom); }
  .column { flex: 0 0 86vw; min-width: 86vw; max-width: 86vw; scroll-snap-align: center; max-height: 100%; }
  .column-body { flex: 1; min-height: 0; overflow-y: auto; }
  .col-add { flex: 0 0 auto; align-self: center; min-width: 44vw; scroll-snap-align: center; }
  .bulk-bar { bottom: calc(var(--tabbar-h) + 10px); }

  .calendar { overflow-x: hidden; }
  .cal-grid { min-width: 0; }
  .cal-body { grid-auto-rows: minmax(64px, 1fr); }
  .cal-cell { border-radius: 8px; }
  .cal-head h3 { min-width: 0; font-size: 15px; }

  .form-row { flex-direction: column; gap: 14px; }
  dialog { padding: 18px; width: min(540px, 94vw); }
  dialog .btn { min-height: 44px; }
  dialog input, dialog textarea, dialog select { min-height: 44px; font-size: 16px; }
  .pill-opt { padding: 11px 14px; font-size: 15px; }
  .pill-select.seg .pill-opt { padding: 11px 4px; }
  .dq { padding: 10px 14px; font-size: 14px; min-height: 42px; }
  .row { padding: 14px 16px; }
  .row-check { width: 22px; height: 22px; }
  .chip { padding: 6px 12px; font-size: 13px; }
  #quick-add { font-size: 16px; min-height: 46px; }
  .quick-add { padding: 10px 14px 0; }
  .subtask input[type="checkbox"] { width: 20px; height: 20px; }

  /* drawer touch targets */
  .nav-item { padding: 12px 10px; min-height: 46px; }
  .sidebar-footer .btn { padding: 12px 12px; font-size: 14px; }
  #btn-theme, #btn-settings, #btn-logout, .sidebar .icon-btn { min-width: 44px; min-height: 44px; }
  .proj-caret { min-width: 34px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #archived-toggle { min-height: 44px; }
  .ws-switch select { font-size: 16px; }

  /* task modal as full-screen sheet */
  /* --app-h = innerHeight z app.js; dvh/vh na iOS Safari zahŕňa systémové lišty a v web appke z Docku dvh dal 0 px */
  #task-modal { width: 100vw; max-width: 100vw; height: var(--app-h, 100%); max-height: var(--app-h, 100%); margin: 0; border-radius: 0; padding: 14px 16px 0; }
  #task-modal form { padding-bottom: var(--nad-tabbarom); }
  #task-modal .modal-actions { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--glass-brd); z-index: 5; }
  #task-modal .modal-actions .btn { min-height: 48px; }
  #task-modal .modal-actions .btn-primary { flex: 1; }

  /* Mind dump ako horný sheet — vysýpa sa doň rýchlo, tak nech je pole hneď pod
     palcom pri hornej hrane a nie schované dole. Ako spodný sheet siahal až na 796 px,
     takže posledné poznámky (a spodok zoznamu) ležali pod tabbarom na 737 px. */
  .scratch-panel {
    left: 0; right: 0; top: 0; bottom: auto; width: auto;
    max-height: 72%;
    border-radius: 0 0 var(--r-sheet) var(--r-sheet);
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0;
    box-shadow: 0 14px 50px rgba(0,0,0,.4);
    display: flex; flex-direction: column;
  }
  /* zoznam dostane zvyšok výšky sheetu; pevné vh tu prerastalo cez okraj */
  .scratch-list { max-height: none; flex: 1; min-height: 0; }
  .scratch-form input { min-height: 44px; font-size: 16px; }
  .ibx { flex-direction: column; gap: 10px; }
  .ibx-thumb { width: 100%; height: 150px; }
  .ibx-add input { min-height: 44px; font-size: 16px; }
  .ibx-acts button { min-height: 34px; }
  .ibx-rate { margin-left: 0; }
}
@media (max-width: 640px) {
  .bulk-bar { gap: 0; padding: 6px 8px; bottom: calc(var(--tabbar-h) + 10px); }
  .bulk-bar .bl { display: none; }
  .bulk-count { font-size: 12px; }
}
body.bulk-active #btn-new-task { display: none; }

/* board drag lock (touch) */
.board.drag-lock { overflow: hidden !important; }
.board.drag-lock .column-body { overflow: hidden !important; }

/* ===== 18. Accessibility ===== */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* fallback when backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar, .notif-panel, .palette-dialog, .mention-pop, .bulk-bar, .bulk-menu, .toast, .tabbar, .scratch-panel { background: var(--panel); }
  .sidebar { background: var(--panel); }
}

/* ===== icon definitions (SF-style, monochrome mask) ===== */
.sfi-alarm { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713.2%27%20r%3D%276.8%27%2F%3E%3Cpath%20d%3D%27M12%2010v3.2l2.3%201.4M5.4%205.6%208%203.4M18.6%205.6%2016%203.4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-archive { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%274%27%20rx%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M5.5%209v9a1.5%201.5%200%200%200%201.5%201.5h10a1.5%201.5%200%200%200%201.5-1.5V9M10%2013h4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-bell { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%209.5a6%206%200%200%200-12%200c0%206-2.4%207-2.4%207h16.8S18%2015.5%2018%209.5z%27%2F%3E%3Cpath%20d%3D%27M10.2%2020a2%202%200%200%200%203.6%200%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-book { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%205.2A2.2%202.2%200%200%201%207.2%203H18v15.5H7.2A2.2%202.2%200%200%200%205%2020.7z%27%2F%3E%3Cpath%20d%3D%27M5%2018.5A2.2%202.2%200%200%201%207.2%2016.3H18%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-brain { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%204.6A2.7%202.7%200%200%200%206.6%207.3%202.7%202.7%200%200%200%205%2012a2.7%202.7%200%200%200%203%204.6%202.7%202.7%200%200%200%205.2.4%27%2F%3E%3Cpath%20d%3D%27M14.7%204.6A2.7%202.7%200%200%201%2017.4%207.3%202.7%202.7%200%200%201%2019%2012a2.7%202.7%200%200%201-3%204.6%202.7%202.7%200%200%201-5.2.4%27%2F%3E%3Cpath%20d%3D%27M12%205v13%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-calendar { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2715.5%27%20rx%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M4%209.5h16M8.5%203v4M15.5%203v4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-chart { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2020h15%27%2F%3E%3Crect%20x%3D%275.5%27%20y%3D%2711%27%20width%3D%273.2%27%20height%3D%276.5%27%20rx%3D%27.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2710.4%27%20y%3D%276%27%20width%3D%273.2%27%20height%3D%2711.5%27%20rx%3D%27.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2715.3%27%20y%3D%2713.5%27%20width%3D%273.2%27%20height%3D%274%27%20rx%3D%27.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-chat { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2015a2%202%200%200%201-2%202H9l-4%203.5V6a2%202%200%200%201%202-2h11a2%202%200%200%201%202%202z%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-checkcircle { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M8.4%2012.3l2.4%202.4%204.7-5.1%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-clipboard { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%2712%27%20height%3D%2717%27%20rx%3D%272.2%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%272.6%27%20width%3D%276%27%20height%3D%273.4%27%20rx%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M9.5%2011h5M9.5%2015h5%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.4%27%2F%3E%3Cpath%20d%3D%27M12%207.2v5l3.4%202.4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-cloud { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.2%2018.2a4%204%200%200%201-.5-8A5.4%205.4%200%200%201%2017%209.7a3.7%203.7%200%200%201-.4%208.5z%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-doc { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203.5h7l4%204v12.5a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1v-15.5a1%201%200%200%201%201-1z%27%2F%3E%3Cpath%20d%3D%27M14%203.5v4h4%27%2F%3E%3Cpath%20d%3D%27M9.5%2012.5h5M9.5%2016h5%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-download { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.6%27%2F%3E%3Cpath%20d%3D%27M12%207.6v8.4M8.4%2012.4%2012%2016l3.6-3.6%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-dumbbell { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%209.2v5.6M6.6%207v10M17.4%207v10M20%209.2v5.6M6.6%2012h10.8%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-eye { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012S6%205.8%2012%205.8%2021.5%2012%2021.5%2012%2018%2018.2%2012%2018.2%202.5%2012%202.5%2012z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-flag { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2021V4M6%205h11l-2%203.5L17%2012H6%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-flame { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2s5%203.8%205%208.8a5%205%200%200%201-10%200c0-1.8.9-3%201.5-3.6C9%2010%209.2%2012%2010%2012.6%2010%209.2%2012%206.2%2012%203.2z%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-folder { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%207.5a2%202%200%200%201%202-2h3.3l2%202.2h7.7a2%202%200%200%201%202%202v7.3a2%202%200%200%201-2%202h-13a2%202%200%200%201-2-2z%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-fork { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203v5.5a2%202%200%200%200%204%200V3%27%2F%3E%3Cpath%20d%3D%27M9%208.5V21%27%2F%3E%3Cpath%20d%3D%27M16.5%203c-1.4%200-2.3%202-2.3%204.6s.9%203.9%202.3%203.9V21%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-gear { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.1%27%2F%3E%3Cpath%20d%3D%27M12%202.6v2.6M12%2018.8v2.6M4%2012H1.4M22.6%2012H20M5.4%205.4%207.2%207.2M16.8%2016.8l1.8%201.8M18.6%205.4%2016.8%207.2M7.2%2016.8l-1.8%201.8%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-grad { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204%202.5%208.6%2012%2013.2l9.5-4.6L12%204z%27%2F%3E%3Cpath%20d%3D%27M6.5%2011v4.4c0%201.5%202.5%202.8%205.5%202.8s5.5-1.3%205.5-2.8V11%27%2F%3E%3Cpath%20d%3D%27M21.5%208.6v5%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-grid { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%274.5%27%20width%3D%274.4%27%20height%3D%2715%27%20rx%3D%271.4%27%2F%3E%3Crect%20x%3D%279.8%27%20y%3D%274.5%27%20width%3D%274.4%27%20height%3D%2715%27%20rx%3D%271.4%27%2F%3E%3Crect%20x%3D%2715.6%27%20y%3D%274.5%27%20width%3D%274.4%27%20height%3D%2715%27%20rx%3D%271.4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-house { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2011.2%2012%204.5l8%206.7%27%2F%3E%3Cpath%20d%3D%27M6%2010v9.2a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1V10%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-inbox { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2013%206.4%206.2A2%202%200%200%201%208.3%205h7.4a2%202%200%200%201%201.9%201.2L20%2013v4.8A1.8%201.8%200%200%201%2018.2%2019.6H5.8A1.8%201.8%200%200%201%204%2017.8z%27%2F%3E%3Cpath%20d%3D%27M4%2013h4l1%202h6l1-2h4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-key { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M10.6%2010.6%2020%2020M16.5%2016.5l2-2M13.8%2013.8l2-2%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-link { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.6%2014.4%2014.4%209.6%27%2F%3E%3Cpath%20d%3D%27M8.2%2012%206%2014.2a3.5%203.5%200%200%200%205%205l2.2-2.2%27%2F%3E%3Cpath%20d%3D%27M15.8%2012%2018%209.8a3.5%203.5%200%200%200-5-5l-2.2%202.2%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-list { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.5%206.5h11M8.5%2012h11M8.5%2017.5h11%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%276.5%27%20r%3D%271.3%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%2712%27%20r%3D%271.3%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%2717.5%27%20r%3D%271.3%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-menu { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207.5h16M4%2012h16M4%2016.5h16%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-mic { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%273%27%20width%3D%276%27%20height%3D%2711%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M6%2011a6%206%200%200%200%2012%200M12%2017v3.5M8.5%2020.5h7%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-moon { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2014.2A8%208%200%201%201%209.8%204%206.3%206.3%200%200%200%2020%2014.2z%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-noentry { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M6.6%206.6%2017.4%2017.4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-note { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020l1-4L16%205a2%202%200%200%201%203%203L8%2019l-4%201z%27%2F%3E%3Cpath%20d%3D%27M14%207l3%203%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-paperclip { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2011.5%2011.8%2019.6a4.5%204.5%200%200%201-6.4-6.4l8-8a3%203%200%200%201%204.3%204.3l-8%208a1.5%201.5%200%200%201-2.2-2.1l7.3-7.3%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-person { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M5.5%2020a6.5%206.5%200%200%201%2013%200%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-play { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%205.4v13.2l11-6.6z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-plus { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-power { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5v8.5%27%2F%3E%3Cpath%20d%3D%27M7.6%206.6a7%207%200%201%200%208.8%200%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-repeat { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012a6%206%200%200%201%2010-4.4L17%2010M20%2012a6%206%200%200%201-10%204.4L7%2014%27%2F%3E%3Cpath%20d%3D%27M17%205.5V10h-4.5M7%2018.5V14h4.5%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-save { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h11l3%203v11a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-13a1%201%200%200%201%201-1z%27%2F%3E%3Cpath%20d%3D%27M8%204.5v4h6v-4M8%2019v-5.5h8V19%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-search { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%276.4%27%2F%3E%3Cpath%20d%3D%27M15.8%2015.8%2020.5%2020.5%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-sliders { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208h9M17%208h3M4%2016h3M11%2016h9%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%278%27%20r%3D%272.2%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2716%27%20r%3D%272.2%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-sun { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202.5v2.2M12%2019.3v2.2M2.5%2012h2.2M19.3%2012h2.2M5%205l1.6%201.6M17.4%2017.4%2019%2019M19%205l-1.6%201.6M6.6%2017.4%205%2019%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-tag { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204.5h7l9%209-6.5%206.5-9-9z%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%271.4%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-timeline { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206.5h9M4%2012h13M4%2017.5h6%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-touchid { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2010.2a2%202%200%200%200-2%202c0%202.6.3%204.4.3%204.4%27%2F%3E%3Cpath%20d%3D%27M12%206.4a5.8%205.8%200%200%200-5.8%205.8c0%201.9.2%203.6.5%204.9%27%2F%3E%3Cpath%20d%3D%27M12%208.3a3.9%203.9%200%200%200-3.9%203.9c0%202.2.4%204.2.4%204.2%27%2F%3E%3Cpath%20d%3D%27M17.6%2016.6c.3-1.5.4-3%20.4-4.4a6%206%200%200%200-3-5.2%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-trash { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9%207V5.2a1.2%201.2%200%200%201%201.2-1.2h3.6A1.2%201.2%200%200%201%2015%205.2V7%27%2F%3E%3Cpath%20d%3D%27M6.5%207l.9%2012.2a1.4%201.4%200%200%200%201.4%201.3h6.4a1.4%201.4%200%200%200%201.4-1.3L17.5%207%27%2F%3E%3Cpath%20d%3D%27M10%2011v6M14%2011v6%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-tray { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2014.5v3.5a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-3.5%27%2F%3E%3Cpath%20d%3D%27M12%203.5v10M8%2010l4%204%204-4%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-users { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.2%27%20cy%3D%278%27%20r%3D%273.1%27%2F%3E%3Cpath%20d%3D%27M3.6%2019.5a5.6%205.6%200%200%201%2011.2%200%27%2F%3E%3Cpath%20d%3D%27M15.6%205.2a3.1%203.1%200%200%201%200%205.9M20.4%2019.5a5.6%205.6%200%200%200-3.1-5%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-warning { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.6%2021.4%2020H2.6z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4.6M12%2017.3v.1%27%2F%3E%3C%2Fsvg%3E"); }

/* ===== Life OS nav: section icons + module placeholder views ===== */
.sfi-cart { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%2720%27%20r%3D%271.4%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2720%27%20r%3D%271.4%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M3%204h2.2l2.1%2011a1.5%201.5%200%200%200%201.5%201.2h8.1a1.5%201.5%200%200%200%201.5-1.2L20.4%208H6.2%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-camera { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M23%2019a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h4l2-3h6l2%203h4a2%202%200%200%201%202%202z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E"); }
.sfi-loader { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%200%201%2010%2010%27%20opacity%3D%270.3%27%2F%3E%3Cpath%20d%3D%27M12%202a10%2010%200%200%200-10%2010%27%2F%3E%3C%2Fsvg%3E"); }
.nav-item .sfi { width: 18px; height: 18px; opacity: .9; }
.nav-item.active .sfi { opacity: 1; }

.module-view { flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
.module-empty { max-width: 440px; text-align: center; }
.module-icon { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 18px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; }
.module-icon .sfi { width: 34px; height: 34px; color: var(--primary); }
.module-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--warn-text); background: rgba(255,149,0,.16); padding: 3px 12px; border-radius: 100px; margin-bottom: 14px; }
.module-empty h2 { font-size: 24px; margin-bottom: 8px; letter-spacing: -.02em; }
.module-empty p { color: var(--muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) { .module-view { padding-bottom: var(--nad-tabbarom); } }

/* ===== Fitness module ===== */
.module-view.mv-scroll { display: block; } /* nie flex: ako flex item dostal .fit pevnú výšku kontajnera
   a obsah z neho pretiekol — spodné tlačidlá tréningu sa nedali doscrollovať spod tabbaru (9. 9. 2026) */
.fit { width: 100%; max-width: 720px; margin: 0 auto; }
/* Na širokom monitore ostávalo vpravo aj vľavo po 240 px prázdne a pás týždňa mal bunky 96 px,
   hoci miesta bolo dosť. Rozšírenie sa týka len plochy, rozloženie vnútri zostáva. */
@media (min-width: 1200px) { .fit { max-width: 960px; } }
@media (min-width: 1440px) { .fit { max-width: 1100px; } }
.fit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fit-head h2 { font-size: 26px; letter-spacing: -.022em; }
.fit-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.fit-list { display: flex; flex-direction: column; gap: 8px; }
.fit-session { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); cursor: pointer; box-shadow: var(--shadow-1); }
.fit-session:hover { box-shadow: var(--shadow-2); }
.fit-session-main { flex: 1; min-width: 0; }
.fit-session-title { font-size: 15px; font-weight: 600; }
.fit-session-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fit-session-del { color: var(--muted); } .fit-session-del:hover { color: var(--danger); }
.fit-back { align-self: flex-start; margin-bottom: 12px; padding-left: 8px; }
.fit-detail-head { display: flex; gap: 10px; margin-bottom: 14px; }
.fit-name { flex: 1; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 16px; font-weight: 600; }
.fit-date { padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 14px; }
.fit-name:focus, .fit-date:focus, .fit-plate-inputs input:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3.5px var(--primary-soft); }
.fit-groups { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.fit-del { align-self: flex-start; }
.fit-plate { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: 16px; overflow: hidden; }
.fit-plate > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.fit-plate > summary::-webkit-details-marker { display: none; }
.fit-plate > summary .sfi { width: 18px; height: 18px; }
.fit-plate-body { padding: 0 14px 14px; }
.fit-plate-inputs { display: flex; gap: 12px; margin-bottom: 12px; }
.fit-plate-inputs label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fit-plate-inputs input { padding: 9px 12px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 15px; }
.fit-plate-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pl-side { color: var(--muted); margin-right: 4px; }
.pl-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 5px 10px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-left { color: var(--danger-text); margin-left: 6px; }

.fit-aktiv { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; background: color-mix(in srgb, var(--m-fitness) 8%, var(--panel)); border: 1.5px solid var(--m-fitness); border-radius: var(--r-card); padding: 12px 14px; margin: 10px 0; transition: box-shadow var(--motion-fast); }
.fit-aktiv:hover { box-shadow: var(--shadow-2); }
.fit-aktiv-name { font-weight: 700; font-size: 15px; color: var(--text); }
.fit-aktiv-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fit-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ===== module note (agent-pending) + Škola docs ===== */
.module-note { max-width: 480px; margin: 40px auto 0; text-align: center; }
.module-note p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 4px; }
.school-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.school-doc.unread { border-color: var(--primary); }
.school-doc-main { flex: 1; min-width: 0; }
.school-doc-title { font-size: 15px; font-weight: 600; }
.school-doc-course { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.school-doc-summary { font-size: 13px; color: var(--text-2); margin-top: 6px; line-height: 1.5;  white-space: pre-line;}
.school-doc-open { flex: none; padding: 7px 12px; font-size: 13px; text-decoration: none; }

/* ===== Fitness v2: routines + guided session ===== */
/* margin 2px odsadzoval nadpisy o 2 px inak než karty pod nimi — okraje sa nezhodovali. */
.fit-sect-h { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.fit-routines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fit-routine { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); cursor: pointer; }

/* postup tréningu — koľko sérií je za tebou */
.wk-progress { margin: 10px 0 4px; }
.wk-progress-bar { height: 5px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.wk-progress-bar span { display: block; height: 100%; background: var(--primary); border-radius: 3px; transition: width .25s ease; }
.wk-progress-text { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ===== Fitness: nastavenia + zbalené rutiny na mobile ===== */
.fit-setup { display: flex; flex-direction: column; gap: 8px; }
.fit-setup-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); font-size: 13.5px; }
.fit-setup-row > span { flex: 1; min-width: 0; color: var(--text-2); }
.fit-setup-row select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--input-bg); color: var(--text); font: inherit; font-size: 13.5px; }
.fit-setup-row .btn { padding: 6px 12px; font-size: 13px; min-height: 0; }
/* Zoznam cvikov je na desktope rozbalený, ale karty v gride sa naťahujú na najvyššiu —
   „Push A" s jediným riadkom mala 415 px, z toho 346 prázdnych. start zarovná každú
   kartu na jej vlastný obsah. */
.fit-routines { align-items: start; }
.rt-toggle { display: none; }   /* na desktope je zoznam cvikov vždy rozbalený */
/* Dlhá rutina (10 cvikov = 307 px) inak roztiahne celý riadok mriežky. */
.fit-routine .rt-ex-list { max-height: 190px; overflow-y: auto; }
/* Nastavenia meníš raz za čas, ale zaberali 263 px nad Históriou — zbalené pod nadpis.
   Keď nie je vyplnený profil, summary to hlási, aby sa to nestratilo. */
.fit-setup-wrap > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fit-setup-wrap > summary::-webkit-details-marker { display: none; }
.fit-setup-wrap > summary::after { content: '›'; font-size: 16px; color: var(--muted); transition: transform .18s ease; }
.fit-setup-wrap[open] > summary::after { transform: rotate(90deg); }

@media (max-width: 900px) {
  /* hlavička modulu: akcie v jednom vodorovne scrollovateľnom rade, nie zlomené do dvoch */
  .fit-head { flex-direction: column; align-items: stretch; gap: 10px; }
  /* justify-content: flex-end zdedené zhora vysunie pretečený rad DOĽAVA mimo obrazovku
     (prvé tlačidlo malo left: -114 px) a scrollom sa k nemu nedá dostať — flex-start. */
  .fit-actions { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .fit-actions::-webkit-scrollbar { display: none; }
  .fit-actions .btn { flex: none; white-space: nowrap; }

  /* na rade: tlačidlo na celú šírku pod textom, nie stlačené vedľa */
  .fit-next-row { flex-direction: column; align-items: stretch; }
  .fit-next-start { width: 100%; min-height: 50px; font-size: 16px; }

  /* rozvrh: 7 buniek na 375 px — menšie písmo, názov na 2 riadky */
  .tsch { gap: 4px; }
  .tsch-day { padding: 7px 2px 6px; gap: 3px; grid-template-rows: auto 1fr 12px 14px; min-height: 78px; }
  .tsch-name { font-size: 10.5px; line-height: 1.15; }

  /* rutiny: zbalené na hlavičku + partie; cviky za jedným ťuknutím */
  .fit-routines { grid-template-columns: 1fr; }
  .rt-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill);
    color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; min-height: 44px;
  }
  .rt-toggle-chev { display: inline-block; transition: transform .18s ease; font-size: 18px; line-height: 1; color: var(--muted); }
  .fit-routine.expanded .rt-toggle-chev { transform: rotate(90deg); }
  .fit-routine .rt-ex-list { display: none; }
  .fit-routine.expanded .rt-ex-list { display: flex; }
  .rt-ex-list li { font-size: 13.5px; padding: 3px 0; }
  .rt-ex-list li.rt-ex { cursor: pointer; }

  /* čísla týždňa v jednom rade, nie tri vysoké boxy */
  .fit-week { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fit-week > div { padding: 9px 6px; }
  .fit-week b { font-size: 18px; }
  .fit-week span { font-size: 11px; }

  .fit-sect-h { margin-top: 18px; }
}

/* Výšku tabbaru meria app.js (zmerajTabbar) do --tabbar-h, lebo závisí od safe-area
   a od systémovej veľkosti písma. Fallback platí, kým JS nedobehne. Meraná hodnota
   UŽ obsahuje safe-area-inset-bottom (tabbar ho má vo vlastnom paddingu), takže sa
   tu nesmie pripočítať druhýkrát. --nad-tabbarom = odsadenie obsahu nad panelom. */
:root {
  --sab-probe: env(safe-area-inset-bottom, 0px);   /* len na diagnostiku (?diag=1) */
  --tabbar-h: calc(60px + env(safe-area-inset-bottom));
  --nad-tabbarom: calc(var(--tabbar-h) + 24px);
}

/* ===== Tréningový rozvrh + objem po partiách ===== */
.tsch { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tsch-day {
  display: grid; justify-items: center; gap: 4px; padding: 9px 4px 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); min-width: 0;
  /* Pevná mriežka riadkov: deň · názov · šport · značka. Flex-column s `flex:1` na názve
     posúval text v dňoch, ktoré mali navyše štítok športu („⇄ Padel") — pás potom vyzeral
     rozsypaný. Každý riadok má teraz svoj vlastný track, takže baseline sedí naprieč týždňom. */
  grid-template-rows: auto 1fr 13px 15px; min-height: 86px;
}
.tsch-wd { font-size: 11px; font-weight: 700; color: var(--muted); }
.tsch-name {
  font-size: 12.5px; font-weight: 600; text-align: center; overflow-wrap: anywhere;
  display: flex; align-items: center; justify-content: center; min-width: 0;
}
.tsch-akts { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; min-width: 0; }
.tsch-name i { color: var(--muted); font-weight: 500; }
.tsch-mark { font-size: 12px; font-weight: 700; }
.tsch-day.is-today { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.tsch-day.is-today .tsch-wd { color: var(--primary); }
.tsch-day.is-done .tsch-mark { color: var(--success); }
.tsch-day.is-missed { border-style: dashed; }
.tsch-day.is-missed .tsch-mark { color: var(--danger-text); }
/* Tlačidlo v hlavičke sekcie. `margin-left: auto` ho odtlačí na pravý okraj —
   bez toho sa nalepí priamo na nadpis (medzera 0 px) a vyzerá ako súčasť textu. */
.sect-akcia, .tsch-edit { margin-left: auto; padding: 4px 10px; font-size: 12px; min-height: 0; }
/* hlavička sekcie nesie občas aj akčné tlačidlo vpravo (Upraviť, Uložiť ako šablónu) —
   gap + auto-margin ho odtlačí na koniec, nech sa nelepí na nadpis */
.fit-sect-h { display: flex; align-items: center; gap: 10px; }
.fit-sect-h > .btn { margin-left: auto; flex: none; }

.tsch-form { display: flex; flex-direction: column; gap: 8px; }
.tsch-form-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tsch-form-row select {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px; font-weight: 500;
}

/* objem: pruh s dvomi značkami — MEV a MAV */
.vol-legend { display: flex; gap: 12px; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; justify-content: flex-end; }
.vol-legend span::before { content: ''; display: inline-block; width: 2px; height: 10px; margin-right: 5px; vertical-align: -1px; background: var(--muted); }
.vol-legend .vol-mav::before { background: var(--primary); }
.vol-list { display: flex; flex-direction: column; gap: 6px; }
.vol-row { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
.vol-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-track { position: relative; height: 12px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.vol-fill { display: block; height: 100%; border-radius: 6px; }
.vol-pod { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.vol-ok  { background: var(--success); }
.vol-nad { background: var(--danger); }
/* medzi MAV a MRV: vysoký objem, ale stále produktívny — nie je dôvod na červenú */
.vol-vysoko { background: #f59e0b; }
.vol-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--muted); opacity: .8; }
.vol-tick-mav { background: var(--primary); }
.vol-sets { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===== Život — mriežka modulov (bottom sheet) =====
   Zámerne bez <dialog>/showModal — iOS Safari po ňom zasekne scroll pod ním. */
.zivot-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
/* vstupná animácia cez keyframes — viditeľný stav je predvolený, žiadna trieda,
   ktorá by pri nevykreslenom okne (requestAnimationFrame nebeží) ostala nepridaná */
.zivot-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: zivot-fade .18s ease; }
.zivot-sheet {
  position: relative; width: 100%; max-width: 560px; padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  background: var(--panel); color: var(--text); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  animation: zivot-up .2s ease;
}
.ask-wrap { z-index: 210; }
.ask-sheet { max-width: 440px; }
.ask-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0 6px; }
.ask-msg { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--text); }
.ask-input { width: 100%; margin: 0 0 14px; font-size: 16px; }
.ask-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ask-actions .btn { min-height: 44px; padding: 0 18px; }
.ask-actions .ask-ok { flex: 1; max-width: 220px; }
@media (min-width: 761px) {
  .ask-wrap { align-items: center; }
  .ask-sheet { border-radius: 16px; padding: 18px 20px 18px; }
  .ask-sheet .zivot-grip { display: none; }
}
@keyframes zivot-fade { from { opacity: 0; } }
@keyframes zivot-up { from { transform: translateY(24px); opacity: 0; } }

/* ---- food-sheet editor (.fs-*) ---- */
.fs-editor { max-width: 100% !important; border-radius: 0 !important; }
.fs-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.fs-input { font: inherit; font-size: 15px; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.fs-input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.fs-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.fs-row4 .fs-label { margin-bottom: 0; }
.fs-plan-row { flex-direction: row; align-items: center; font-size: 14px; font-weight: 400; color: var(--text); gap: 8px; }
@media (min-width: 761px) {
  .fs-editor { max-width: 480px !important; border-radius: 16px !important; top: 50%; transform: translateY(-50%); bottom: auto !important; }
}

.zivot-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 12px; }
.zivot-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding: 0 2px; }
.zivot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.zivot-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 14px; min-height: 96px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.zivot-tile .sfi { width: 24px; height: 24px; color: var(--primary); margin-bottom: 4px; }
.zivot-tile b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.zivot-tile span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.zivot-tile.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--bg-2)); }
.zivot-tile.primary { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.zivot-tile:active { transform: scale(.98); background: var(--fill-2); }
@media (min-width: 901px) {
  .zivot-wrap { align-items: center; }
  .zivot-sheet { border-radius: var(--r-panel); }
  .zivot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* scroll kontajner modulov: na iOS nech je jednoznačne dotykovo scrollovateľný */
.module-view.mv-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

/* ===== Strava ===== */
/* týždeň ako stĺpce — na jeden pohľad vidno, ktoré dni si jedol a ktoré nie */
.nut-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 16px; }
.nut-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
  cursor: pointer; font: inherit; color: var(--text);
}
.nut-day.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.nut-day.is-today .nut-day-n { color: var(--primary); font-weight: 700; }
.nut-day-n { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.nut-day-bar { width: 100%; height: 44px; border-radius: 5px; background: var(--fill); display: flex; align-items: flex-end; overflow: hidden; position: relative; }
.nut-day-bar span { width: 100%; background: var(--primary); border-radius: 5px 5px 0 0; transition: height .25s ease; }
/* Naplánované jedlo ako duch za skutočným príjmom — inak sa vo flexe delia o šírku
   a oba stĺpce sa zúžia na polovicu. Absolútne, aby prekrývali, nie susedili. */
.nut-day-bar .nut-day-plan {
  position: absolute; left: 0; bottom: 0; width: 100%;
  background: repeating-linear-gradient(45deg, var(--primary-soft) 0 4px, transparent 4px 8px);
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); border-bottom: 0;
}
.nut-day-pl { opacity: .55; font-style: italic; }
.nut-day-kcal { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.nut-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.macro { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 11px 13px; }
.macro-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.macro-top b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.macro-over { color: var(--danger-text); }
.macro-track { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.macro-track span { display: block; height: 100%; border-radius: 3px; transition: width .25s ease; }
.nut-planned-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* ===== Tyzden v cislach ===== */
.wk-nut-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; margin: 14px 0; }
.wk-nut-head { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.wk-nut-sub { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 11.5px; }
/* stacked bars - 7 stlpcov */
.wk-nut-stack { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.wk-nut-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk-nut-bar-wrap { width: 100%; height: 56px; display: flex; align-items: flex-end; }
.wk-nut-bar { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; overflow: hidden; }
.wk-nut-bar span { width: 100%; min-height: 2px; }
.wk-nut-bar-empty { background: var(--fill); border-radius: 3px 3px 0 0; opacity: .35; width: 100%; }
.wk-nut-empty .wk-nut-bar-wrap { opacity: .4; }
.wk-nut-day-lbl { font-size: 10px; color: var(--muted); font-weight: 500; }
/* legenda */
.wk-nut-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.wk-nut-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 2px; }
/* metricke polozky */
.wk-nut-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.wk-nut-metric { background: var(--fill); border-radius: 8px; padding: 9px 10px; }
.wk-nut-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wk-nut-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.wk-nut-note { display: block; font-size: 10.5px; opacity: .7; }
.wk-nut-pos { color: var(--danger-text); }
.wk-nut-neg { color: #22c55e; }
/* mobile: kompaktnejsi padding pri 7 stlpcoch */
@media (max-width: 420px) {
  .wk-nut-card { padding: 10px 10px; }
  .wk-nut-bar-wrap { height: 44px; }
  .wk-nut-metrics { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .wk-nut-metric { padding: 7px 8px; }
  .wk-nut-val { font-size: 14px; }
}

.nut-meals { display: flex; flex-direction: column; gap: 14px; }
.nut-meal-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.food-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: 6px; }
.food-planned { opacity: .68; border-style: dashed; }
.food-dot { color: var(--success, var(--success)); font-size: 10px; flex: none; }
.food-eat { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--muted); background: none; color: transparent; cursor: pointer; }
.food-eat:hover { border-color: var(--primary); }
.food-main { flex: 1; min-width: 0; }
.food-name { font-size: 14px; font-weight: 590; overflow-wrap: anywhere; }
.food-macros { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.food-del { color: var(--faint); font-size: 12px; } .food-del:hover { color: var(--danger); }

.food-form {
  display: grid; gap: 7px; margin-top: 12px; align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name meal" "macros macros";
}
.food-form #food-name { grid-area: name; min-width: 0; }
.food-form #food-meal { grid-area: meal; }
.food-form .food-macros-row { grid-area: macros; display: grid; grid-template-columns: repeat(4, 1fr) auto auto; gap: 7px; align-items: center; }
.food-form input[type="number"] { min-width: 0; text-align: center; }
.food-form input, .food-form select {
  padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--fill); color: var(--text); font: inherit; font-size: 14px;
}
.food-form input:focus, .food-form select:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.food-plan { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }

/* adaptívny cieľ */
.ad-card { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-panel); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); }
.ad-card.ad-off { background: var(--panel); border-color: var(--border); }
.ad-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ad-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ad-on { color: var(--primary); } .ad-muted { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.ad-tdee { font-size: 15px; margin-top: 3px; } .ad-tdee b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ad-ok { font-size: 13px; font-weight: 600; color: var(--success); }
.ad-head .btn small { font-weight: 500; opacity: .85; }
.ad-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ad-hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.ad-weight { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ad-weight input { width: 160px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px; }
.nut-goals-adapt { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r-card); }
.nut-goals label.nut-goals-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; text-transform: none; color: var(--text) !important; }
.nut-goals select { padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px; }

.nut-goals-dlg { max-width: 480px; width: calc(100vw - 32px); }
.nut-goals { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.nut-goals h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.nut-goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.nut-goals label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.nut-goals input, .nut-goals textarea {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px; min-width: 0;
}
.nut-goals textarea { resize: vertical; }
.nut-goals-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ===== Fitness: domovská obrazovka =====
   Otázka, s ktorou appku v posilke otváraš, je „čo mám dnes cvičiť" — nie
   „vypíš mi zoznam rutín". Preto je navrchu jedna karta s odpoveďou. */
.fit-next {
  margin-top: 14px; padding: 16px 18px; border-radius: var(--r-panel); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}
.fit-next-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.fit-next-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.fit-next-main { flex: 1; min-width: 0; }
.fit-next-main h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.fit-next-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.fit-next-start { flex: none; padding: 11px 22px; font-size: 15px; }
.fit-next-thumbs { display: flex; gap: 6px; margin-top: 13px; overflow-x: auto; scrollbar-width: none; }
.fit-next-thumbs::-webkit-scrollbar { display: none; }
.fit-next-thumbs img { width: 62px; height: 46px; flex: none; object-fit: cover; border-radius: 8px; background: var(--fill); }

.fit-muscles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fit-muscles span {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px;
  color: var(--muted); background: var(--fill);
}

/* týždeň v troch číslach — bez toho nevieš, či vôbec chodíš */
.fit-week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.fit-week > div {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 12px 14px; text-align: center;
}
.fit-week b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.fit-week span { font-size: 11.5px; color: var(--muted); }
.fit-week > div:first-child b { color: var(--m-fitness); font-size: 32px; }
.fit-week > div:nth-child(2) b { color: var(--m-strava); }
.fit-week > div:nth-child(3) b { color: var(--m-sleep); }

/* Hero layout pre fit-week */
.fit-week-hero { display: flex; align-items: center; gap: 16px; }
.fit-week-hero-num { text-align: center; flex: none; min-width: 80px; }
.fit-week-hero-num b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -.04em; color: var(--m-fitness); line-height: 1; }
.fit-week-hero-num span { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; }
.fit-week-hero-side { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fit-week-hero-side > div { display: flex; flex-direction: column; }
.fit-week-hero-side b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.fit-week-hero-side span { font-size: 11px; color: var(--muted); }

.fit-session-vol { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* pruh na prepojenie rutín s knižnicou cvikov */
.fit-linkbar { display: flex; align-items: center; gap: 14px; padding: 13px 15px; margin-top: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--r-card); font-size: 13.5px; }
.fit-linkbar > div { flex: 1; min-width: 0; }
.fit-linkbar-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.fit-linkbar button { flex: none; }

/* ukážky cvikov (len v detaile rutiny — na karte by tlačili názvy do troch riadkov) */
.plan-ex { display: flex; gap: 11px; align-items: flex-start; }
.plan-ex-body { flex: 1; min-width: 0; }
.plan-ex-thumb { width: 62px; height: 46px; flex: none; object-fit: cover; border-radius: 8px; background: var(--fill); }
button.plan-ex-assign { border: 1px dashed var(--border); background: none; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
button.plan-ex-assign:hover { border-color: var(--primary); color: var(--primary); }

/* karta rutiny: zoznam cvikov priamo v nej — počet cvikov sám o sebe nič nehovorí */
.fit-routine-head { display: flex; align-items: center; gap: 10px; }
.fit-routine-head .fit-routine-main { flex: 1; min-width: 0; }
.rt-ex-list { margin: 10px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 3px; }
.rt-ex-list li { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.rt-ex-name { flex: 1; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
.rt-ex-spec { flex: none; font-variant-numeric: tabular-nums; opacity: .75; }

.fit-routine:hover { box-shadow: var(--shadow-2); }
.fit-routine-main { flex: 1; min-width: 0; }
.fit-routine-title { font-size: 15px; font-weight: 600; }
.fit-routine-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fit-routine-start { padding: 7px 16px; font-size: 13px; }
.fit-phase { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding: 8px 12px; background: var(--fill); border-radius: var(--r-control); margin-bottom: 8px; }
.fit-phase .sfi { width: 15px; height: 15px; }
.fit-plan { display: flex; flex-direction: column; gap: 8px; }
.plan-ex { padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); }
.plan-ex-name { font-size: 15px; font-weight: 600; }
.plan-ex-spec { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.plan-ex-spec .sfi { width: 13px; height: 13px; vertical-align: -.1em; }
.plan-ex-alt { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.fit-superset { border-left: 3px solid var(--primary); border-radius: 0 var(--r-card) var(--r-card) 0; padding-left: 10px; display: flex; flex-direction: column; gap: 8px; }
.fit-superset-h { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; }
.wk-ex { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-1); }
.wk-ex--dragging { opacity: 0.6; transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 10; transition: transform 0.15s, opacity 0.15s; }
.wk-ex--drop-target { border: 2px solid var(--c-accent, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent,#4f46e5) 25%, transparent); }
.wk-ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wk-ex-name { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; text-align: left; }
.wk-ex-target { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wk-last { font-size: 12px; color: var(--muted); margin-top: 3px; min-height: 15px; }
.wk-last b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-sets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wk-set { display: grid; grid-template-columns: 24px 1fr auto 1fr auto; align-items: center; gap: 8px; }
.wk-set-n { width: 22px; height: 22px; border-radius: 50%; background: var(--fill); color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wk-reps, .wk-kg { padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--fill); color: var(--text); font-size: 15px; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.wk-reps:focus, .wk-kg:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.wk-x { color: var(--muted); text-align: center; }
.wk-set-del { color: var(--faint); font-size: 12px; } .wk-set-del:hover { color: var(--danger); }
.wk-ex-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }   /* 5 tlačidiel sa na 390 px nezmestí do riadku */
.wk-ex-actions .btn { font-size: 13px; padding: 7px 12px; }
.btn.btn-ghost.wk-rest { color: var(--primary); }
.wk-rest .sfi { width: 14px; height: 14px; }
/* Pauza medzi sériami: úzky pruh, nie balón — dlhý názov cviku ho predtým rozfúkol
   cez pol obrazovky a prekryl spodné tlačidlá tréningu (9. 9. 2026). */
.rest-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 88; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 460px); padding: 8px 8px 8px 16px; border-radius: 100px; background: var(--primary); color: #fff; box-shadow: var(--shadow-pop); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rest-bar .rest-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; opacity: .9; }
.rest-bar .rest-time { flex: none; font-size: 17px; letter-spacing: .01em; }
.rest-bar .btn { flex: none; background: rgba(255,255,255,.22); color: #fff; padding: 6px 14px; min-height: 0; }
.rest-bar.rest-koniec { animation: rest-puls .5s ease-in-out infinite alternate; }
@keyframes rest-puls { to { background: var(--danger, #ff3b30); } }
@media (max-width: 900px) { .rest-bar { bottom: calc(var(--tabbar-h) + 14px); } }
@media (pointer: coarse) { .rest-bar .btn { min-height: 36px; } }

/* ===== Rest timer — mobile sheet overlay (< 640px) ===== */
.rest-sheet-wrap {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
}
.rest-sheet-wrap.hidden { display: none; }
.rest-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: zivot-fade .18s ease;
}
.rest-sheet {
  position: relative; width: 100%;
  background: var(--panel); color: var(--text);
  border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  animation: zivot-up .2s ease;
  display: flex; flex-direction: column;
  padding: 10px 0 0;
}
.rest-sheet-head {
  flex: none; padding: 0 20px 12px; border-bottom: 1px solid var(--border);
}
.rest-sheet-name {
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rest-sheet-name.hidden { display: none; }
.rest-sheet-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 36px 20px;
}
.rest-sheet-time {
  font-size: 72px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--primary);
}
.rest-sheet-foot {
  flex: none; padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.rest-sheet-stopbtn { width: 100%; min-height: 52px; font-size: 17px; }
.rest-sheet-wrap.rest-koniec .rest-sheet-time { color: var(--danger, #ff3b30); animation: rest-puls .5s ease-in-out infinite alternate; }
@keyframes rest-sheet-puls { to { color: var(--danger, #ff3b30); } }
/* počas pauzy sa dá doscrollovať aj pod pruh — inak zakryje 'Zmazať tréning' */
body.rest-on .module-view.mv-scroll { padding-bottom: calc(var(--nad-tabbarom) + 66px); }

/* ===== exercise library + picker ===== */
.lib-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lib-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--fill); flex: none; }
.ex-noimg { display: inline-block; background: var(--fill); }
.ex-title { font-size: 22px; letter-spacing: -.02em; margin-bottom: 12px; }
.ex-hero { width: 100%; max-width: 420px; border-radius: var(--r-card); background: var(--fill); display: block; margin-bottom: 12px; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ex-chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 100px; background: var(--fill); color: var(--text-2); text-transform: capitalize; }
.ex-muscles { font-size: 14px; color: var(--muted); margin-bottom: 6px; text-transform: capitalize; }
.ex-muscles b { color: var(--text); text-transform: none; }
.ex-steps { margin: 4px 0 8px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.ex-steps li { padding-left: 4px; }
.wk-ex-thumb { width: 44px; height: 34px; border-radius: 7px; flex: none; overflow: hidden; background: var(--fill); }
.wk-ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wk-ex-head { align-items: center; }
.ex-ov { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
/* max-height v `%`, nie vo `vh`: .ex-ov je fixed inset:0, takže percento je z reálnej
   viditeľnej plochy. `vh` v Safari web appke ignoruje systémové pruhy a spodok sheetu
   (posledná alternatíva cviku) skončí v zóne home indikátora, kde iOS klik zoberie ako
   swipe-up gesto — tlačidlo vyzerá „schované pod panelom". Rovnaké pravidlo v CLAUDE.md. */
.ex-modal { background: var(--panel); width: min(560px, 100%); max-height: 82%; border-radius: var(--r-sheet) var(--r-sheet) 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 700px) { .ex-ov { align-items: center; } .ex-modal { border-radius: var(--r-sheet); } }
.ex-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.ex-modal-head b { font-size: 17px; }
.ex-q { margin: 0 18px 8px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 16px; }
.ex-q:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3.5px var(--primary-soft); }
/* safe-area rieši .ex-modal vyššie — tu by sa pripočítala druhýkrát */
.ex-modal-list { overflow-y: auto; padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ex-pick { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: none; background: none; color: var(--text); cursor: pointer; border-radius: var(--r-control); text-align: left; width: 100%; }
.ex-pick:hover { background: var(--hover); }
.ex-pick img, .ex-pick .ex-noimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.ex-pick-main { display: flex; flex-direction: column; min-width: 0; }
.ex-pick-name { font-size: 14px; font-weight: 600; }
.ex-pick-meta { font-size: 12px; color: var(--muted); text-transform: capitalize; }

/* ===== routine editor + health ===== */
.re-meta { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 14px; margin-bottom: 6px; }
.re-meta:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.re-items { display: flex; flex-direction: column; gap: 8px; }
.re-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px 12px; }
.re-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.re-ex { font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-move { display: flex; gap: 2px; flex: none; }
.re-move .icon-btn { color: var(--muted); font-size: 14px; }
.re-move .re-del:hover { color: var(--danger); }
/* auto-fit namiesto pevných 5 stĺpcov: na úzkom mieste sa zalomia,
   nezmrštia sa do nepoužiteľných políčok */
.re-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 6px; margin-bottom: 6px; }
.re-fields label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.re-fields input { padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: var(--fill); color: var(--text); font-size: 14px; text-align: center; min-width: 0; }
.re-fields input:focus, .re-alt:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.re-alt { width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--fill); color: var(--text); font-size: 13px; }
@media (max-width: 560px) { .re-fields { grid-template-columns: repeat(3, 1fr); } }

/* ===== gyms / miesta ===== */
.gym-list { display: flex; flex-direction: column; gap: 10px; }
.gym-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; }
.gym-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gym-name { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 15px; font-weight: 600; }
.gym-name:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.gym-def { font-size: 12px; padding: 6px 10px; white-space: nowrap; }
.gym-def[disabled] { color: var(--success-text); opacity: 1; cursor: default; }
.gym-del { color: var(--muted); } .gym-del:hover { color: var(--danger); }
.gym-eqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; }
.gym-eq-l { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); text-transform: capitalize; cursor: pointer; }
.gym-eq-l input { width: 16px; height: 16px; accent-color: var(--primary); }
.ex-eqtoggle { margin: 0 18px 8px; align-self: flex-start; }

/* ===== AI brain ===== */
.brain-modal { max-height: 86%; }
.brain-body { padding: 0 18px 18px; overflow-y: auto; }
.brain-q { width: 100%; min-height: 88px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill); color: var(--text); font: inherit; font-size: 15px; resize: vertical; }
.brain-q:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.brain-ask { margin-top: 10px; }
.brain-out { margin-top: 14px; }
.brain-err { color: var(--danger-text); background: var(--danger-soft); padding: 10px 12px; border-radius: var(--r-control); font-size: 14px; }
.coach-prop { display: flex; flex-direction: column; gap: 10px; }
.coach-changes { display: flex; flex-direction: column; gap: 8px; }
.coach-change { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill); cursor: pointer; }
.coach-change input { margin-top: 2px; accent-color: var(--primary); }
.coach-change span { display: flex; flex-direction: column; gap: 3px; }
.coach-change small { color: var(--muted); line-height: 1.35; }

/* Weekly review card */
.wr-card { display: flex; flex-direction: column; gap: 12px; }
.wr-counts { display: flex; gap: 10px; }
.wr-wk { flex: 1; text-align: center; background: var(--fill); border-radius: var(--r-control); padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.wr-wk b { font-size: 22px; line-height: 1; }
.wr-wk span { font-size: 11px; color: var(--muted); }
.wr-wk.wr-zero { opacity: .4; }
.wr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wr-table th, .wr-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--border); }
.wr-table th { color: var(--muted); font-weight: 500; font-size: 11px; }
.wr-muscle { text-align: left !important; font-weight: 500; min-width: 80px; }
.wr-table td { position: relative; }
.wr-bar { position: absolute; left: 0; top: 0; height: 100%; background: var(--primary); opacity: .15; border-radius: 2px; }
.wr-hi .wr-bar { opacity: .35; }
.wr-zero { color: var(--muted); }
.wr-prs { display: flex; flex-direction: column; gap: 6px; }
.wr-pr { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--fill); border-radius: var(--r-control); flex-wrap: wrap; }
.wr-pr b:first-child { flex: 1 1 120px; }
.wr-rir { display: flex; flex-direction: column; gap: 8px; }
.wr-rir-wk { background: var(--fill); border-radius: var(--r-control); padding: 8px 10px; }
.wr-rir-label { font-size: 12px; margin-bottom: 5px; font-weight: 500; }
.wr-rir-bars { display: flex; gap: 5px; flex-wrap: wrap; }
.wr-rir-chip { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--border); color: var(--text); }
.rir-0 { background: #ef4444; color: #fff; }
.rir-1 { background: #f97316; color: #fff; }
.rir-2 { background: #eab308; color: #000; }
.rir-3 { background: #22c55e; color: #fff; }
.rir-4 { background: #38bdf8; color: #000; }
.md { font-size: 14.5px; line-height: 1.6; }
.md h3 { font-size: 16px; margin: 14px 0 6px; }
.md h4 { font-size: 14px; margin: 12px 0 5px; color: var(--muted); }
.md p { margin: 8px 0; }
.md ul { margin: 6px 0 6px 20px; display: flex; flex-direction: column; gap: 3px; }
.md b { font-weight: 600; }
.md-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.md-table th, .md-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.md-table th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.md-table tr:last-child td { border-bottom: none; }
.nut-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.nut-nakup-h { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.nut-row { display: flex; gap: 8px; }
.nut-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 15px; min-width: 0; }
.nut-form input:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ===== strava hub ===== */

/* ===== jedáleň (obed) ===== */
.cant-week { display: flex; flex-direction: column; gap: 12px; }
.cant-day { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px 12px; box-shadow: var(--shadow-1); }
.cant-day-off { opacity: .62; }
.cant-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cant-day-date { font-weight: 600; font-size: 14px; }
.cant-day-tag { font-size: 11px; color: var(--muted); background: var(--fill); padding: 2px 7px; border-radius: 999px; }
.cant-day-logged { margin-left: auto; font-size: 12px; color: var(--success-text); font-weight: 600; }
/* Návrh obeda ešte nie je príjem — musí vyzerať inak než potvrdené „zjedené“. */
.cant-day-navrh { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 600; font-style: italic; }
.cant-potvrd { margin: 8px 0 10px; }
.cant-potvrd .btn { width: 100%; justify-content: center; }
/* Že sa dá ťuknúť na iný chod, nebolo nikde napísané — Jaro sa na to musel pýtať. */
.cant-navod { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px; }
.cant-moj { color: var(--success-text); }
.cant-soup { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.cant-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-control); padding: 8px 10px; cursor: pointer; color: var(--text); border-top: 1px solid var(--separator); border-radius: 0; }
.cant-opt:first-of-type { border-top: none; }
.cant-opt:hover { background: var(--fill); }
.cant-opt.pick { background: var(--primary-soft); border-radius: var(--r-control); border-top-color: transparent; }
.cant-opt.logged { box-shadow: inset 3px 0 0 var(--success); }
.cant-opt-no { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--fill); color: var(--muted); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.cant-opt.pick .cant-opt-no { background: var(--primary); color: #fff; }
.cant-opt-body { flex: 1; min-width: 0; }
.cant-opt-name { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.cant-opt-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cant-opt-macros { flex: none; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.cant-opt-macros small { font-size: 10px; font-weight: 400; color: var(--muted); }
.cant-veg { font-size: 10px; font-weight: 700; color: var(--success-text); background: rgba(52,199,89,.16); padding: 1px 5px; border-radius: 4px; vertical-align: middle; }
.cant-pick-hint { font-size: 13px; line-height: 1.4; background: var(--primary-soft); color: var(--text); border-radius: var(--r-control); padding: 8px 10px; margin-bottom: 8px; }
.cant-pick-hint b { font-weight: 600; }
.cant-pick-macros { color: var(--muted); white-space: nowrap; }
.cant-canteen + .cant-canteen { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--separator); }
.cant-canteen-name { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.cant-cmeta { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.cant-order-line { font-size: 12px; color: var(--muted); margin-top: 5px; }
.cant-order-line b { color: var(--text); }
.cant-late { color: var(--danger-text); }

/* ===== dáta: check-in + pokrytie zdrojov ===== */
.chk-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 8px; }
.chk-row { display: flex; align-items: center; gap: 10px; }
.chk-lbl { width: 96px; font-size: 13.5px; color: var(--muted); flex: none; }
.chk-scale { display: flex; gap: 6px; flex: 1; }
.chk-dot { flex: 1; height: 34px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--fill); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.chk-dot:hover { border-color: var(--primary); }
.chk-dot.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chk-note { padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill); color: var(--text); font-size: 14px; }
.chk-note:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.chk-foot { display: flex; align-items: center; gap: 12px; }
.chk-saved { font-size: 13px; color: var(--success-text); }
.chk-hist { display: flex; gap: 6px; align-items: flex-end; height: 64px; margin: 12px 2px 0; }
.chk-hist-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.chk-bar { width: 100%; max-width: 22px; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 3px; }
.chk-hist-day span { font-size: 9.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cov-list { display: flex; flex-direction: column; }
.cov-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--separator); }
.cov-row:last-child { border-bottom: none; }
.cov-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--faint); }
.cov-dot.ok { background: var(--success); box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.cov-dot.warn { background: var(--warn); }
.cov-name { font-size: 14px; font-weight: 500; }
.cov-meta { font-size: 12px; color: var(--muted); }
.cov-tot { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cov-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.cov-chip { font-size: 12px; background: var(--fill); border-radius: 999px; padding: 4px 10px; color: var(--muted); }
.cov-chip b { color: var(--text); }
@media (max-width: 560px) { .chk-lbl { width: 78px; font-size: 12.5px; } }

/* ===== AI kouč tile ===== */
.tile-ai { grid-column: 1 / -1; }
.ai-summary { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }

/* Odporúčania ako očíslované akcie — každé je jedna vec, nie odrážka v odstavci. */
.act { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--sep); font-size: 13px; line-height: 1.45; }
.act:last-of-type { border-bottom: none; }
.act-n { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; flex: none; margin-top: 1px; }

/* Priebeh dňa — časová os. Minulé sa stlmí, práve bežiace zvýrazní. */
.tl { position: relative; padding-left: 15px; }
.tl::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--sep); }
.tl .ev { position: relative; padding: 5px 0; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.tl .ev::before { content: ''; position: absolute; left: -15px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--text-3)); box-shadow: 0 0 0 3px var(--card); }
.tl .ev b { font-variant-numeric: tabular-nums; color: var(--text); flex: none; }
.tl .ev span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .ev.now span { color: var(--text); font-weight: 600; }
.tl .ev.past { opacity: .45; }

/* ===== progres ===== */
.prog-best { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.prog-best b { color: var(--text); }
.prog-chart { width: 100%; height: 220px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: 12px; }
.pc-lbl { fill: var(--muted); font-size: 9px; }
.prog-hist { display: flex; flex-direction: column; }
.prog-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--separator); font-size: 14px; }
.prog-row[data-wid] { cursor: pointer; }
.prog-row[data-wid]:active { background: var(--hover); }
.prog-row:last-child { border-bottom: none; }
.prog-date { color: var(--muted); min-width: 88px; font-size: 13px; }
.prog-row b { flex: 1; font-variant-numeric: tabular-nums; }
.prog-vol { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.wk-set.done .wk-set-n { background: var(--success); color: #fff; }

.nut-prefs { width: 100%; min-height: 70px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--fill); color: var(--text); font: inherit; font-size: 14px; resize: vertical; margin-bottom: 4px; }
.nut-prefs:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
/* ===== Dotykové ovládanie =====
   Dve veci, ktoré na mobile robili appku „nereagujúcou":

   1. -webkit-tap-highlight-color je globálne vypnutý (kvôli vzhľadu), ale v celom
      CSS boli len dve :active pravidlá. Po ťuknutí sa teda vizuálne nestalo nič,
      človek si myslí, že to nechytilo, a ťukne znova.
   2. Ovládacie prvky boli menšie než 44×44 — na obrazovke tréningu 102 zo 139.
      Práve tam sa ťuká spotenými rukami v posilke.

   pointer: coarse mieri na dotyk, nie na šírku okna — platí aj na iPade. */
@media (pointer: coarse) {
  .btn, .icon-btn, .seg-btn, .chip, .nav-item, .row, .tile[data-go],
  .fit-routine, .fit-session, .tabbar button, .ibx-acts button, .plan-ex,
  .wk-set-del, .school-doc, .lib-item {
    touch-action: manipulation;   /* žiadne čakanie na dvojťuk */
  }

  /* odozva na ťuknutie */
  .btn:active, .icon-btn:active, .seg-btn:active, .chip:active,
  .nav-item:active, .tabbar button:active, .ibx-acts button:active,
  .fit-routine:active, .fit-session:active, .tile[data-go]:active,
  .school-doc:active, .lib-item:active, .palette-item:active {
    background-color: var(--fill-2);
    transform: scale(.985);
  }
  .btn-primary:active, .tabbar .tb-add:active { filter: brightness(.9); transform: scale(.96); }
  .row:active { background-color: var(--fill-2); }

  /* minimálny dotykový cieľ */
  .btn, .seg-btn, select, .ibx-acts button { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .ibx-acts button { padding-left: 14px; padding-right: 14px; }
  .ibx-rate button { min-width: 44px; }

  /* tréning: v posilke musia byť polia veľké a čísla čitateľné */
  .wk-set { gap: 10px; }
  .wk-set input { min-height: 48px; font-size: 17px; font-weight: 600; text-align: center; }
  .wk-set .wk-set-del { min-width: 44px; min-height: 44px; }
  .wk-ex-actions .btn { min-height: 44px; }
  .wk-ex-thumb { width: 52px; height: 40px; }

}

@media (pointer: coarse) {
  /* odškrtnutie úlohy je najčastejší úkon na mobile — 20px štvorček je málo.
     Vizuálne 26px, ale dotykovú plochu rozšíri padding cez ::before. */
  .row-check { width: 26px; height: 26px; position: relative; }
  .row-check::before { content: ''; position: absolute; inset: -9px; }
  .view-switch button { min-height: 44px; }
  #ws-select { min-height: 44px; }
  .ibx-acts button { min-height: 44px; }
  .ibx-rate button { min-width: 44px; min-height: 44px; }
  .ibx-del { min-width: 44px; }
  .fit-name, .fit-date { min-height: 44px; }
}

/* rozvrh na mobile: názov rutiny sa nesmie lámať uprostred slova („Upp/er A") —
   JS ho už delí na medzere (<br>), tu len zakážeme lámanie vnútri slov.
   Na konci súboru zámerne: základné .tsch-name má overflow-wrap: anywhere. */
@media (max-width: 900px) {
  .tsch .tsch-name, .tsch .tsch-name i { overflow-wrap: normal; word-break: normal; hyphens: none; white-space: normal; }
}
/* Dnes: akčná dlaždica obeda (termín objednávky) + stav agenta */
.tile-act { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.tile-deadline { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, transparent); font-size: 13px; font-weight: 600; }
.tile-deadline .sfi { width: 16px; height: 16px; }
.tile-deadline.soon { color: var(--danger-text); background: color-mix(in srgb, var(--danger-text) 10%, transparent); }
.tile-deadline.closed { color: var(--muted); font-weight: 500; background: transparent; padding-left: 0; }
.tile-line .dot.ok { background: var(--primary); }
.tile-line .dot.bad { background: var(--danger-text); }

/* Škola: rozvrh týždňa */
/* Rozvrh ako zvislý zoznam dní, nie mriežka stĺpcov.
   Stĺpce `repeat(auto-fit, minmax(160px, 1fr))` robili tri chyby naraz: piatok vypadol sám
   na druhý riadok, všetky karty sa naťahovali na výšku tej najdlhšej (pondelok s dvomi
   hodinami bol vysoký ako utorok s piatimi), a v 160 px stĺpci sa kód miestnosti orezal
   („ab300" → „ab30"). Deň cez celú šírku nemá ani jeden z tých problémov. */
.sch-week { display: flex; flex-direction: column; gap: 8px; }
.sch-day { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.sch-day.today { border-color: var(--primary); }
.sch-day-h { font-weight: 600; text-transform: capitalize; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.sch-day.today .sch-day-h { color: var(--primary); }
.sch-lesson { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline;
  font-size: 13.5px; padding: 5px 0; border-top: 1px solid var(--separator); }
.sch-lesson:first-of-type { border-top: 0; }
.sch-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.sch-subj { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.sch-lesson.lecture .sch-subj { font-weight: 700; }
/* Štítok typu. Pri vlastnom rozvrhu sú názvy plné („Matematika 3"), takže pôvodná
   konvencia z FEI (VEĽKÉ = prednáška, malé = cvičenie) prestala čokoľvek hovoriť —
   typ musí byť napísaný, nie zakódovaný vo veľkosti písmen. */
.sch-typ {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  vertical-align: 1px; white-space: nowrap;
  background: var(--fill); color: var(--muted); border: 1px solid var(--border);
}
.sch-lesson.lecture .sch-typ, .sch-typ-lec {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.sch-lesson.optional .sch-subj { opacity: .7; }
/* Miestnosť sa nikdy neláme ani neoreže — je to najkratší a najpotrebnejší údaj v riadku. */
.sch-room { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Deň bez hodín nemá byť rovnako vysoký ako deň s piatimi. */
.sch-day .muted-hint { padding: 2px 0; font-size: 13px; }

/* Fitness: RIR na sérii, návrh záťaže, Watch, PR, deload */
.wk-set { grid-template-columns: 24px 1fr auto 1fr auto auto; }
.wk-rir { padding: 6px 4px; border: 1px solid transparent; border-radius: 8px; background: var(--fill); color: var(--muted); font-size: 12px; min-width: 52px; }
.wk-rir:focus { outline: none; border-color: var(--primary); }
.wk-set.pr .wk-kg { box-shadow: 0 0 0 2px var(--primary); }
.wk-suggest { margin-top: 4px; font-size: 13px; }
.wk-suggest .muted { color: var(--muted); }
.prog-e1 { color: var(--muted); font-size: 12px; margin-left: 8px; }
.fit-linkbar.deload { border-color: var(--danger-text); }
.deload-ex { border: none; background: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Strava: rýchle logovanie */
.food-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.food-chips::-webkit-scrollbar { display: none; }
.food-chip { flex: none; display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; }
.food-chip span { color: var(--muted); font-size: 11.5px; }
.food-chip:hover { border-color: var(--primary); }
.food-name-wrap { position: relative; display: flex; gap: 6px; align-items: center; }
.food-name-wrap input { flex: 1; min-width: 0; }
.food-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.18)); max-height: 260px; overflow-y: auto; }
.food-result { display: grid; gap: 2px; padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--border); font-size: 13.5px; }
.food-result:first-child { border-top: 0; }
.food-result:hover { background: var(--fill); }
.food-result span { color: var(--muted); font-size: 12px; }
#food-grams { max-width: 64px; }
.scan-overlay { position: fixed; inset: 0; z-index: 1000; background: #000; display: grid; grid-template-rows: 1fr auto auto; }
.scan-overlay video { width: 100%; height: 100%; object-fit: cover; }
.scan-hint { color: #fff; text-align: center; padding: 10px; font-size: 14px; }
.scan-close { margin: 0 auto 24px; color: #fff; }

/* Dáta: readiness, korelácie, miesta */
.rd-card { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.rd-score { font-size: 34px; font-weight: 800; letter-spacing: -.03em; min-width: 64px; text-align: center; color: var(--text); }
.rd-score.good { color: var(--primary); } .rd-score.low { color: var(--danger-text); }
.rd-main .muted { color: var(--muted); font-size: 13px; }
.rd-parts { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; margin-top: 6px; }
.rd-parts span { font-variant-numeric: tabular-nums; }
.corr-list { display: grid; gap: 6px; }
.corr-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.corr-r { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.corr-r.mid { color: var(--text); } .corr-r.strong { color: var(--primary); }
.corr-row .muted { color: var(--muted); font-size: 12px; }

/* Health charts */
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hc-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 8px; cursor: pointer; }
.hc-card:active { transform: scale(.99); }
.hc-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hc-lbl { font-weight: 600; font-size: 13px; }
.hc-unit { font-size: 11px; color: var(--muted); }
.hc-nodata { font-size: 12px; color: var(--muted); padding: 20px 0; text-align: center; }
.places-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.place-card { display: grid; grid-template-columns: 44px 1fr 1fr 64px; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.place-card b { text-transform: capitalize; }
.place-card .place-here { grid-column: 1 / -1; }
.place-in { min-width: 0; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--fill); color: var(--text); font-size: 13px; }

/* offline fronta */
.offline-badge { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 12px); transform: translateX(-50%); z-index: 900; background: var(--danger-text); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.wk-set.queued .wk-kg, .wk-set.queued .wk-reps { border-style: dashed; border-color: var(--danger-text); }
.vol-sets small { color: var(--muted); font-weight: 400; margin-left: 2px; }
.vol-legend .muted { color: var(--muted); font-size: 11.5px; margin-left: auto; }


/* ===== Úloha: hlavička · scrollovateľné telo · prišpendlená pätka =====
   Predtým scrolloval sám <dialog> (overflow-y:auto, max-height 90vh). Na iPade/iPhone
   po showModal() Safari dotykový scroll na dialógu nepustí a 90vh nepočíta s lištou
   prehliadača — Uložiť skončilo pod okrajom obrazovky. Scrolluje preto vnútorné telo,
   pätka s Uložiť je vždy vidno. Na konci súboru zámerne, nech prebije staršie pravidlá. */
#task-modal { padding: 0; overflow: hidden; max-height: 90vh; width: min(680px, 94vw); } /* vh, nie dvh — v Safari web appke z Docku dialóg s dvh skončil neviditeľný */
#task-modal[open] { display: flex; flex-direction: column; }
#task-modal form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
#task-modal .modal-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 22px 12px; border-bottom: 1px solid var(--border); }
#task-modal .modal-head h3 { margin: 0; flex: 1; min-width: 0; }
#task-modal .modal-kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
#task-modal .modal-close { font-size: 22px; line-height: 1; min-width: 36px; min-height: 36px; }
#task-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
#task-modal .modal-actions { flex: none; margin: 0; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--panel); position: static; }

/* Jeden vizuálny jazyk: názov, potom tabuľka vlastností „kľúč | hodnota" (projekt, stĺpec,
   priorita, termín, priradenie, štítky — všetko rovnaké chipy rovnakej výšky), potom sekcie
   Popis a Checklist s rovnakou hlavičkou, nakoniec rozbaľovacie Viac. */
#task-modal .tm-title { width: 100%; font-size: 18px; font-weight: 600; padding: 12px 14px; }
#task-modal .tm-props { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#task-modal .tm-row { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: center; min-height: 38px; }
#task-modal .tm-key { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
#task-modal .tm-val { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#task-modal .tm-val .pill-select, #task-modal .tm-val .date-quick, #task-modal .tm-val .chip-row { display: contents; }
/* natívny date input je skrytý — dátum sa vyberá v popoveri */
#task-modal .tm-date > input { display: none; }
#task-modal .field > input[type="date"], #task-modal .field > input[type="datetime-local"] { display: none; }
#task-modal .field .date-quick { margin: 0; }

/* chip = aktuálna hodnota; ťuknutie otvorí popover s možnosťami */
.tm-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; margin: 0;
  border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill);
  color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer; touch-action: manipulation; min-height: 0; box-sizing: border-box; max-width: 100%;
  transition: background .12s, border-color .12s;
}
.tm-chip:hover { background: color-mix(in srgb, var(--fill) 60%, var(--border)); border-color: var(--border); }
.tm-chip .tm-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tm-chip .chev { width: 7px; height: 7px; flex: none; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .45; }
.tm-chip.has-val { color: var(--text); font-weight: 550; }
.tm-chip.tm-tag { --c: var(--primary); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--text); }
.tm-chip.tm-tag .dot { background: var(--c); }
.tm-chip.tm-tag:hover { background: color-mix(in srgb, var(--c) 24%, transparent); }
.tm-chip.tm-tag-add, #task-modal .tm-val .tm-chip:not(.has-val) { color: var(--muted); background: transparent; border-color: var(--border); border-style: dashed; }
.tm-chip.tm-tag-add:hover { color: var(--text-2); border-style: solid; }

/* popover s možnosťami */
.tm-pop {
  position: fixed; z-index: 40; min-width: 200px; max-width: 300px; max-height: 46vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 5px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .18);
  animation: tm-pop-in .13s ease-out;
}
@keyframes tm-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.tm-pop-it {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500;
  border-radius: 8px; cursor: pointer; text-align: left; min-height: 0;
}
.tm-pop-it:hover { background: var(--fill); }
.tm-pop-it.sel { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.tm-pop-it .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tm-pop-check { margin-left: auto; font-weight: 700; }
.tm-pop-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.tm-pop-cal { padding: 4px 6px 6px; }
.tm-pop-cal input { width: 100%; height: 34px; min-height: 0; font-size: 13px; padding: 0 10px; }
.tm-pop-time { display: flex; align-items: center; gap: 8px; padding-top: 0; }
.tm-pop-time span { font-size: 12.5px; font-weight: 600; color: var(--muted); flex: none; }
.tm-pop-time input { flex: 1; width: auto; }
.tm-pop-clear { color: var(--muted); }
#task-modal .tm-val .muted-hint { font-size: 12.5px; padding: 8px 0; }
#task-modal .tm-sec { display: flex; flex-direction: column; gap: 8px; }
#task-modal .tm-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
#task-modal .tm-sec textarea { min-height: 76px; resize: vertical; }
#task-modal #desc-preview { min-height: 76px; max-height: 40vh; }
#task-modal .tm-sec-h .view-switch { flex: none; width: auto; flex-basis: auto; order: 0; margin-left: auto; padding: 2px; gap: 2px; } /* mobilné .view-switch {width:100%} by pretieklo z hlavičky sekcie */
#task-modal .desc-tabs button { flex: none; padding: 3px 10px; font-size: 12px; min-height: 0; }
#task-modal .subtask-list:empty { display: none; }
#task-modal .tm-more { display: flex; flex-direction: column; gap: 8px; }
#task-modal .tm-more .det > summary { padding: 11px 14px; font-size: 13.5px; }

@media (pointer: coarse) {
  .tm-chip { height: 36px; min-height: 36px; font-size: 14px; }
  .tm-pop-it { padding: 11px 12px; font-size: 14.5px; }
  #task-modal .desc-tabs button { min-height: 30px; font-size: 13px; }
}
@media (max-width: 900px) {
  /* celá obrazovka bez viewport jednotiek: fixed + inset 0 vyplní okno v každom režime (Safari, PWA, Dock app) */
  #task-modal { position: fixed; inset: 0; width: auto; max-width: none; height: auto; max-height: none; margin: 0; border-radius: 0; padding: 0; }
  #task-modal form { padding-bottom: 0; }
  #task-modal .modal-head { padding: calc(12px + env(safe-area-inset-top)) 16px 10px; }
  #task-modal .modal-body { padding: 14px 16px 20px; gap: 16px; }
  #task-modal .modal-actions { position: static; }
  #task-modal .modal-actions .btn-primary { flex: 1; }
  #task-modal .tm-row { grid-template-columns: 70px 1fr; gap: 8px; }
  #task-modal .modal-kbd { display: none; }
}

/* ===== Detail cviku — sheet z rutiny / tréningu (overlay ako Život, nie <dialog>) ===== */
/* max-height v `%`, nie `vh` — .zivot-wrap je fixed inset:0, takže percento je z reálnej
   viditeľnej plochy. Vo `vh` skončí pätka sheetu (Nahradiť / Zmazať) pod systémovým pruhom. */
.exs-sheet {
  position: relative; width: 100%; max-width: 560px; max-height: 88%; display: flex; flex-direction: column;
  padding-top: 10px; background: var(--panel); color: var(--text); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: zivot-up .2s ease;
}
.exs-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--border); }
.exs-title { flex: 1; min-width: 0; }
.exs-title h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.exs-spec { font-size: 13px; color: var(--muted); margin-top: 3px; }
.exs-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding: 14px 16px; }
.exs-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.exs-hero { width: 100%; max-width: 420px; display: block; margin: 0 auto 12px; border-radius: var(--r-card); background: var(--fill); }
.exs-muscles { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; font-size: 14px; color: var(--muted); text-transform: capitalize; }
.exs-muscles b { color: var(--text); text-transform: none; }
.exs-last { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-2); font-size: 14px; }
.exs-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.exs-sets span { padding: 3px 9px; border-radius: 100px; background: var(--fill); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.exs-note { padding: 6px 0 4px; font-size: 13.5px; }
.exs-unlinked { margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r-card); font-size: 13.5px; color: var(--muted); }
.exs-libbtn { margin: 6px 0 4px; }
.rir-cal-wrap { margin-bottom: 4px; }
.rir-cal-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.rir-cal-tbl th, .rir-cal-tbl td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border); }
.rir-cal-tbl th:first-child, .rir-cal-tbl td:first-child { text-align: left; }
.rir-cal-tbl th { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.rir-over { color: var(--danger, #e74c3c); }
.rir-under { color: var(--accent, #3498db); }
.rir-cal-hint { font-size: 12px; margin-top: 8px; line-height: 1.5; }
.plan-ex-tap { cursor: pointer; touch-action: manipulation; }
.plan-ex-tap:active { background: var(--fill-2); }
.wk-ex-head { cursor: pointer; touch-action: manipulation; border-radius: 8px; }
.wk-ex-head:active { background: var(--fill-2); }
@media (min-width: 901px) { .exs-sheet { border-radius: var(--r-panel); max-height: 86%; } }

/* ===== Zaškrtávač v riadku úlohy: veľká plocha (label), nie 18 px štvorček =====
   Klik tesne vedľa checkboxu trafil .row a otvoril modál — na iPade sa tak úloha nedala odškrtnúť. */
.row-check-wrap { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin: -9px -6px -9px -9px; cursor: pointer; touch-action: manipulation; }
/* bez border-radius na wrape — zaoblený roh by hit-test pustil na .row; kruhové zvýraznenie nesie sám checkbox */
.row-check-wrap .row-check { width: 20px; height: 20px; margin: 0; border-radius: 50%; }
.row-check-wrap:hover .row-check { box-shadow: 0 0 0 7px var(--fill); }
@media (pointer: coarse) {
  .row-check-wrap { width: 44px; height: 44px; margin: -12px -8px -12px -12px; }
  .row-check-wrap .row-check { width: 24px; height: 24px; position: static; }
  .row-check-wrap .row-check::before { content: none; }
  .row-check-wrap:active .row-check { box-shadow: 0 0 0 9px var(--fill-2); }
}

/* Poistka pre modál úlohy: ak prehliadač dialóg po showModal() nevykreslí (výška 0 / mimo okna),
   JS pridá .layout-fallback a modál sa zobrazí ako obyčajný blok so scrollom celého dialógu. */
#task-modal.layout-fallback { display: block; height: auto; max-height: 90vh; overflow-y: auto; }
#task-modal.layout-fallback form, #task-modal.layout-fallback .modal-body { display: block; overflow: visible; height: auto; }
#task-modal.layout-fallback .modal-body > * + * { margin-top: 16px; }
/* Škola: pošta zo STU webmailu */
.mail-quota { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.mail-quota.warn { border-color: var(--danger-text); }
.mail-quota .muted { color: var(--muted); font-size: 12.5px; }
.mail-quota-bar { flex: 1; min-width: 120px; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.mail-quota-bar span { display: block; height: 100%; background: var(--primary); }
.mail-quota.warn .mail-quota-bar span { background: var(--danger-text); }
.mail-badge { font-size: 11.5px; font-weight: 600; color: var(--danger-text); border: 1px solid var(--border); border-radius: 100px; padding: 2px 9px; margin-left: 6px; }
.mail-list { display: grid; gap: 8px; }
.mail-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.mail-row.imp-dolezite { border-left-color: var(--danger-text); }
.mail-row.imp-sum { opacity: .62; }
.mail-row.unseen .mail-subj { font-weight: 700; }
.mail-main { min-width: 0; }
.mail-subj { font-size: 14.5px; overflow-wrap: anywhere; }
.mail-course { display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.mail-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.mail-deadline { color: var(--danger-text); }
.mail-sum { font-size: 13.5px; margin-top: 5px; }
.mail-action { font-size: 13.5px; margin-top: 4px; color: var(--primary); font-weight: 600; }
.mail-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
@media (max-width: 600px) { .mail-row { flex-direction: column; } .mail-acts { flex-direction: row; width: 100%; } }

/* Strava: Billa zľavy z letáku */
.bl-meta { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.bl-list { display: grid; gap: 10px; }
.bl-cat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; }
.bl-cat-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bl-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.bl-cat .bl-item:first-of-type { border-top: 0; }
.bl-item.protein .bl-name { font-weight: 600; }
.bl-name { min-width: 0; overflow-wrap: anywhere; }
.bl-unit { color: var(--muted); font-size: 12px; }
.bl-price { flex: none; font-variant-numeric: tabular-nums; }
.bl-price s { color: var(--muted); font-size: 12px; }
.bl-off { color: var(--danger-text); font-weight: 700; font-size: 12px; }
.bl-add-shop { flex: none; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--primary); font-size: 15px; line-height: 1; padding: 0 6px; cursor: pointer; }
.bl-add-shop:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Detail jedla (editor v sheete) */
.fs-head { border-bottom: 1px solid var(--border); }
.fs-body { display: flex; flex-direction: column; gap: 10px; }
.fs-foot { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.fs-save { flex: 1; }
.fs-del { flex: none; }
.fs-close { flex: none; }
.fs-meal { margin: 2px 0; }

/* Šablóny jedálnička */
.tpl-save-day { flex: none; }
.tpl-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.tpl-item:last-child { border-bottom: 0; }
.tpl-item-body { flex: 1; min-width: 0; }
.tpl-item-name { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tpl-item-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tpl-item-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.tpl-del { color: var(--muted); }
.tpl-del:hover { color: var(--danger-text); }
.tpl-dlg-hint { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.tpl-mode { margin: 4px 0 2px; }

/* Detail jedla z jedálne */
.cant-ds-sheet { background: var(--panel); }
.cant-ds-close { flex: none; }
.cant-ds-head { border-bottom: 1px solid var(--border); }
.cant-ds-opt-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 5px; padding: 2px 7px; margin-bottom: 6px; }
.cant-ds-title { font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.cant-ds-sub { margin-top: 4px; }
.cant-ds-body { display: flex; flex-direction: column; gap: 12px; }
.cant-ds-macros { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; padding: 10px 12px; border-radius: var(--r-control); background: var(--fill); }
/* odhad musí byť vizuálne odlíšený — nie je to presné číslo */
.cant-ds-est { border: 1px dashed color-mix(in srgb, #f59e0b 55%, transparent); background: color-mix(in srgb, #f59e0b 8%, transparent); }
.cant-ds-est-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
.cant-ds-est-name { font-size: 12.5px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.cant-ds-history { font-size: 13px; color: var(--muted); }
.cant-ds-hist-count { font-weight: 700; color: var(--primary); }
.cant-ds-order { font-size: 13px; color: var(--muted); }
.cant-ds-foot { display: flex; gap: 8px; }
.cant-ds-pick { flex: 1; }
.cant-eat, .cant-uneat { flex: none; }

/* Moje jedlá (vlastná knižnica) */
.cf-sect-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cf-add-btn { flex: none; }
.cf-library { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.cf-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cf-item:last-child { border-bottom: 0; }
.cf-item:hover { background: var(--fill); }
.cf-item-body { flex: 1; min-width: 0; }
.cf-item-name { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.cf-item-macros { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cf-edit { color: var(--muted); flex: none; }
.cf-edit:hover { color: var(--primary); }
.cf-empty { padding: 10px 4px; }
.cf-chip { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }

/* editor vlastného jedla (sheet) */
.cf-edit-form { display: flex; flex-direction: column; gap: 10px; }
.cf-label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.cf-input {
  padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--fill); color: var(--text); font: inherit; font-size: 14px; min-width: 0;
}
.cf-input:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.cf-macros-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cf-macros-row .cf-input { text-align: center; }
.cf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.cf-check input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex: none; margin: 0; }
.cf-save-row { display: flex; gap: 8px; justify-content: flex-end; }

/* Nákupný zoznam */
.shop-add-form { display: flex; gap: 8px; margin: 8px 0 10px; }
.shop-add-form input {
  flex: 1; min-width: 0;
  padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--fill); color: var(--text); font: inherit; font-size: 14px;
}
.shop-add-form input:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.shop-list { display: flex; flex-direction: column; gap: 2px; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.shop-item:last-child { border-bottom: 0; }
.shop-item-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shop-name { font-size: 14px; overflow-wrap: anywhere; }
.shop-price { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-src { font-size: 11px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border-radius: 4px; padding: 1px 5px; }
.shop-check-wrap { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin: -8px -4px -8px -6px; cursor: pointer; touch-action: manipulation; }
.shop-check { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; flex: none; margin: 0; }
@media (pointer: coarse) { .shop-check-wrap { width: 44px; height: 44px; margin: -12px -6px -12px -10px; } }
.shop-clear-done { margin-top: 6px; }
.shop-note-inp {
  padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--fill); color: var(--text); font: inherit; font-size: 14px; width: 100%; min-width: 0;
}
.shop-note-inp:focus { outline: none; border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.shop-done .shop-name { text-decoration: line-through; color: var(--muted); }
.shop-del { color: var(--muted); }
.shop-del:hover { color: var(--danger-text); }
.shop-count { background: var(--primary); color: #fff; border-radius: 10px; font-size: 12px; font-weight: 700; padding: 1px 7px; margin-left: 6px; }
.shop-total { font-size: 13px; color: var(--muted); text-align: right; padding: 6px 0 2px; }
.shop-note-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin: 8px 0; }
.shop-note-label input { font-size: 14px; }

/* Dnes: návrh prechádzky v dlaždici Zdravie */
.walk-hint { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 10px; border-radius: 10px; background: var(--fill); color: var(--muted); font-size: 12.5px; }
.walk-hint.go { color: var(--text); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.walk-hint .sfi { width: 15px; height: 15px; flex: none; }

/* Svajp na riadku funguje aj myšou/trackpadom — horizontálny overscroll nesmie spúšťať históriu späť/vpred */
html, body { overscroll-behavior-x: none; }
.row-swipe .row { cursor: pointer; }

/* ===== Inbox z telefónu (sheet): kľúč pre skratku, návod, import IG exportu ===== */
.ibx-kv { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.ibx-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text); background: var(--fill); padding: 7px 9px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ibx-steps { margin: 4px 0 8px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.ibx-steps code, .ibx-p code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--fill); padding: 1px 6px; border-radius: 6px; }
.ibx-p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.ibx-file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px dashed var(--border); border-radius: var(--r-control); cursor: pointer; font-size: 14px; color: var(--text); }
.ibx-file input { display: none; }
.ibx-file .sfi { width: 16px; height: 16px; }
.ibx-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13.5px; color: var(--text); }
.ibx-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.linklike { border: none; background: none; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-decoration: underline; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; min-height: 0; }
@media (max-width: 900px) { .ibx-kv { grid-template-columns: 1fr; } .ibx-kv span { font-size: 12px; } }

/* ===== Držanie tela (Fitness) ===== */
.drz-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.drz-videos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.drz-video { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--fill); }
.drz-video:hover { border-color: var(--primary); }
.drz-vthumb { flex: none; width: 96px; height: 54px; border-radius: 8px; object-fit: cover; background: #000; }
.drz-vmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drz-vtitle { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.drz-vmeta { font-size: 12px; color: var(--muted); }
.drz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.drz-when { font-size: 15px; font-weight: 700; }
.drz-head .muted { font-size: 13px; margin-top: 2px; max-width: 46ch; }
.drz-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 4px; }
.drz-stats div { background: var(--fill); border-radius: 10px; padding: 8px 10px; text-align: center; }
.drz-stats b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.drz-stats span { font-size: 11.5px; color: var(--muted); }
.drz-hist { display: flex; flex-wrap: wrap; gap: 3px; margin: 10px 0 4px; }
.drz-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--fill); }
.drz-dot.on { background: var(--primary); }
.drz-list { display: grid; gap: 6px; margin: 12px 0 10px; }
/* Karta mala 9 cvikov + kalendár + dva odstavce vysvetlenia a zaberala pol obrazovky.
   Denná podstata (koľko minút, hotové?, séria) ostáva viditeľná, zvyšok je za ťuknutím. */
.drz-more { margin-top: 10px; }
.drz-more > summary {
  cursor: pointer; list-style: none; padding: 8px 10px; border-radius: var(--r-control);
  border: 1px solid var(--border); background: var(--fill);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.drz-more > summary::-webkit-details-marker { display: none; }
.drz-more > summary::after { content: ' ▾'; color: var(--muted); }
.drz-more[open] > summary::after { content: ' ▴'; }
.drz-more > summary:hover { border-color: var(--primary); }
.drz-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.drz-item:hover { background: var(--fill); }
.drz-name { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.drz-davka { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); background: var(--fill); border-radius: 8px; padding: 3px 9px; }
.drz-tilt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.drz-tilt.on { border-color: var(--primary); color: var(--primary); font-weight: 600; }
/* Na mobile sa riadok cviku NEROZKLADÁ pod seba — to z 9 cvikov spravilo 864 px, celú
   obrazovku len na zoznam. Namiesto toho mriežka: názov a dávka na prvom riadku vedľa seba,
   dôvod pod tým. `display: contents` na obale, aby sa jeho deti dostali priamo do mriežky. */
/* Riadok cviku je JEDEN riadok: názov vľavo, dávka vpravo. Vysvetlenie („načo to je") sa
   presunulo do detailu, ktorý sa aj tak otvára ťuknutím — deväť cvikov × dva riadky textu
   bolo cez tisíc pixelov, ktoré pri cvičení nikto nečíta. */
.drz-item { align-items: center; gap: 8px; min-height: 44px; padding: 7px 11px; }
.drz-name { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.25; }
.drz-davka { font-size: 11.5px; padding: 3px 8px; white-space: nowrap; }
.drz-tip { margin: 2px 2px 8px; font-size: 11.5px; color: var(--faint, var(--muted)); }
.exs-preco { padding: 11px 13px; border-radius: var(--r-control); background: var(--fill); font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.exs-preco b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* Výmena dňa v pláne (bike namiesto tréningu) */
.plan-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.plan-swap .muted { font-size: 12.5px; }
.tsch-day.is-swap { border-color: var(--primary); }
.tsch-day.is-swap .tsch-name s { color: var(--muted); font-size: 11px; }
.tsch-day.is-swap .tsch-mark { color: var(--primary); }

/* ===== Porovnanie tréningov v kategórii + zóny tepu ===== */
.sess-druh { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 100px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.sess-trend-text { font-size: 12.5px; color: var(--muted); margin-top: 4px; max-width: 62ch; }
.sess-verdikt { flex: none; align-self: center; font-size: 12px; font-weight: 700; border-radius: 100px; padding: 3px 10px; background: var(--fill); }
.sess-verdikt.good { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.sess-verdikt.low { color: var(--danger-text); background: color-mix(in srgb, var(--danger-text) 12%, transparent); }
.sess-verdikt.muted { color: var(--muted); }
/* Poradie tréningu v popupe po docvičení — rekord dostane zelený rám, aby bol vidno hneď. */
.porov-poradie {
  margin-bottom: 12px; padding: 11px 13px; border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--bg-2); font-size: 14.5px; line-height: 1.45;
}
.porov-poradie.je-rekord { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
/* Editor rozvrhu — riadok na hodinu, na mobile sa polia zalomia pod seba. */
.sche-den { margin-bottom: 14px; }
.sche-den-h {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; text-transform: capitalize; margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.sche-row {
  display: grid; grid-template-columns: 96px 1fr 84px 104px 32px;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
.sche-row input, .sche-row select {
  min-width: 0; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 14px;
}
.sche-del { padding: 4px 8px; color: var(--muted); }
.sche-del:hover { color: var(--danger-text); }
@media (max-width: 640px) {
  /* Päť stĺpcov sa na telefón nezmestí — čas a typ hore, predmet a miestnosť pod tým. */
  .sche-row { grid-template-columns: 96px 1fr 32px; grid-template-areas: 'cas typ del' 'subj subj subj' 'room room room'; }
  .sche-cas { grid-area: cas; }
  .sche-typ { grid-area: typ; }
  .sche-del { grid-area: del; }
  .sche-subj { grid-area: subj; }
  .sche-room { grid-area: room; }
  .sche-row { padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
}

.sess-diff { display: grid; gap: 4px; margin-bottom: 6px; }
.sess-diff-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: baseline; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.sess-diff-label { color: var(--muted); }
.sess-diff-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.sess-diff-prev { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sess-diff-chg { font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 66px; text-align: right; }
.sess-up { color: var(--success); }
.sess-down { color: var(--danger-text); }
.zone-list { display: grid; gap: 6px; margin-bottom: 6px; }
.zone-row { display: grid; grid-template-columns: minmax(96px, 26%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.zone-name { color: var(--muted); }
.zone-bar { height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.zone-fill { display: block; height: 100%; }
.zone-fill.z1 { background: #38bdf8; } .zone-fill.z2 { background: var(--success); } .zone-fill.z3 { background: #eab308; }
.zone-fill.z4 { background: #f97316; } .zone-fill.z5 { background: #ef4444; }
.zone-val { font-variant-numeric: tabular-nums; text-align: right; min-width: 68px; }
.zone-val small { display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 600px) {
  .sess-diff-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .sess-diff-prev, .sess-diff-chg { text-align: left; }
  .zone-row { grid-template-columns: 1fr auto; }
  .zone-bar { grid-column: 1 / -1; }
}

/* Zóny jednotlivého tréningu oproti zvyčajnému */
.sess-card { display: block; }
.sess-badge { font-size: 11px; font-weight: 600; border-radius: 100px; padding: 1px 8px; margin-left: 6px;
  border: 1px solid var(--border); color: var(--muted); vertical-align: 1px; }
.sess-badge.harder { color: var(--danger-text); border-color: var(--danger-text); }
.sess-badge.easier { color: var(--primary); border-color: var(--primary); }
.sess-zones { display: flex; gap: 2px; height: 6px; margin: 7px 0 5px; }
.sess-zones .sz { border-radius: 2px; min-width: 2px; }
.sess-vs { font-size: 12.5px; color: var(--muted); }
.sess-vs.muted { opacity: .75; }
.zone-fill.z0 { background: var(--muted); } .sess-zones .sz.z0 { background: var(--muted); }

/* Grafy zón a trendov */
.zone-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--muted); margin: 6px 0 4px; }
.zone-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.trend-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.trend-verdict { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.trend-verdict.good { color: var(--primary); }
.trend-verdict.low { color: var(--danger-text); }
.trend-verdict.muted { color: var(--muted); font-weight: 400; }
.trend-verdict .muted { font-weight: 400; color: var(--muted); }


/* Formulárové prvky vo flex riadku: `flex: 1` samo o sebe nestačí. Flex položka sa štandardne
   nezmenší pod svoju vnútornú šírku (min-width: auto), a <input> má tú vnútornú šírku veľkú —
   takže na 375 px riadok pretiekol a tlačidlo vedľa vypadlo mimo obrazovku. Na mobile sa to
   prejavilo na kalkulačke kotúčov aj na karte posilňovne, kde bol kôš 26 px za okrajom. */
.fit-plate-inputs input, .gym-name, .template-row select, .ical-url-row input { max-width: 100%; }

/* Dotykové ciele. Na myši je 25 px tlačidlo v poriadku, prstom sa doň netrafíš — Apple HIG
   žiada 44 pt. Platí len pre hrubý ukazovateľ (`pointer: coarse`), takže na desktope sa
   rozloženie nemení. Vizuálna veľkosť ostáva, zväčšuje sa len plocha na ťuknutie. */
@media (pointer: coarse) {
  .btn, .icon-btn, .food-chip, .kd-nudge, .drz-item, .fit-session, .mail-row { min-height: 44px; }
  /* v riadku nastavení má tlačidlo vlastný, nižší padding — min-height ho sám nezdvihne */
  .fit-setup-row .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .lib-filters .chip { min-height: 40px; }
  .btn.btn-sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .chk-dot { min-height: 42px; min-width: 42px; }
  /* riadky, ktoré sú celé klikateľné, potrebujú aj zvislý priestor */
  .school-doc, .lib-item, .bl-item { min-height: 44px; }
}

/* ===== Tréning: miesto, ukončenie, šírka na mobile =====
   Poznatky z prvého reálneho tréningu (9. 9. 2026). */

/* Miesto tréningu — dá sa prepnúť aj počas neho, lebo kde cvičím sa často
   ukáže až na mieste. Predtým bol výber len na úvodnej obrazovke Fitness. */
.wk-kde { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wk-kde select {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px;
  border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--fill); color: var(--text);
}
.wk-kde select:focus { outline: none; border-color: var(--primary); background: var(--input-bg); }
.wk-hotovo {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--success);
  background: var(--success-soft, rgba(52,199,89,.14)); padding: 6px 11px; border-radius: 100px;
}
.wk-hotovo .sfi { width: 13px; height: 13px; }

.wk-koniec-riadok { display: flex; gap: 10px; margin-top: 14px; }
.wk-koniec-riadok .wk-koniec { flex: 1; }
.wk-koniec-riadok .fit-del { flex: none; }

/* Strop záťaže na mieste — doma sa dá naložiť 100 kg a návrh na 110 je nezmysel. */
.gym-max { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.gym-max span { flex: none; }
.gym-maxload {
  width: 92px; min-width: 0; padding: 7px 10px; text-align: center;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--fill); color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums;
}
.gym-maxload:focus { outline: none; border-color: var(--primary); background: var(--input-bg); }

/* Šírka na mobile. `.module-view` mala 24 px po oboch stranách, čo je na 375 px
   telefóne 13 % obrazovky preč — riadok série sa tlačil do stredu. Zvislé
   odsadenie zostáva, orezáva sa len vodorovné. */
@media (max-width: 640px) {
  .module-view { padding-left: 12px; padding-right: 12px; padding-top: 14px; align-items: flex-start; }
  .fit-detail-head { gap: 8px; }
  .wk-set { grid-template-columns: 20px 1fr auto 1fr auto auto; gap: 6px; }
  .wk-reps, .wk-kg { padding: 9px 6px; font-size: 16px; }  /* 16 px = iOS pri fokuse nezoomuje */
  .wk-set .wk-rir { padding-left: 6px; padding-right: 4px; font-size: 13px; }
}

/* Presun tréningu medzi dňami ťahom priamo v rozvrhu.
   Myš ťahá natívne, dotyk po podržaní (320 ms) — bez podržania si iOS ťah
   privlastní pre scroll a presun sa nikdy nespustí. */
.tsch-tahaci { cursor: grab; touch-action: pan-y; }
.tsch-tahaci:active { cursor: grabbing; }
.tsch-tiahne { opacity: .35; }
.tsch-nad {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--panel)) !important;
  transform: scale(1.04);
}
.tsch-duch {
  position: fixed; z-index: 200; pointer-events: none;
  opacity: .92; transform: scale(1.06); box-shadow: var(--shadow-pop);
  border-color: var(--primary);
}
.tsch-day { transition: transform .12s ease, background .12s ease, border-color .12s ease; }
@media (prefers-reduced-motion: reduce) { .tsch-day { transition: none; } .tsch-nad { transform: none; } }
/* Bez tejto vety nikto neuhádne, že sa deň dá chytiť a potiahnuť. */
.tsch-hint { margin-top: 6px; font-size: 11.5px; color: var(--faint, var(--muted)); text-align: center; }
/* Tréningový profil — bez neho tréner háda, tak to musí byť vidieť. */
.tp-chyba { color: var(--warn-text, #ff9500); font-weight: 700; }
.tp-hint { margin: -4px 0 8px; font-size: 12px; }
.tp-dvojica { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ===== Notifikácie =====
   Obrazovka vznikla z toho, že Apple mesiace odmietal všetky notifikácie a v appke
   to nebolo nikde vidieť. Preto je stav doručenia pri každom type, nie schovaný. */
.notif-dlg .notif-form { display: flex; flex-direction: column; gap: 10px; max-height: 78vh; overflow-y: auto; }
.notif-stav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--fill);
}
.notif-stav.je-zap { border-color: var(--success); }
.notif-stav.nie-zap { border-color: var(--warn-text, #ff9500); }
.notif-stav .fit-sub { margin-top: 2px; }
.notif-ticho { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-ticho input {
  width: 130px; padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: var(--r-control); background: var(--fill); color: var(--text);
}
.notif-skupina { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.notif-row input { margin-top: 3px; flex: none; }
.notif-nazov { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.notif-nazov small { font-size: 11.5px; }
.notif-znak {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px;
  font-size: 10px; font-style: normal; font-weight: 700; background: var(--fill); color: var(--muted);
}
.nstav-ok { color: var(--success); }
.nstav-chyba { color: var(--danger, #ff3b30); }
.nstav-info { color: var(--muted); }
.notif-log { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.notif-log-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--separator); }
.notif-log-t { font-weight: 600; overflow-wrap: anywhere; }
.notif-log-d { grid-column: 1 / -1; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .notif-dlg .notif-form { max-height: 82vh; } }

/* ===== Nastavenia ako obrazovka =====
   Predtým zoznam schovaný pod kolieskom v pätke bočného panela — na mobile tri kliky
   a nikto ho nenašiel. Riadky sú plnohodnotné dotykové ciele, nie textové odkazy. */
.nast-grp {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--panel); overflow: hidden;
}
.nast-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; min-height: 56px; text-align: left; cursor: pointer;
  background: none; border: none; color: var(--text); font: inherit;
  border-top: 1px solid var(--separator);
}
.nast-grp .nast-row:first-child { border-top: none; }
.nast-row:hover { background: var(--fill); }
.nast-row:active { background: var(--fill); }
.nast-row > .sfi { flex: none; width: 19px; height: 19px; color: var(--muted); }
.nast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nast-text b { font-size: 15px; font-weight: 600; }
.nast-text small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.nast-sip { flex: none; color: var(--faint, var(--muted)); font-size: 18px; line-height: 1; }
.nast .fit-sect-h:first-of-type { margin-top: 4px; }

/* ===== Tréner: denná rada =====
   Tréner musí prehovoriť sám. Chat, ktorý čaká na otázku, je encyklopédia, nie tréner. */
.tren-karta {
  margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-1);
  border-left: 3px solid var(--primary);
}
.tren-karta.je-uprava { border-left-color: var(--warn-text, #ff9500); }
.tren-karta.je-volno { border-left-color: var(--muted); }
.tren-hlava {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.tren-hlava .sfi { width: 13px; height: 13px; }
.tren-nadpis { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tren-veta { margin-top: 4px; font-size: 14px; line-height: 1.5; }
.tren-uprava {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-control);
  background: var(--fill); font-size: 13px; line-height: 1.45;
}
.tren-pozn { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tren-pozn li { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
/* Ponuka ubrať tréning — objaví sa len keď je pripravenosť dole. Plán prepisuje človek, nie appka. */

/* ===== Mobil: menej scrollovania =====
   Jaro 10. 9. 2026: „celé UI je strašne roztiahnuté, človek musí veľa scrollovať."
   Fitness mal na 375 px 1465 px výšky, z toho 864 na deväť riadkov cvikov. Nič sa
   neuberá z obsahu, len z prázdneho miesta okolo neho. */
@media (max-width: 640px) {
  .fit-head { margin-bottom: 10px; }
  .fit-head h2 { font-size: 22px; }
  .fit-sect-h { margin: 12px 0 6px; }   /* 2px odsadzovalo nadpis inak než karty pod ním */
  .drz-card { padding: 11px; }
  /* Hlavička ako mriežka: „10 min · 9 cvikov" a tlačidlo vedľa seba na prvom riadku,
     popis pod tým cez celú šírku. Pri flex-wrap si tlačidlo brávalo vlastný riadok (+45 px). */
  .drz-head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 3px; }
  .drz-head > div { display: contents; }
  .drz-when { grid-column: 1; grid-row: 1; }
  .drz-head .btn { grid-column: 2; grid-row: 1; }
  .drz-head .muted { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; line-height: 1.4; margin-top: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .drz-list { gap: 4px; margin: 10px 0 8px; }

  /* Dve veľké dlaždice na „0/3" a pomlčku vyzerali ako nedorobená appka.
     Jeden riadok povie to isté a ušetrí 40 px. */
  .drz-stats { display: flex; gap: 0; margin: 10px 0 2px; background: var(--fill); border-radius: 10px; overflow: hidden; }
  .drz-stats div { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px;
    background: none; border-radius: 0; padding: 7px 8px; }
  .drz-stats div + div { border-left: 1px solid var(--separator); }
  .drz-stats b { display: inline; font-size: 15px; }
  .drz-stats span { font-size: 11px; }

  .tren-karta { padding: 12px 13px; margin-bottom: 10px; }
  .tren-nadpis { font-size: 16px; }
  .tren-veta { font-size: 13.5px; }
  .tren-uprava { margin-top: 8px; padding: 8px 10px; font-size: 12.5px; }
  .tren-pozn { margin-top: 8px; }
}

/* Dnes na mobile: dlaždice boli stavané pre desktop. Rovnaký obsah, menej vzduchu —
   pri deviatich dlaždiciach to je približne štvrť obrazovky scrollovania menej. */
@media (max-width: 640px) {
  .tile { padding: 12px 13px; }
  .tile-head { font-size: 15.5px; margin-bottom: 7px; }
  .tile-head .sfi { width: 17px; height: 17px; }
  .tile-stats b { font-size: 17px; }
  .tile-stats span { font-size: 10.5px; }
  .tile-line { padding: 3px 0; font-size: 13px; }
}

/* ===== Prehľad (dashboard) na mobile ===== */
@media (max-width: 640px) {
  .dashboard { padding: 12px; gap: 10px; }
  /* Štyri čísla hore brali 216 px, lebo popisky sa lámali na dva riadky pri veľkom odsadení.
     Rovnaká informácia, o tretinu nižšie. */
  .dash-cards { gap: 8px; grid-template-columns: 1fr 1fr; }
  .dash-card { padding: 11px 12px; }
  .dash-card b { font-size: 22px; }
  .dash-card span { font-size: 11.5px; line-height: 1.25; display: block; }

  .dash-panel { padding: 13px; }
  .dash-panel h4 { margin-bottom: 9px; font-size: 12px; letter-spacing: .2px; }
  .dash-chart { height: 116px; gap: 6px; }
  .bar-wrap label { font-size: 10px; }
  .prio-split { gap: 8px; }
  .prio-box { padding: 9px 6px; }
  .prio-box b { font-size: 19px; }
}
/* Šport z hodiniek v páse rozvrhu: „⇄ Padel" = náhrada tréningu, „+ Bike" = aktivita navyše. */
/* Štítok odohratého športu. `anywhere` lámalo „Chôdza / turistika" po písmenách do stĺpca
   a roztiahlo celý pás do výšky — dlhší názov sa radšej odreže, celé je v title. */
.tsch-akt {
  font-size: 9.5px; line-height: 1.15; color: var(--primary); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsch-akt-viac { opacity: .75; }

/* ---------- BTC dlaždica + detail ---------- */
.btc-hero { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.btc-price { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.btc-chg { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.btc-chg.up { color: var(--success-text); }
.btc-chg.dn { color: var(--danger-text); }
.btc-chart-wrap { margin: 2px -4px 8px; }
.btc-chart { width: 100%; display: block; }
.btc-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.btc-line-proj { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .85; vector-effect: non-scaling-stroke; }
.btc-cone { fill: var(--primary); opacity: .12; }
.btc-now { stroke: var(--separator); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.btc-dot { fill: var(--primary); }
.btc-lbl { font-size: 10px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.btc-lbl-mid { fill: var(--primary); font-weight: 700; }
.btc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.btc-stat { background: var(--fill); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.btc-stat-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 700; }
.btc-stat-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.btc-stat-v.up { color: var(--success-text); }
.btc-stat-v.dn { color: var(--danger-text); }
.btc-stat-v.warn { color: var(--warn-text, #ff9f0a); }
.btc-digest { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.btc-sect { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 14px 0 6px; }
.btc-note { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 1.4; }
.btc-proj-row { display: grid; grid-template-columns: 52px 1fr 1fr 1fr; gap: 6px; padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--separator); }
.btc-proj-row:last-of-type { border-bottom: 0; }
.btc-proj-row .mid { font-weight: 700; color: var(--primary); }
.btc-proj-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); border-bottom: 1px solid var(--separator); }
.btc-proj-head .mid { color: var(--faint); font-weight: 700; }
.btc-spark { margin: 8px 0 2px; }
.btc-digest-body { font-size: 14px; line-height: 1.5; }
.btc-points { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.btc-ranges { display: flex; gap: 4px; margin: 0 0 10px; }
.btc-range {
  flex: 1; border: 0; background: var(--fill); color: var(--muted); border-radius: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 4px 0; cursor: pointer;
}
.btc-range.on { background: var(--primary-soft); color: var(--primary); }
.btc-stance { font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-left: 8px; padding: 2px 7px; border-radius: 5px; background: var(--fill); color: var(--muted); }
.btc-stance.up { background: rgba(48,209,88,.14); color: var(--success-text); }
.btc-stance.dn { background: rgba(255,69,58,.14); color: var(--danger-text); }
.btc-facts { margin-top: 4px; }
.btc-fact { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 0; font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--separator); }
.btc-fact:last-child { border-bottom: 0; }
.btc-fact-src { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.btc-hero-detail { margin: 2px 0 10px; }
.btc-hero-detail .btc-price { font-size: 30px; }
.btc-stats-detail { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.btc-stats-detail .btc-stat { padding: 8px 10px; }
.btc-proj-row { grid-template-columns: 52px 1fr 1fr 1fr; }
.btc-proj-row span:not(:first-child) { text-align: right; }
.btc-proj-row span:first-child { color: var(--faint); font-size: 11.5px; font-weight: 700; align-self: center; }
@media (max-width: 420px) { .btc-stats-detail { grid-template-columns: repeat(2, 1fr); } }

/* ── Jarvis ────────────────────────────────────────────────────────────────
   Sheet-overlay, nie <dialog>.showModal() — v Safari web appke z Docku sa
   dialóg s dvh výškou vykreslil ako 0 px. Rozmery preto vh (desktop) a
   position:fixed; inset:0 (mobil), nikdy dvh. */
.sheet-overlay { position: fixed; inset: 0; z-index: 310; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* ── Jarvis overlay & panel ── */
.jv-overlay { position: fixed; inset: 0; z-index: 320; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jv-panel { display: flex; flex-direction: column; width: min(580px, 100vw); height: min(74vh, 680px); background: var(--panel); border: 1px solid var(--border); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.35); overflow: hidden; }
.jv-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); background: var(--panel); }
.jv-header-left { display: flex; align-items: center; gap: 12px; }
.jv-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: #fff; flex-shrink: 0; }
.jv-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.jv-subtitle { font-size: 12px; color: var(--muted); line-height: 1.2; }
.jv-header-right { display: flex; align-items: center; gap: 4px; }
.jv-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background .15s, color .15s; }
.jv-icon-btn:hover { background: var(--hover); color: var(--text); }
.jv-messages { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 4px; }
.jv-msg { display: flex; flex-direction: column; max-width: 88%; }
.jv-msg-jarvis { align-self: flex-start; align-items: flex-start; }
.jv-msg-ja { align-self: flex-end; align-items: flex-end; }
.jv-bubble { padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.55; }
.jv-msg-jarvis .jv-bubble { background: var(--card); color: var(--text); border-bottom-left-radius: 4px; }
.jv-msg-ja .jv-bubble { background: #6366f1; color: #fff; border-bottom-right-radius: 4px; }
.jv-chip { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--muted); background: var(--hover); border-radius: 20px; padding: 2px 8px; }
.jv-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--panel); }
.jv-input { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 10px 14px; border-radius: 22px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); outline: none; transition: border-color .15s; }
.jv-input:focus { border-color: #6366f1; }
.jv-mic-btn { font-size: 20px; }
.jv-send-btn { background: #6366f1; color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.jv-send-btn:hover { background: #4f46e5; }
#jv-mic.jv-nahrava { animation: jv-puls 1.1s ease-in-out infinite; color: #f87171; }
@keyframes jv-puls { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { #jv-mic.jv-nahrava { animation: none; outline: 2px solid var(--accent); } }
@media (max-width: 640px) {
  .jv-panel { width: 100%; height: calc(100vh - var(--tabbar-h, 56px) - env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .jv-bubble { font-size: 16px; }
  .jv-send-btn { min-width: 44px; min-height: 44px; }
  .jv-icon-btn { min-width: 44px; min-height: 44px; }
}
@media (min-width: 641px) {
  .jv-overlay { align-items: center; }
  .jv-panel { border-radius: 20px; }
}

/* ---------- chat s agentmi (COO / CTO) ---------- */
/* Pozor: rozmery cez vh + fixed na mobile, NIKDY dvh — v Safari web appke
   z Docku sa dialóg s dvh vykreslil ako 0 px (pozri CLAUDE.md). */
.agenti-sheet { display: flex; flex-direction: column; width: min(680px, 94vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); overflow: hidden; }
.agenti-sheet .sheet-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.agenti-sheet .sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; }
.agenti-sheet .ag-foot { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.agenti-sheet .ag-foot textarea { flex: 1 1 auto; min-width: 0; resize: none; max-height: 120px; font: inherit; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

.ag-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 14px; cursor: pointer; }
.ag-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ag-rola { font-size: 10px; font-weight: 700; letter-spacing: .05em; opacity: .7; }

.ag-log { display: flex; flex-direction: column; gap: 14px; }
.ag-intro { font-size: 14px; line-height: 1.5; }
.ag-msg { font-size: 15px; line-height: 1.55; max-width: 92%; }
.ag-msg.me { align-self: flex-end; text-align: right; }
.ag-msg.ag { align-self: flex-start; }
.ag-kto { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ag-text { white-space: pre-wrap; word-break: break-word; }
.ag-msg.me .ag-text { display: inline-block; text-align: left; background: var(--accent); color: #fff; padding: 9px 12px; border-radius: 14px 14px 4px 14px; }
.ag-msg.ag .ag-text { background: var(--bg); border: 1px solid var(--border); padding: 10px 13px; border-radius: 14px 14px 14px 4px; }
.ag-msg.err .ag-text { border-color: var(--danger, #e5484d); color: var(--danger, #e5484d); background: transparent; }
.ag-msg.pending .ag-text { opacity: .75; }
.ag-text p:first-child { margin-top: 0; }
.ag-text p:last-child { margin-bottom: 0; }
.ag-text code { font-size: .92em; }

@media (max-width: 640px) {
  .agenti-sheet { width: 100%; max-width: none; max-height: none; position: fixed; inset: 0; border-radius: 0; border: 0; }
  .ag-msg { max-width: 100%; }
}

/* ── Refactored inline styles ─────────────────────────────────────────── */
/* tile-hidden-bar label */
.tile-hidden-label { font-size: 12px; }

/* skeleton width variants */
.sk-w-90 { width: 90%; }
.sk-w-70 { width: 70%; }
.sk-w-45 { width: 45%; }

/* dot colour helpers */
.dot-school { background: var(--m-school); }
.dot-muted  { background: var(--muted); }
.dot-danger { background: var(--danger-text); }

/* agent status dot (size + shape; colour comes from agentStav class) */
.agent-status-dot { width: 8px; height: 8px; border-radius: 50%; }

/* macrobar fill <i> — display/height/bg already set by .mgbar i rule; class is for semantic clarity */
.mgbar-fill { /* visual styles inherited from .macros-grid .mg .mgbar i */ }

/* today header right-side flex row */
.today-head-row { display: flex; align-items: center; gap: 10px; }

/* walk hint without top margin */
.walk-hint-notop { margin-top: 0; }

/* praca tile: title truncation */
.pr-title-inline { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Týždeň v číslach — wvol */
.wvol-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.wvol-day { display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; background: var(--card); border-radius: 8px; text-align: center; }
.wvol-day.wvol-empty { opacity: .38; }
.wvol-wd { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: .04em; }
.wvol-val { display: flex; flex-direction: column; gap: 1px; }
.wvol-val b { display: block; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.wvol-val span { font-size: 9.5px; color: var(--muted); }
@media (max-width: 480px) {
  .wvol-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .wvol-day { padding: 6px 2px; }
  .wvol-val b { font-size: 12px; }
  .wvol-val span { font-size: 8.5px; }
}

/* ===== Trend váhy a príjmu (.ntr-) ===== */
.ntr-wrap { margin: 8px 0 16px; }
.ntr-panels { display: flex; flex-direction: column; gap: 8px; }
.ntr-svg { width: 100%; display: block; overflow: visible; }
.ntr-dot-w { fill: var(--primary); opacity: .7; }
.ntr-ma7-w { stroke: var(--primary); stroke-width: 2; }
.ntr-bar-k { fill: color-mix(in srgb, var(--primary) 40%, var(--muted)); }
.ntr-ma7-k { stroke: #f59e0b; stroke-width: 2; }
.ntr-goal-line { stroke: #22c55e; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ntr-grid { stroke: var(--border); stroke-width: 0.5; }
.ntr-tick { font-size: 9px; fill: var(--muted); font-family: var(--font-mono, monospace); }
.ntr-label { font-size: 9px; fill: var(--muted); }
.ntr-loading { padding: 10px 4px; }
.ntr-corr { font-size: 11px; color: var(--muted); margin-top: 4px; }