/* ============================================================
   GymQuest — Premium Athlete Performance Dashboard
   Visual redesign only. All selectors used by JS/HTML preserved.
   ============================================================ */

:root {
  /* ---- surfaces: deep graphite, not pure black ---- */
  --bg:         #0C0D10;
  --bg-elev:    #101216;
  --surface:    #17191F;
  --surface-2:  #20232B;
  --surface-3:  #262A33;

  /* ---- lines ---- */
  --border:        #2A2E38;
  --border-strong: #353A46;

  /* ---- text ---- */
  --text:      #F4F1EA;
  --text-dim:  #8D96A5;
  --text-faint:#5E6673;

  /* ---- accents: orange = performance, blue = info ---- */
  --accent:       #FF5A36;
  --accent-strong:#D9492A;
  --accent-soft:  rgba(255, 90, 54, 0.12);
  --accent-line:  rgba(255, 90, 54, 0.45);
  --blue:       #6D9CFF;
  --blue-soft:  rgba(109, 156, 255, 0.14);
  --blue-line:  rgba(109, 156, 255, 0.45);

  /* ---- feedback ---- */
  --danger:      #E5484D;
  --danger-soft: rgba(229, 72, 77, 0.12);
  --danger-line: rgba(229, 72, 77, 0.4);

  /* ---- calendar day status (semantic only, never the theme) ---- */
  --ok:        #4E9F6B;                    /* muted forest green - completed workout */
  --ok-soft:   rgba(78, 159, 107, 0.14);
  --ok-line:   rgba(78, 159, 107, 0.45);
  --miss:      #C77E86;                    /* soft rose - deliberately quieter than --danger */
  --miss-soft: rgba(199, 126, 134, 0.10);
  --miss-line: rgba(199, 126, 134, 0.34);

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);

  /* ---- geometry: sharper, sportier ---- */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-full: 999px;

  /* ---- spacing scale (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- typography ---- */
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px;
  --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 42px;
  --fw-med: 600; --fw-bold: 700; --fw-black: 800;
  --track-wide: 0.08em;

  /* ---- layout ---- */
  --maxw: 600px;
  --tabbar-h: 64px;
}

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

html, body { min-height: 100dvh; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic",
               "Geeza Pro", Tahoma, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Micro-label utility (uppercase tracked) ===== */

.micro-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ===== Header ===== */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}

.app-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.header-level {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}

.btn-icon {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-icon:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }

.btn-icon:disabled {
  color: var(--text-faint);
  opacity: 0.45;
  cursor: default;
}

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

/* ===== Main / screens ===== */

.app-main {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  padding: var(--sp-2) var(--sp-5) calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-6));
}

/* ===== Storage warning (only when a write really failed) ===== */

.storage-warning {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}

.screen-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}

/* ===== Today date + ISO week (compact subtitle under the screen title) ===== */

.today-date {
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* ===== Cards ===== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}

/* hero panel on Today (weekly goal) — accent hairline, quiet depth */
.card:has(#week-count) {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-inline-start: 2px solid var(--accent);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.card-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.card-sub {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.next-plan {
  text-align: center;
  margin: var(--sp-3) 0 0;
}

.card-note {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}

/* ===== Streak card: value + supporting line on narrow phones =====
   #streak-value is a flex item inside .card-head and was white-space: nowrap, so its
   automatic minimum size was the FULL width of the string: it could neither shrink nor
   wrap. On a 320px phone that pushed the text ~120px outside the card and made the whole
   page scroll sideways ("🔥 1 week in a row" needs ~360px, the card offers 239px).
   Everything here is scoped to the streak card, so the other .card-value elements
   (weekly "0 of 3", progress stats) are untouched. */
.card:has(#streak-value) .card-head {
  flex-wrap: wrap;          /* the value drops onto its own line instead of overflowing */
  row-gap: var(--sp-1);
}

.card:has(#streak-value) .card-title,
#streak-value {
  min-width: 0;             /* let the flex item shrink below its content width */
}

#streak-value {
  /* 20px floor, ~22px on a 320px phone, the original 32px from ~457px up.
     Measured: the longest value ("🔥 12 weeks in a row" / "🔥 12 týždňov v rade")
     stays on one line down to 24.25px at 320px, so this keeps a safety margin. */
  font-size: clamp(20px, 7vw, var(--fs-2xl));
  white-space: normal;      /* one line while it fits, wraps cleanly when it cannot */
  overflow-wrap: break-word;
  max-width: 100%;
}

#streak-sub {
  /* 13px floor: smaller than the value, never tiny; 3.2vw scales it up on wider phones */
  font-size: clamp(var(--fs-sm), 3.2vw, var(--fs-md));
  line-height: 1.5;
  text-wrap: balance;       /* two balanced lines rather than one ragged line */
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ===== Progress bars ===== */

.progress {
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--r-full);
  transition: width 0.4s ease;
}

/* ===== Buttons ===== */

.btn {
  border: none;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  min-height: 52px;
  padding: 0 var(--sp-5);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.btn:active { transform: translateY(1px); }

.btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: #16130F;
  box-shadow: var(--shadow-1);
}

.btn-primary:hover:not(:disabled) { background: #FF6B4A; }

.btn-primary:disabled {
  background: var(--surface-2);
  color: var(--text-faint);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }

.btn-danger {
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) { background: rgba(240, 97, 109, 0.2); }

.btn-block { width: 100%; }

.btn-big {
  font-size: var(--fs-lg);
  min-height: 60px;
  width: 100%;
  margin-top: var(--sp-2);
  box-shadow: var(--shadow-2);
}

/* Stacked full-width action buttons keep a clear gap so their rounded edges never
   touch and two actions never look joined. Scoped to block/big buttons and action
   rows only — deliberately NOT a blanket margin on every `.btn`. */
.btn-block + .btn-block,
.btn-big + .btn-block,
.btn-block + .btn-big,
.card-sub + .btn-block,
.btn-block + .row-actions {
  margin-top: var(--sp-3);
}

/* `.row-actions` already carries a 12 px bottom margin: don't double it before a
   following block button, and give the primary Finish button 12 + 4 = 16 px. */
.row-actions + .btn-block { margin-top: 0; }
.row-actions + .btn-big { margin-top: var(--sp-1); }

/* ===== Motivation ===== */

.motivation-card {
  border-inline-start: 2px solid var(--border-strong);
  background: var(--surface);
}

.motivation-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-med);
  color: var(--text);
  line-height: 1.6;
}

/* ===== Plan selector (mobile-first grid) =====
   Názov plánu má prednosť pred ovládacími prvkami: v bežnom režime karta obsahuje
   LEN názov, takže text dostane celú šírku karty. Uchopovadlo a ceruzka sa ukážu
   až v režime úprav (`.plan-chips.managing`). */

.plan-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* Karta plánu = jedna bunka mriežky. */
.chip-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.chip {
  flex: 1 1 0;
  min-width: 90px;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover { background: var(--surface-2); }

.chip.active {
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--accent);
}

.chip.recommended::after {
  content: " ✦";
  color: var(--blue);
}

/* Karta v selektore plánov: celá šírka pre názov, vycentrovaný text,
   prirodzené zalamovanie po slovách. */
.plan-chips .chip {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  text-align: center;
  line-height: 1.3;
  /* Slová sa nelámu v strede; `break-word` zasiahne len vtedy, keď sa jedno
     slovo naozaj nezmestí – vtedy radšej zalomí, než aby pretieklo mimo karty. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Ovládacie prvky sú v bežnom režime skryté, takže názov je vycentrovaný
   v CELEJ karte (predtým ho posúvali 26 px vľavo a 44 px vpravo). */
.chip-wrap > [hidden] { display: none; }

.chip-edit {
  flex: 0 0 auto;
  width: 44px;
  min-height: 48px;
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
  border-inline-start: none;
  font-size: 13px;
  color: var(--text-faint);
  background: var(--surface);
}

/* ===== Režim úprav plánov =====
   Jeden plán na riadok: veľký cieľ pre prst a názov, ktorý sa stále zmestí. */

.plan-chips.managing { grid-template-columns: minmax(0, 1fr); }

.plan-chips.managing .chip {
  text-align: start;
  padding-inline: var(--sp-3);
}

/* Susediace prvky tvoria jeden celok – karta vtedy nemá vlastné zaoblenie. */
.plan-chips.managing .chip-wrap .chip {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.plan-chips.managing .chip-drag,
.plan-chips.managing .chip-edit { display: inline-flex; }

/* Rovnako široké ovládanie na oboch stranách drží názov opticky v strede. */
.plan-chips.managing .chip-drag { width: 40px; }
.plan-chips.managing .chip-edit { width: 40px; }

/* ===== Tlačidlá pod selektorom plánov ===== */

.plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.plan-actions .btn { flex: 1 1 150px; min-width: 0; overflow-wrap: break-word; }

.plan-manage-hint[hidden] { display: none; }

/* Pod 300 px (pod každým testovaným telefónom) je jedna kolóna čitateľnejšia. */
@media (max-width: 300px) {
  .plan-chips { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .plan-actions .btn { padding: 0 var(--sp-3); }
}

/* Na širších obrazovkách sa režim úprav vráti k dvom kolónam. */
@media (min-width: 560px) {
  .plan-chips.managing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Plan header: name + visible rename button ===== */

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.plan-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plan-head-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.plan-head-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.plan-edit-btn {
  flex: 0 0 auto;
  min-height: 44px;
}

/* ===== Compact flame hint (active workout) =====
   Jedna malá vysvetľujúca vrstva nad zoznamom cvikov — nie varovný box, nie tlačidlo. */

.failure-hint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: start;
  overflow-wrap: break-word;
}

/* Tlmená pomocná veta v editore plánu (jedna pre celú sekciu, neopakuje sa pri každom cviku). */

.edit-hint {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: start;
  margin-bottom: var(--sp-3);
  overflow-wrap: break-word;
}

/* ===== Trvanie tréningu (aktívny tréning) =====
   Jeden kompaktný riadok: malý popis vľavo, čas vpravo. Zámerne nie je väčší
   ani výraznejší než názov aktívneho tréningu a nekoliduje s časovačom oddychu. */

.duration-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  text-align: start;
}

.duration-row[hidden] { display: none; }

.duration-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.duration-value {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.duration-note {
  flex: 1 1 100%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  color: var(--text-dim);
  overflow-wrap: break-word;
}

.duration-note[hidden] { display: none; }

/* Trvanie v histórii a v detaile dňa */

.history-duration {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.day-workout .history-duration { font-size: var(--fs-xs); color: var(--text-dim); }

.modal .modal-duration {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.modal .modal-duration[hidden] { display: none; }

/* ===== Exercise list (training log) ===== */

.exercise-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.exercise {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.exercise-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

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

.exercise-meta {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.exercise-meta b { color: var(--blue); font-weight: var(--fw-bold); }

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

.set-btn {
  min-width: 52px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.set-btn:hover { border-color: var(--border-strong); color: var(--text); }

.set-btn.done {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* ===== Summary bar ===== */

.summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.summary-bar b { color: var(--accent); font-weight: var(--fw-black); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

/* ===== Stats row (Pokrok) ===== */

.stats-row {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.stat-card {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}

.stat-value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--sp-1);
}

/* ===== Lists (records + history) ===== */

.record-row,
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.record-row:last-child,
.history-row:last-child {
  border-bottom: none;
}

.record-name,
.history-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

.record-meta,
.history-meta {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.record-weight {
  font-weight: var(--fw-black);
  font-size: var(--fs-md);
  color: var(--blue);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.history-xp {
  font-weight: var(--fw-black);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.history-main { flex: 1; min-width: 0; }
.history-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }

.history-detail {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  margin-top: 2px;
  line-height: 1.5;
}

.history-note {
  color: var(--text);
  font-size: var(--fs-sm);
  font-style: italic;
  margin-top: var(--sp-1);
}

.history-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.btn-icon-sm {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: 13px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icon-sm:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

.empty-state {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  padding: var(--sp-2) 0;
}

/* ===== Comparison hint ===== */

.compare-hint {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.compare-hint .up { color: var(--accent); font-weight: var(--fw-bold); }
.compare-hint .down { color: var(--danger); font-weight: var(--fw-bold); }

/* ===== Achievements ===== */

.achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.achievement {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.achievement.unlocked {
  opacity: 1;
  filter: none;
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: var(--shadow-1);
}

.achievement-icon {
  font-size: 24px;
  display: block;
  margin-bottom: var(--sp-2);
  line-height: 1;
}

.achievement-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  display: block;
  letter-spacing: -0.01em;
}

.achievement.unlocked .achievement-name { color: var(--accent); }

.achievement-desc {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  display: block;
  margin-top: var(--sp-1);
  line-height: 1.45;
}

.achievement-date {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  display: block;
  margin-top: var(--sp-1);
}

.achievement-xp {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-wide);
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.achievement.unlocked .achievement-xp { color: var(--accent); }

/* ===== Calendar ===== */

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

.calendar-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  /* minmax(0, 1fr) lets the columns shrink below their content minimum, so the grid
     can never overflow its card at any viewport width. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-weekdays { margin-bottom: var(--sp-2); }

.calendar-weekday {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cal-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Square, sized purely by the column width: a fixed min-height would force a minimum
     WIDTH through aspect-ratio and make the 7-column grid overflow on narrow phones. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  min-width: 0;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button.cal-cell:hover { border-color: var(--border-strong); }

/* completed workout */
.cal-cell.cal-done {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}

/* past day without a workout - quiet, factual, never alarming */
.cal-cell.cal-miss {
  background: var(--miss-soft);
  border-color: var(--miss-line);
  color: var(--miss);
}

/* neutral: future days never look missed */
.cal-cell.cal-future {
  background: var(--surface);
  border-color: transparent;
  color: var(--text-dim);
}

/* today: accent ring, independent of workout state so both read at once */
.cal-cell.cal-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  color: var(--accent);
}

.cal-cell.cal-done.cal-today { color: var(--ok); }

.cal-cell.cal-selected { outline: 2px solid var(--border-strong); outline-offset: 1px; }

/* Deň z vedľajšieho mesiaca: celé políčko je výrazne stlmené (stav zelená/červená ostáva
   rozpoznateľný, ale nesplýva s aktuálnym mesiacom) a každý taký deň má pod číslom krátky názov
   mesiaca (pod číslom, aby ho neprekryl odznak počtu tréningov v rohu). */
.cal-cell { flex-direction: column; }
.cal-cell.cal-outside { cursor: pointer; opacity: 0.45; }
button.cal-cell.cal-outside:hover { opacity: 0.7; }
.cal-cell.cal-outside .cal-num { color: var(--text-faint); }
.cal-mon {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-top: 0;
  color: var(--text-dim);
}

.cal-badge {
  position: absolute;
  top: 1px;
  inset-inline-end: 1px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  border-radius: var(--r-full);
  background: var(--ok);
  color: #0C0D10;
  font-size: 8px;
  font-weight: var(--fw-black);
  line-height: 13px;
  text-align: center;
}

.calendar-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.legend-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}

.legend-swatch.swatch-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.legend-swatch.swatch-miss { background: var(--miss-soft); border-color: var(--miss-line); }
.legend-swatch.swatch-today { background: transparent; border-color: var(--accent); }

/* ===== Day detail modal ===== */

#modal-day .modal {
  max-height: 85vh;
  overflow-y: auto;
}

.day-status {
  font-weight: var(--fw-bold);
  color: var(--text-dim);
}

.day-status-done { color: var(--ok); }
.day-status-miss { color: var(--miss); }
.day-status-today { color: var(--accent); }

.day-body { text-align: start; }

.day-workout {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
}

.day-workout + .day-workout { margin-top: var(--sp-3); }

.day-workout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.day-workout-name { font-weight: var(--fw-black); font-size: var(--fs-md); }
.day-workout-xp { color: var(--accent); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.day-workout-date { color: var(--text-faint); font-size: var(--fs-xs); margin-top: 2px; }

.day-ex {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) 0 0;
}

.day-ex-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.day-ex-meta { font-size: var(--fs-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }

.day-achievements { margin-top: var(--sp-4); }
.day-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
}
.day-ach { font-size: var(--fs-sm); color: var(--text-dim); }

/* ===== Update banner (quiet strip pinned above the tab bar) ===== */

.update-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 15;                       /* below modals (20), above page content */
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-3);
  border-top: 1px solid var(--accent-line);
  box-shadow: var(--shadow-2);
}

.update-banner[hidden] { display: none; }

.update-text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.35;
}

.update-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
}

/* keep the last bit of content reachable while the strip is showing */
body.has-update-banner .app-main {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-6) + 68px);
}

/* ===== Tab bar (premium, safe-area aware) ===== */

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: rgba(16, 16, 20, 0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
  max-width: var(--maxw);
  margin: 0 auto;
  z-index: 10;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

.tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 64px;
  transition: color 0.15s ease;
}

/* active overline indicator */
.tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tab.active { color: var(--accent); }
.tab.active::before { opacity: 1; }

/* Mobile tab bar: five EQUAL columns.
   min-width: 0 removes the flex item's min-content floor, which used to hold the 78px
   "MOTIVATION" tab at 78px and squeeze the other four (a 3.6px imbalance at 375px).
   Icons are anchored to a fixed top offset instead of being vertically centred as a
   group, so all five stay on the same line even if a label wraps on a tiny screen.
   Desktop (>430px) is untouched. */
@media (max-width: 430px) {
  .tab {
    min-width: 0;
    justify-content: flex-start;
    padding: 14px 2px 0;
    gap: 2px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  /* A label can never grow wider than its own tab, stays centred if it wraps, and
     wraps as a BLOCK: inside a flex container the text becomes an anonymous flex item
     whose automatic minimum size ignores overflow-wrap, so it would overflow instead. */
  .tab > span[data-i18n] {
    max-width: 100%;
    text-align: center;
    line-height: 12px;
    overflow-wrap: break-word;
  }
}

/* Extremely narrow (320px-class): reclaim the last pixels so the longest label still
   fits on one line - and if it ever does not, the wrap support above keeps it inside
   the tab and the icon on the same line as the others. */
@media (max-width: 340px) {
  .tab {
    padding-inline: 0;
    letter-spacing: 0;
  }
}

.tab-icon {
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tab-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ===== Modals ===== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  z-index: 20;
}

/* skrytý modal musí byť skutočne skrytý (author rule prekoná display:flex) */
.modal-backdrop[hidden] {
  display: none;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-2);
}

.modal h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}

.modal p {
  color: var(--text-dim);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}

.modal .modal-xp {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.modal .modal-msg {
  font-weight: var(--fw-med);
  color: var(--text);
}

.modal .modal-achievements {
  font-size: var(--fs-sm);
  color: var(--blue);
  font-weight: var(--fw-bold);
}

.modal-note {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
}

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

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

/* Pozvánka do Community: zatváracie tlačidlo v rohu (v RTL na druhej strane). */
.modal.modal-invite { position: relative; padding-top: var(--sp-8); }
.modal-invite-close {
  position: absolute;
  top: var(--sp-2);
  inset-inline-end: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
}
.modal-invite-icon { font-size: 2.5rem; line-height: 1; margin-bottom: var(--sp-3); }
@media (max-width: 430px) {
  #modal-community-invite .modal-actions { flex-direction: column-reverse; }
}

/* Potvrdzovacie tlačidlá (generický modal) sa na úzkych displejoch zalomia pod seba.
   Dvojica "Cancel | Import data" resp. "Zrušiť | Importovať dáta" sa totiž pri 320–430 px
   nezmestí vedľa seba do jedného riadku a popis deštruktívnej akcie by sa lámal do dvoch riadkov. */
@media (max-width: 430px) {
  #modal-generic .modal-actions,
  #modal-fullbody .modal-actions { flex-direction: column; }

  /* Dlhé slovenské popisky ("Importovať dáta", "Načítať ukážkové dáta") sa do dvoch
     stĺpcov pri 320 px nezmestia – menšie vnútorné odsadenie ich udrží vnútri modálu. */
  .modal-actions .btn { padding: 0 var(--sp-3); }
  #modal-settings .modal { padding-inline: var(--sp-4); }
  /* "Štandardný" je najdlhší popisok – menší font ho udrží vnútri chipu. */
  .len-chip { font-size: var(--fs-xs); padding: 8px 6px; }
}

/* ===== Výber typu nového plánu ===== */

.choice-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  text-align: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.choice-card:hover { background: var(--surface-3); border-color: var(--border-strong); }

.choice-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--accent);
}

.choice-desc {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.4;
}

/* ===== Full Body builder ===== */

.modal.modal-fb {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  max-height: calc(100dvh - var(--sp-5) * 2);
  padding: 0;
  text-align: start;
  overflow: hidden;
}

.fb-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.fb-head h3 { margin-bottom: var(--sp-1); }
.fb-head .modal-label { margin-top: var(--sp-3); }

.fb-sub {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 0;
}

/* Dlhý zoznam cvikov sa posúva tu – pätička s akciami zostáva na mieste. */
.fb-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
}

.fb-foot {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border);
}

.fb-foot .modal-actions { margin-top: var(--sp-3); }

.fb-source { margin-bottom: var(--sp-4); }

.fb-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.fb-source-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

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

.fb-mini {
  background: none;
  border: none;
  padding: 4px 0;
  min-height: 32px;
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.fb-mini:hover { text-decoration: underline; }

.fb-ex {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 48px;
  text-align: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fb-ex[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.fb-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: transparent;
  font-size: 13px;
  font-weight: var(--fw-black);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fb-ex[aria-pressed="true"] .fb-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #16130F;
}

.fb-ex-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.fb-ex-meta {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fb-empty { font-size: var(--fs-sm); color: var(--text-faint); }

.fb-count {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fb-hint,
.fb-error { margin-top: var(--sp-1); }

.fb-hint { color: var(--text-dim); }

.fb-error {
  color: var(--danger);
  font-weight: var(--fw-bold);
}

.modal-label {
  display: block;
  text-align: start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--sp-3) 0 var(--sp-1);
}

/* Popisok sa v režime výberu cvikov skrýva – bez tohto pravidla by ho `display: block`
   prepísal a zostal by viditeľný. */
.modal-label[hidden] { display: none; }

.modal-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 10px 12px;
  min-height: 44px;
}

.modal-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

textarea.modal-input { resize: vertical; }

/* ===== Edit panel (plan editor) ===== */

.edit-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}

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

.edit-head {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.edit-head .modal-input { flex: 1 1 auto; min-width: 0; }

.edit-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
}

.edit-row.invalid { border-color: var(--danger); }

.edit-row input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  /* 16 px: iPhone (Safari aj appka z plochy) inak pri ťuknutí do poľa priblíži celú stránku a späť ju neoddiali. */
  font-size: 16px;
  padding: 8px 10px;
  min-height: 40px;
}

.edit-row input:focus { outline: none; border-color: var(--border-strong); }

.edit-row .edit-name { flex: 2 1 140px; min-width: 120px; }
.edit-row .edit-num { flex: 0 1 64px; width: 64px; font-variant-numeric: tabular-nums; }

.edit-error-msg {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  font-weight: var(--fw-bold);
}

/* ===== Goal chips (1–7 segmented row) ===== */

.goal-chips {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--sp-3) 0;
}

.goal-chip {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.goal-chip:hover { border-color: var(--border-strong); color: var(--text); }

.goal-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ===== Weekly goal: current value + validation ===== */

.goal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.goal-error { color: var(--danger); font-weight: var(--fw-bold); }

/* ===== Nastavenie: zvuk po skončení pauzy ===== */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  text-align: start;
}

.setting-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-main .card-title { font-size: var(--fs-sm); }
.setting-main .card-sub { font-size: var(--fs-xs); line-height: 1.4; overflow-wrap: break-word; }

.setting-control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.setting-state {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Prepínač: 60×44 dotyková plocha, viditeľná dráha je 52×32 vykreslená cez ::before. */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 6px;
  width: 52px;
  height: 32px;
  box-sizing: border-box;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch-knob {
  position: absolute;
  top: 10px;
  inset-inline-start: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch[aria-checked="true"]::before {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.switch[aria-checked="true"] .switch-knob {
  transform: translateX(20px);
  background: var(--accent);
}

/* ===== Dĺžka zvuku po skončení pauzy ===== */

.sound-length { margin: var(--sp-2) 0 var(--sp-3); text-align: start; }

.sound-length[hidden] { display: none; }

.sound-length-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
}

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

.len-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.len-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Test sound: neaktívne pri vypnutom zvuku + krátke vysvetlenie a chybové hlásenie. */

.modal #btn-test-sound:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.modal .test-sound-hint,
.modal .test-sound-error {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: start;
  overflow-wrap: break-word;
}

.modal .test-sound-hint { color: var(--text-faint); }
.modal .test-sound-error { color: var(--danger); font-weight: var(--fw-bold); }

/* Settings je dlhý formulár – na malom displeji sa posúva, aby boli tlačidlá vždy dosiahnuteľné. */
#modal-settings .modal {
  max-height: calc(100dvh - var(--sp-5) * 2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Rest timer (compact athlete tool) ===== */

.timer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-1);
}

.timer-bar.done { border-color: var(--accent-line); }
.timer-label { color: var(--text-faint); font-size: var(--fs-sm); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: var(--fw-bold); }
.timer-time { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.timer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.timer-chip {
  min-height: 44px;
  /* Pevný podiel (flex: 1 1 0) by všetky predvoľby natlačil do jedného riadku.
     S min-width sa ďalšie predvoľby zalomia na druhý riadok a zostanú čitateľné. */
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 100%;
  padding: 10px 8px;
  font-variant-numeric: tabular-nums;
  /* Dlhý vlastný názov sa skráti, ale celý zostáva v title aj aria-label. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Správa predvolieb časovača ===== */

.preset-manage {
  margin-bottom: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: start;
}

.preset-manage[hidden] { display: none; }

.preset-rows { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.preset-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.preset-row-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: break-word; }
.preset-row-time { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.preset-row-actions { display: flex; gap: var(--sp-1); flex: 0 0 auto; }
.preset-row-actions .btn-icon-sm { min-width: 44px; min-height: 44px; }

.preset-form {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--surface);
  text-align: start;
}

.preset-form[hidden] { display: none; }
.preset-form .custom-title { display: block; margin-bottom: var(--sp-2); }

.preset-offer {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.preset-offer[hidden] { display: none; }
.preset-offer-text { margin-bottom: var(--sp-1); }

.ct-ok { color: var(--accent); font-weight: var(--fw-bold); }
.ct-ok[hidden] { display: none; }

.timer-chip-custom.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ===== Vlastný čas pauzy ===== */

.custom-timer {
  margin-bottom: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: start;
}

.custom-timer[hidden] { display: none; }

.custom-title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}

.custom-fields {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
}

.custom-field { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }

.custom-field label {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: var(--fw-bold);
}

.custom-field input {
  width: 76px;
  min-height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  padding: 6px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.custom-field input:focus { outline: none; border-color: var(--border-strong); }

.custom-preview {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ct-error { color: var(--danger); font-weight: var(--fw-bold); }

.custom-start { width: 100%; margin-top: var(--sp-2); }

.row-actions {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* ===== History edit modal rows ===== */

.he-ex-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.he-ex-row .he-name { flex: 1 1 100px; font-size: var(--fs-sm); font-weight: var(--fw-bold); min-width: 80px; }
.he-ex-row .he-label { font-size: var(--fs-xs); color: var(--text-faint); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.he-ex-row input {
  flex: 0 1 70px;
  width: 70px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 6px 8px;
  min-height: 36px;
  font-variant-numeric: tabular-nums;
}

.he-ex-row input:focus { outline: none; border-color: var(--border-strong); }

/* ===== Sets to failure (plan editor) ===== */

.edit-failure { flex: 1 1 100%; margin-top: var(--sp-2); }

.edit-failure-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
}

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

.failure-chip {
  min-width: 40px;
  min-height: 40px;
  padding: 8px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.failure-chip:hover { border-color: var(--border-strong); color: var(--text); }

.failure-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.failure-chip-none { min-width: auto; padding: 8px 12px; }

/* ===== Per-set failure toggle (active workout) ===== */

.set-item { display: flex; align-items: stretch; gap: 4px; }

.set-item .set-btn { flex: 0 0 auto; }

.set-fail {
  min-width: 40px;
  min-height: 44px;
  padding: 0 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.set-fail:hover { border-color: var(--border-strong); }

/* naplánované zlyhanie = len jemný náznak, nikdy nie hotové zlyhanie */
.set-fail.planned {
  border-style: dashed;
  border-color: var(--accent-line);
  color: var(--accent);
  opacity: 0.85;
}

.set-fail.active {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  opacity: 1;
}

/* ===== Váha a opakovania jednotlivej série (zmena počas tréningu) ===== */
.set-weight, .set-reps, .drop-weight, .drop-reps {
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.set-weight:hover:not(:disabled), .set-reps:hover:not(:disabled), .drop-weight:hover:not(:disabled), .drop-reps:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.set-reps, .drop-reps { min-width: 40px; }
.set-weight.changed, .set-reps.changed { border-color: var(--blue, var(--accent-line)); color: var(--blue, var(--accent)); }
.set-weight-editor {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}
.set-weight-editor .set-weight-input, .set-weight-editor .set-reps-input { width: 5.5em; min-height: 40px; margin: 0; text-align: center; }
.set-weight-editor .btn { min-height: 40px; }
.set-weight-unit { color: var(--text-dim); font-size: var(--fs-sm); }
.set-weight-note { flex: 1 0 100%; margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }

/* ===== Failure info in history and calendar day detail ===== */

.failure-note {
  color: var(--accent);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.day-ex-failure {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ===== Uchopovadlá a ťahanie poradia =====
   Ťahanie je postavené na Pointer Events (funguje aj na dotykových obrazovkách).
   `touch-action: none` na uchopovadle zabráni skrolovaniu stránky počas ťahania. */

.drag-handle,
.chip-drag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: inherit;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.drag-handle {
  width: 40px;
  min-height: 40px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
}

.chip-drag {
  width: 26px;
  min-height: 48px;
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
  border-inline-end: none;
  font-size: var(--fs-sm);
}

.drag-handle:active,
.chip-drag:active { cursor: grabbing; }

.edit-row.dragging,
.chip-wrap.dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Nástroje riadku editora: uchopovadlo + prístupné tlačidlá Posunúť vyššie/nižšie. */
.edit-tools {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  flex: 0 0 auto;
}

.edit-move {
  width: 32px;
  height: 40px;
  border-radius: var(--r-sm);
  font-size: 13px;
}

.btn-from-plans { margin-top: var(--sp-2); }

/* ===== Jednostranné cvičenie: nastavenie v editore plánu ===== */

.edit-side { flex: 1 1 100%; margin-top: var(--sp-2); }

.edit-side-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--text-dim);
  cursor: pointer;
}

.edit-side-toggle input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  accent-color: var(--accent);
}

.edit-side-start {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.edit-side-start[hidden] { display: none; }

.side-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  overflow-wrap: break-word;
  cursor: pointer;
}

.side-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ===== Jednostranné cvičenie počas tréningu =====
   Každá strana je vlastný riadok na celú šírku: popis "Séria 1 — Ľavá" a vedľa neho
   samostatné Hotovo a Zlyhanie. Nikdy nevzniká vodorovné posúvanie. */

.exercise-side-note {
  margin: calc(-1 * var(--sp-1)) 0 var(--sp-2);
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.set-item.side-row { flex: 1 1 100%; align-items: center; }

.set-side-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  overflow-wrap: break-word;
}

/* ===== Jednostranné cvičenie v histórii a v detaile dňa ===== */

.history-side-note {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.day-ex-completed {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.he-ex-row .he-side {
  flex: 1 1 100%;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ===== Voľba jazyka (Nastavenia + picker) ===== */

.setting-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  text-align: start;
}

.setting-block .card-title { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.setting-block .card-sub { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.setting-block .btn { margin-top: var(--sp-2); }
.setting-block[hidden] { display: none; }

/* "O aplikácii" / credits block at the bottom of Settings: readable wrapped line. */
.about-app .card-sub { line-height: 1.5; }

.lang-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-1);
  text-align: start;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-med);
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lang-item:hover { background: var(--surface-3); border-color: var(--border-strong); }

.lang-item.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-bold);
}

.lang-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: transparent;
  font-size: 13px;
  font-weight: var(--fw-black);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-item.active .lang-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #16130F;
}

.lang-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ===== RTL (arabčina) =====
   Väčšina rozloženia je postavená na logických vlastnostiach (border-inline-*,
   inset-inline-*, text-align: start, flex), takže sa v RTL preklopí sama.
   Tu je len to, čo sa logicky vyjadriť nedá. */

[dir="rtl"] .switch[aria-checked="true"] .switch-knob {
  transform: translateX(-20px);
}

/* Číselné hodnoty musia zostať čitateľné a nezrkadliť sa v arabskom texte:
   "3 × 10 · 50 كغ", "00:42:13", "+22 XP" sa čítajú zľava doprava. */
[dir="rtl"] .duration-value,
[dir="rtl"] .timer-time,
[dir="rtl"] .exercise-meta,
[dir="rtl"] .set-btn,
[dir="rtl"] .record-weight,
[dir="rtl"] .history-xp,
[dir="rtl"] .card-value,
[dir="rtl"] .stat-value,
[dir="rtl"] .day-ex-meta,
[dir="rtl"] .cal-num,
[dir="rtl"] .cal-badge {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ===== Lišta pripomienky zálohy =====
   Rovnaká ukotvená pozícia ako lišta aktualizácie, ale nikdy sa nezobrazujú
   obe naraz (pozri backupBlocked). */

.backup-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 14;                       /* pod lištou aktualizácie (15), nad obsahom */
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-3);
  border-top: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
}

.backup-banner[hidden] { display: none; }

.backup-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.backup-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  overflow-wrap: break-word;
}

.backup-body,
.backup-meta,
.backup-note {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.backup-meta { font-variant-numeric: tabular-nums; }

.backup-note[hidden] { display: none; }

.backup-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.backup-btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
}

.backup-close { flex: 0 0 auto; width: 34px; height: 34px; font-size: 13px; }

/* Posledný kus obsahu musí zostať dosiahnuteľný, keď je lišta zobrazená. */
body.has-backup-banner .app-main {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-6) + 96px);
}

@media (max-width: 430px) {
  .backup-banner { padding-inline: var(--sp-3); gap: var(--sp-2); }
  .backup-actions { flex-direction: column-reverse; align-items: stretch; }
  .backup-btn { width: 100%; }
}

/* ===== Podpohľady v Pokroku (Progress / Telo / Jedlo) ===== */

.subtabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.subtab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.subtab.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.subview[hidden] { display: none; }

/* ===== Prepínače jednotiek a metrík ===== */

.unit-toggle { display: flex; gap: 4px; flex: 0 0 auto; }

.unit-chip {
  min-height: 34px;
  padding: 6px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
}

.unit-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

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

.metric-chip {
  min-height: 36px;
  padding: 6px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.metric-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ===== Súhrn, história a riadky meraní ===== */

.measure-summary { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }

.measure-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
}

.measure-row:last-child { border-bottom: none; }
.measure-name { font-size: var(--fs-sm); color: var(--text-dim); min-width: 0; overflow-wrap: break-word; }
.measure-value { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.measure-delta { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.measure-entry {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.measure-entry:last-child { margin-bottom: 0; }
.measure-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.measure-entry-date { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.measure-entry-values { font-size: var(--fs-sm); color: var(--text-dim); font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: break-word; }
.measure-entry-note { font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; margin-top: 2px; overflow-wrap: break-word; }
.measure-entry-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

/* ===== Graf – vlastné SVG, žiadna knižnica ===== */

.chart-box { width: 100%; margin: var(--sp-2) 0; }
.chart-svg { width: 100%; height: 140px; display: block; }
.chart-area { fill: var(--accent-soft); stroke: none; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); }

/* ===== Formulárové polia (miery, kalórie, jedlo) ===== */

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.field-wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.field label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  overflow-wrap: anywhere;
}
.field input, .field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--border-strong); }
.field-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; overflow-wrap: break-word; }

.form-error { color: var(--danger); font-weight: var(--fw-bold); }

.inline-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  cursor: pointer;
  text-align: start;
}
.inline-check input { width: 20px; height: 20px; min-height: 20px; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }

.modal.modal-form { text-align: start; max-height: calc(100dvh - var(--sp-5) * 2); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal.modal-form h3 { text-align: start; }

/* ===== Denník jedla ===== */

.day-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.day-nav-label { font-size: var(--fs-md); font-weight: var(--fw-bold); text-align: center; min-width: 0; overflow-wrap: break-word; }
.food-totals { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-2); overflow-wrap: break-word; }

.food-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.food-row:last-child { border-bottom: none; }
.food-row-main { min-width: 0; flex: 1 1 auto; }
.food-row-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: break-word; }
.food-row-meta { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.food-row-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

/* ===== Tipy ===== */

.tips-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: start;
  cursor: pointer;
}
.tips-caret { color: var(--text-faint); transition: transform 0.15s ease; }
.tips-toggle[aria-expanded="true"] .tips-caret { transform: rotate(180deg); }
.tips-body { margin-top: var(--sp-3); }
.tips-body[hidden] { display: none; }
.tip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tip-list li { display: flex; flex-direction: column; gap: 2px; }
.tip-list strong { font-size: var(--fs-sm); color: var(--text); }
.tip-list span { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; overflow-wrap: break-word; }

.calorie-range {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: var(--sp-2) 0;
  overflow-wrap: break-word;
}

/* ===== Upozornenie na veľkosť uložených dát ===== */

.storage-notice {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.5;
  text-align: start;
  overflow-wrap: break-word;
}
.storage-notice[hidden] { display: none; }

@media (max-width: 300px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Knižnica cvikov a detail cviku ===== */

.modal.modal-sheet {
  text-align: start;
  max-width: 460px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--sp-4) * 2);
  overflow: hidden;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.sheet-head h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  min-width: 0;
  padding: 0;
  overflow-wrap: break-word;
}

/* Zatváracie tlačidlo musí zostať dosť veľké na ťuknutie prstom. */
.sheet-head .btn-icon { min-width: 44px; min-height: 44px; flex: 0 0 auto; }

.sheet-search {
  padding: var(--sp-3) var(--sp-4) 0;
  flex: 0 0 auto;
}

.sheet-search input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 8px 10px;
}

.sheet-search input:focus { outline: none; border-color: var(--border-strong); }

.sheet-scroll {
  padding: var(--sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

.sheet-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text);
  margin: var(--sp-4) 0 var(--sp-1);
  text-align: start;
}

.sheet-label:first-child { margin-top: 0; }

.sheet-note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0 0 var(--sp-2);
  text-align: start;
  overflow-wrap: break-word;
}

.sheet-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 var(--sp-2);
  text-align: start;
  overflow-wrap: break-word;
}

.lib-filters {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin: var(--sp-2) 0;
}

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

.lib-row, .alt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.lib-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.lib-row-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: break-word; }
.lib-row-meta { font-size: var(--fs-xs); color: var(--text-faint); overflow-wrap: break-word; }
.lib-row-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 auto; justify-content: flex-end; max-width: 45%; }

.lib-tag {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--text-faint);
  background: var(--surface-3);
  border-radius: var(--r-full);
  padding: 3px 7px;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.lib-row-own { cursor: pointer; }

.alt-row { flex-direction: column; align-items: flex-start; min-height: 48px; }
.alt-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: break-word; }
.alt-why { font-size: var(--fs-xs); color: var(--text-faint); overflow-wrap: break-word; }

.meta-grid { display: flex; flex-direction: column; }

.meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
}

.meta-row:last-child { border-bottom: none; }
.meta-label { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--track-wide); flex: 0 0 auto; }
.meta-value { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: end; overflow-wrap: break-word; min-width: 0; }

/* ===== Schéma telesnej polohy (vlastné SVG) ===== */

/* ===== Ilustrácia cviku (vlastné SVG) ===== */

.fig-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.fig-svg { width: 100%; height: auto; display: block; }
.fig-caption { margin-top: 0; }

/* Telo: vzdialené končatiny tmavšie, blízke svetlejšie = objem, nie plochá čiara. */
.fig-body { stroke-linecap: round; stroke-linejoin: round; }

.fig-far { fill: none; stroke: #6f7482; stroke-width: 9; }
.fig-near { fill: none; stroke: #c6cbd7; stroke-width: 10; }
.fig-work { fill: none; stroke: var(--accent); stroke-width: 10; }

.fig-torso {
  fill: #b6bcc9;
  stroke: #b6bcc9;
  stroke-width: 3;
  stroke-linejoin: round;
}

.fig-neck { fill: none; stroke: #b6bcc9; stroke-width: 7; }
.fig-head { fill: #c6cbd7; }
.fig-foot { fill: none; stroke: #c6cbd7; stroke-width: 6; }
.fig-hand { fill: #c6cbd7; }

/* Náčinie */
.fig-bar { fill: none; stroke: #9aa1b0; stroke-width: 3.4; stroke-linecap: round; }
.fig-plate { fill: #7c8290; stroke: #a7adba; stroke-width: 1.4; }
.fig-plate-sm { fill: #6d7280; }
.fig-bench-pad { fill: none; stroke: #8d93a2; stroke-width: 9; stroke-linecap: round; }
.fig-post { fill: none; stroke: #767c8a; stroke-width: 4; }
.fig-post-base { fill: none; stroke: #767c8a; stroke-width: 5; stroke-linecap: round; }
.fig-dipbars .fig-bar { stroke-width: 3.4; }
.fig-band-line { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.fig-anchor { fill: none; stroke: #767c8a; stroke-width: 3; }
.fig-cable-line { fill: none; stroke: #9aa1b0; stroke-width: 2.4; stroke-dasharray: 4 3; }
.fig-pulley { fill: #a7adba; }
.fig-stack { fill: #5f6472; }
.fig-box-body { fill: #454a56; stroke: #5f6472; stroke-width: 2; }
.fig-mat { fill: #454a56; }

/* Prostredie */
.fig-ground { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.fig-props { fill: none; stroke: #4b505c; stroke-width: 4; stroke-linecap: round; }
.fig-props-thin { fill: none; stroke: #3f434e; stroke-width: 3; stroke-linecap: round; }

.fig-arrow-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.fig-arrow-head { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Galéria ukážok ===== */

.media { margin-bottom: var(--sp-3); }

.media-stage {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.media-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.media-track::-webkit-scrollbar { display: none; }

.media-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: var(--sp-2) var(--sp-2) 0;
  box-sizing: border-box;
  text-align: center;
}

.media-slide .fig-svg { max-height: 200px; }

/* Fotografia alebo video + voliteľná šípka smeru pohybu (pozícia v % obrázka). */
.media-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.media-frame img, .media-frame video { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; }
.media-frame video { background: #000; }
.media-arrow {
  position: absolute;
  width: 26px;
  height: 26px;
  color: var(--accent);
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 12, 0.62);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
}

.media-prev { inset-inline-start: var(--sp-1); }
.media-next { inset-inline-end: var(--sp-1); }
.media-nav:disabled { opacity: 0.32; cursor: default; }
.media-nav[hidden] { display: none; }

.media-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1) 0;
}

.media-dots { display: flex; gap: 6px; flex: 0 1 auto; }
.media-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--border-strong);
}
.media-dot.active { background: var(--accent); }
.media-count { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.media-caption { font-size: var(--fs-sm); color: var(--text); margin: var(--sp-2) 0 0; overflow-wrap: break-word; }
.media-credit { font-size: var(--fs-xs); color: var(--text-faint); margin: 2px 0 0; overflow-wrap: break-word; }
.media-note { font-size: var(--fs-xs); color: var(--text-faint); margin: 2px 0 0; overflow-wrap: break-word; }

/* Bez skutočnej fotky či videa: krátka, čistá správa namiesto rámčeka galérie. */
.media-none {
  font-size: var(--fs-sm, 0.95rem);
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0 0 var(--sp-3, 12px);
  text-align: start;
  overflow-wrap: break-word;
}

/* Vlastné médiá: kompaktné ovládanie pod galériou + pridanie/limity/poznámka. */
.media-personal { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.media-personal[hidden] { display: none; }
.media-personal .media-personal-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  min-height: 34px;
}
.media-personal-add { margin: var(--sp-2) 0 var(--sp-3); }
.media-limit, .media-privacy, .media-status {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.5;
  margin: 4px 0 0;
  overflow-wrap: break-word;
}
.media-status { color: var(--text); }
.media-status[hidden] { display: none; }

/* Voľba aktivity, domáci/vonkajší tréning a záznam aktivity. */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.mode-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-3) var(--sp-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text); font: inherit; cursor: pointer; min-height: 76px;
}
.mode-btn:active { border-color: var(--accent); }
.mode-icon { font-size: 22px; line-height: 1; }
.mode-label { font-size: var(--fs-sm); text-align: center; overflow-wrap: break-word; }
.loc-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.loc-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text);
  font: inherit; cursor: pointer; text-align: start;
}
.loc-name { font-weight: var(--fw-bold); overflow-wrap: break-word; }
.loc-meta { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }
.act-elapsed {
  font-size: 40px; font-weight: var(--fw-bold); letter-spacing: 1px; text-align: center;
  color: var(--text); font-variant-numeric: tabular-nums; margin: var(--sp-2) 0;
}
.act-hint { text-align: center; font-size: var(--fs-xs); color: var(--text-faint); margin: 0 0 var(--sp-2); }
.act-kind-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-1) 0 var(--sp-2); }

/* Fotky progresu (lokálne, súkromné) – mriežka, prezeranie a porovnanie. */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.photo-cell {
  display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: none;
  color: var(--text); font: inherit; cursor: pointer; text-align: start;
}
.photo-thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-date { font-size: var(--fs-xs); color: var(--text-dim); }
.photo-view { font-size: var(--fs-xs); color: var(--text-faint); }
#photos-empty .empty-state { margin-bottom: var(--sp-2); }

.photo-viewer {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: var(--r-md); margin: var(--sp-2) 0; min-height: 160px;
}
.photo-viewer img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.photo-viewer-count { text-align: center; font-size: var(--fs-xs); color: var(--text-faint); margin: 0; }

.photo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0; }
@media (max-width: 480px) { .photo-compare { grid-template-columns: 1fr; } }
.photo-compare-panel { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 0; }
.photo-compare-panel img { max-width: 100%; max-height: 45vh; object-fit: contain; display: block; background: #000; border-radius: var(--r-sm); }
.photo-compare-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); }
.photo-compare-date { font-size: var(--fs-xs); color: var(--text-faint); }

/* Community (voliteľná online) – karty, avatary, príspevky. */
label.btn { cursor: pointer; }
.community-card {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); margin-top: var(--sp-3);
}
.community-head { display: flex; align-items: center; gap: var(--sp-2); }
.community-avatar { width: 32px; height: 32px; border-radius: var(--r-full); object-fit: cover; background: var(--surface-3); }
.community-avatar-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.community-name { font-weight: var(--fw-bold); overflow-wrap: break-word; }
.community-date { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }
.community-photo { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--r-sm); background: #000; display: block; }
.community-caption { margin: 0; overflow-wrap: break-word; }
.community-status-badge { font-size: var(--fs-xs); color: var(--accent); margin: 0; }
#community-body .goal-chips { margin-bottom: var(--sp-2); }

/* Community – sociálne funkcie (sledovanie, páči sa mi, zdieľanie, 1–4 fotky). */
.community-name-btn {
  background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: var(--fw-bold);
  cursor: pointer; text-align: start; min-width: 0;
}
.community-name-btn:hover, .community-name-btn:focus-visible { text-decoration: underline; }
.community-badge {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: 1px var(--sp-2); white-space: nowrap;
}
.community-shared { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); }
.community-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
.community-photos[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.community-photo-btn { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; min-width: 0; }
.community-photos:not([data-count="1"]) .community-photo { aspect-ratio: 1 / 1; object-fit: cover; max-height: none; }
.community-photo-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: 24px; color: var(--text-faint); }
.community-social-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.community-social-row .btn { min-height: 36px; padding: var(--sp-1) var(--sp-3); }
.community-like[aria-pressed="true"], .community-share[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
.community-count-static { font-size: var(--fs-sm); color: var(--text-dim); padding: 0 var(--sp-2); }
/* Secondary card actions (Block / Report / Delete / Remove) stay on one compact row. */
#community-body .community-card > .plan-actions { margin-top: var(--sp-1); margin-bottom: 0; }
#community-body .community-card > .plan-actions .btn {
  flex: 1 1 0; min-height: 36px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm);
}
.community-counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.community-count-btn {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text);
  font: inherit; font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3);
}
button.community-count-btn { cursor: pointer; }
button.community-count-btn:hover { border-color: var(--border-strong); }
.community-list-row {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
}
.community-list-row .btn { margin-inline-start: auto; }
.community-check { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); cursor: pointer; }
.community-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.community-compose-text { min-height: 96px; resize: vertical; font: inherit; }
.community-draft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.community-draft-item { position: relative; aspect-ratio: 1 / 1; background: var(--surface-3); border-radius: var(--r-sm); overflow: hidden; }
.community-draft-thumb, .community-draft-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-draft-remove { position: absolute; top: 4px; inset-inline-end: 4px; width: 28px; height: 28px; min-width: 0; padding: 0; }
.community-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.community-pick {
  aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-3); overflow: hidden; cursor: pointer;
}
.community-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-pick:focus-visible, .community-pick:hover { border-color: var(--accent); }
#community-body label.btn.disabled { opacity: 0.5; pointer-events: none; }
.community-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4); cursor: zoom-out;
}
.community-lightbox[hidden] { display: none; }
.community-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.community-lightbox-close { position: absolute; top: var(--sp-3); inset-inline-end: var(--sp-3); }

/* ===== Community modal: mobile spacing, alignment, destructive separation =====
   Scoped to #modal-community so the shared .modal-sheet / .sheet-head /
   .sheet-scroll (also used by the exercise library) are left untouched. */
#modal-community .modal-sheet { max-height: calc(100dvh - var(--sp-5) * 2); }
#modal-community .sheet-head { padding: var(--sp-3) var(--sp-4); }
#community-body { overflow-wrap: break-word; }

/* Center label-buttons (e.g. Change avatar) like real buttons instead of
   top-aligning their text. Scoped to the Community modal so no other screen
   that uses a <label class="btn"> changes. */
#modal-community label.btn { display: inline-flex; align-items: center; justify-content: center; }

/* Clear gap between the form / instructions above and any action row — the auth
   password input previously touched the Sign in button. */
#community-body .plan-actions { margin-top: var(--sp-4); }
#community-body .plan-actions:first-child { margin-top: 0; }

/* Consistent separation for explanatory text and status lines. */
#community-body .card-note { margin-top: var(--sp-3); }
#community-body .card-title + .card-note { margin-top: var(--sp-2); }
#community-body .media-status { margin-top: var(--sp-3); }

/* Tabs get a little breathing room before the first card. */
#community-body #community-tabs { margin-bottom: var(--sp-3); }

/* The destructive delete sits apart from ordinary profile actions. */
#community-body .community-danger-row {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.media-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 120px;
  padding: var(--sp-3);
  text-align: center;
}
.media-missing-icon { font-size: 26px; line-height: 1; opacity: 0.7; }


/* ===== Výmena cviku počas tréningu ===== */

.exercise-swap { flex: 0 0 auto; }
.exercise-swap-note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.5;
  margin: 2px 0 var(--sp-1);
  overflow-wrap: break-word;
}
.exercise-closed { opacity: 0.72; }
.set-locked .set-btn { cursor: default; }
.btn-undo-swap { margin-top: var(--sp-2); }

@media (max-width: 360px) {
  .lib-row { flex-wrap: wrap; }
  .lib-row-tags { max-width: 100%; justify-content: flex-start; }
}

/* ===== Small screens ===== */

@media (max-width: 380px) {
  .app-main { padding-inline: var(--sp-3); }
  .card-value { font-size: var(--fs-2xl); }
  .stat-value { font-size: var(--fs-xl); }
}

/* ===== Community ako karta (priatelia, správy, komentáre, hľadanie – migrácia 0008) ===== */
.tab-icon { position: relative; }
.tab-badge {
  position: absolute; top: -6px; inset-inline-end: -10px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--accent); color: #fff; font-size: 10px; font-weight: var(--fw-bold);
  line-height: 18px; text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2px var(--bg);
}
.tab-badge[hidden] { display: none; }
.btn-sm { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.community-screen { display: flex; flex-direction: column; gap: var(--sp-3); }
.community-avatar-md { width: 44px; height: 44px; }
.community-avatar-lg { width: 84px; height: 84px; font-size: 40px; }

/* Horná navigácia Community: Domov, Hľadať, Nový, Správy, Profil. */
.cnav {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: var(--sp-1);
  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-5)) 0; padding: var(--sp-2) var(--sp-4);
  background: rgba(12, 13, 16, 0.94); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cnav-btn {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-1) 0; background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 10px;
  font-weight: var(--fw-bold); letter-spacing: 0.02em; cursor: pointer; border-radius: var(--r-sm);
}
.cnav-btn:hover { color: var(--text); }
.cnav-btn.active { color: var(--accent); }
.cnav-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.cnav-icon svg { width: 24px; height: 24px; display: block; }
.cnav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--accent); color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 1;
}
.cnav-btn .cnav-badge { position: absolute; top: 0; inset-inline-start: calc(50% + 6px); }
.cbadge-inline { vertical-align: middle; margin-inline-start: var(--sp-1); }

/* Rebríček (Community → Top 20) */
.lb-tabs { margin-block: var(--sp-2) var(--sp-3); }
.lb-card { padding: 0; overflow: hidden; }
.lb-scroll { overflow-x: auto; }
.lb-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb-th-pos { width: 2.75rem; text-align: center; }
.lb-th-level { width: 4.6rem; }
.lb-th-xp { width: 5.2rem; }
.lb-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-dim);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.lb-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-pos { font-weight: var(--fw-bold); color: var(--text-dim); text-align: center; white-space: nowrap; padding-inline: var(--sp-1); }
.lb-gold, .lb-silver, .lb-bronze { color: #111; }
.lb-pos.lb-gold::before, .lb-pos.lb-silver::before, .lb-pos.lb-bronze::before { content: none; }
.lb-gold { background: linear-gradient(180deg, #f3d36b, #d9a933); }
.lb-silver { background: linear-gradient(180deg, #e3e6ea, #b8bec6); }
.lb-bronze { background: linear-gradient(180deg, #e5a978, #b9733f); }
.lb-member { min-width: 0; }
.lb-member-in { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.lb-name { background: none; border: 0; padding: 0; font: inherit; color: var(--text); font-weight: var(--fw-bold);
  cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.lb-name:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: var(--r-sm); }
.lb-you { color: var(--accent); font-weight: var(--fw-med); }
.lb-level { white-space: nowrap; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.lb-xp { text-align: end; font-weight: var(--fw-bold); white-space: nowrap; }
.lb-th-xp { text-align: end; }
.lb-me td { background: var(--accent-soft, rgba(255, 122, 26, 0.12)); }
.lb-gap td { text-align: center; color: var(--text-dim); padding-block: var(--sp-1); }
.lb-state { display: grid; gap: var(--sp-2); }
.lb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cscope { margin: 0; }

/* Hlavička podpohľadu (Späť + názov). */
.csub-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.csub-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csub-back { font-size: var(--fs-lg); }
[dir="rtl"] .csub-back { transform: scaleX(-1); }
.csection { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-md); font-weight: var(--fw-bold); }

/* Príspevok (ako Instagram): hlavička, fotka cez celú šírku, akcie, popis. */
.community-card.cpost { padding: 0; gap: 0; margin-top: 0; overflow: hidden; background: var(--surface); }
.cpost-shared { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) 0; }
.cpost-shared svg { width: 14px; height: 14px; }
.cpost-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); }
.cpost-avatar { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-full); flex: none; line-height: 0; }
.cpost-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cpost-meta { font-size: var(--fs-xs); color: var(--text-faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cpost-friends { display: inline-flex; align-items: center; gap: 3px; color: var(--blue); }
.cpost-friends svg { width: 13px; height: 13px; }
.cpost-more { margin-inline-start: auto; color: var(--text-dim); }
.cpost-more svg { width: 22px; height: 22px; display: block; }
.cpost .community-photos { position: relative; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; background: #000; scrollbar-width: none; }
.cpost .community-photos::-webkit-scrollbar { display: none; }
.cpost .community-photo-btn { flex: 0 0 100%; scroll-snap-align: center; }
.cpost .community-photo { border-radius: 0; max-height: 75vh; width: 100%; }
.cpost .community-photos:not([data-count="1"]) .community-photo { aspect-ratio: 1 / 1; object-fit: cover; }
.cpost-multi {
  position: absolute; top: var(--sp-2); inset-inline-end: var(--sp-2); z-index: 1; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px var(--sp-2); border-radius: var(--r-full); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.cpost-multi svg { width: 13px; height: 13px; }
.cpost-actions { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-3) 0; }
.cpost-act {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-1) 0; background: none; border: 0; color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-med); cursor: pointer; min-height: 36px;
}
.cpost-act svg { width: 24px; height: 24px; display: block; }
.cpost-act:disabled { cursor: default; opacity: 0.8; }
.cpost-act.community-count-static { color: var(--text-dim); cursor: default; padding: var(--sp-1) 0; }
.cpost-act.community-like.on { color: var(--accent); }
.cpost-act.community-like.on svg { fill: currentColor; }
.cpost-act.community-share.on { color: var(--accent); }
.cpost-caption { padding: var(--sp-2) var(--sp-3) 0; }
.cpost-caption-name { font-weight: var(--fw-bold); }
.cpost-comments-link {
  align-self: flex-start; margin: var(--sp-1) var(--sp-3) 0; padding: 0; background: none; border: 0; color: var(--text-dim);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.cpost-comments-link:hover { color: var(--text); }
.cpost > :last-child { margin-bottom: var(--sp-3); }
.cpost-menu { padding: 0 var(--sp-3); }
.cpost-menu[hidden] { display: none; }
#community-body .cpost > .plan-actions.cpost-menu { margin-top: var(--sp-2); }
.cfeed { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Komentáre */
.ccomments { display: flex; flex-direction: column; gap: var(--sp-3); }
.ccomment { display: flex; gap: var(--sp-2); align-items: flex-start; }
.ccomment-body { min-width: 0; flex: 1 1 auto; }
.ccomment-text { margin: 0; overflow-wrap: break-word; }
.ccomment-meta { display: flex; gap: var(--sp-3); margin-top: 2px; font-size: var(--fs-xs); color: var(--text-faint); }
.clink { padding: 0; background: none; border: 0; color: var(--text-dim); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.clink:hover { color: var(--text); }

/* Písacie pole (komentár / správa) – drží sa nad spodným panelom. */
.ccomposer {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 4;
  display: flex; gap: var(--sp-2); align-items: flex-end; padding: var(--sp-2) 0;
  background: linear-gradient(to top, var(--bg) 75%, rgba(12, 13, 16, 0));
}
.ccomposer-input { flex: 1 1 auto; min-height: 44px; max-height: 140px; resize: none; font: inherit; line-height: 1.35; margin: 0; }
.ccomposer-send { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.ccomposer-send svg { width: 18px; height: 18px; }
@media (max-width: 430px) { .ccomposer-send-label { display: none; } }

/* Hľadanie a riadky ľudí */
.csearch { position: relative; }
.csearch-icon { position: absolute; top: 50%; inset-inline-start: var(--sp-3); transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.csearch-icon svg { width: 18px; height: 18px; display: block; }
.csearch-input { padding-inline-start: 40px; margin: 0; }
.cpeople { display: flex; flex-direction: column; }
.cperson { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.cperson-main {
  display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; padding: 0; background: none; border: 0;
  color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
.cperson-name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cperson-actions { display: flex; gap: var(--sp-1); flex: none; }

/* Profil (ako Instagram) */
.cprofile { display: flex; flex-direction: column; gap: var(--sp-2); }
.cprofile-top { display: flex; align-items: center; gap: var(--sp-4); }
.cprofile-stats { display: flex; flex: 1 1 auto; justify-content: space-around; gap: var(--sp-1); }
.cstat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: var(--sp-1); background: none; border: 0; color: var(--text); font: inherit; border-radius: var(--r-sm); }
button.cstat { cursor: pointer; }
button.cstat:hover { background: var(--surface-2); }
.cstat-n { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.cstat-l { font-size: var(--fs-xs); color: var(--text-dim); }
.cprofile-name { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.cprofile-bio { margin: 0; color: var(--text); overflow-wrap: break-word; }
.cprofile-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.cprofile-actions .btn { flex: 1 1 0; }
.cprofile-actions .btn-icon { flex: none; }
.cprofile-menu[hidden], .cchat-menu[hidden] { display: none; }

/* Zoznam chatov a konverzácia */
.cchat-list { display: flex; flex-direction: column; }
.cchat-row {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); font: inherit; text-align: start; cursor: pointer; width: 100%;
}
.cchat-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cchat-name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchat-last { font-size: var(--fs-sm); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchat-row.unread .cchat-last { color: var(--text); font-weight: var(--fw-med); }
.cchat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.cchat-time, .cchat-closed { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }
.cchat-who { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0; background: none; border: 0; color: var(--text); font: inherit; font-weight: var(--fw-bold); cursor: pointer; max-width: 100%; }
.cchat-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchat-msgs { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 40vh; }
.cmsg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.cmsg.mine { align-self: flex-end; align-items: flex-end; }
.cmsg-bubble {
  padding: var(--sp-2) var(--sp-3); border-radius: 18px; border-end-start-radius: 6px; background: var(--surface-3); color: var(--text);
  border: 0; font: inherit; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer;
}
.cmsg.mine .cmsg-bubble { background: var(--accent); color: #fff; border-end-start-radius: 18px; border-end-end-radius: 6px; }
.cmsg-time { font-size: 10px; color: var(--text-faint); margin: 2px var(--sp-1) 0; }
.cchat-closed-note { text-align: center; }

/* Voľba "Kto to uvidí", citácia nahlásenej položky */
.cvis { border: 0; padding: 0; margin: var(--sp-3) 0 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cvis legend { width: 100%; padding: 0; }
.cvis-opt {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-full); cursor: pointer; background: var(--surface-2);
}
.cvis-opt:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.cvis-opt input { accent-color: var(--accent); margin: 0; }
.cquote {
  margin: 0; padding: var(--sp-2) var(--sp-3); border-inline-start: 3px solid var(--accent-line); background: var(--surface-3);
  border-radius: var(--r-sm); white-space: pre-wrap; overflow-wrap: anywhere;
}
.cpost-text { padding: 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cscope { gap: var(--sp-2); }
.cscope .goal-chip { min-height: 32px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-full); }
/* Pokrok má 5 podkariet (aj Motivácia): celé slová v jednom riadku, pri úzkom displeji sa posúvajú. */
#pokrok-subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sp-5)); padding-inline: var(--sp-5); }
#pokrok-subtabs::-webkit-scrollbar { display: none; }
#pokrok-subtabs .subtab { flex: 1 0 auto; white-space: nowrap; overflow-wrap: normal; padding-inline: 14px; }
.cprofile-actions .btn { flex: 1 1 auto; white-space: nowrap; }
.community-actions-primary .btn { white-space: nowrap; }

/* Upozornenia na správy: krátka ponuka nad zoznamom chatov. */
.cpush-hint.card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
.cpush-hint.card .card-note { margin: 0; flex: 1 1 12rem; }
.cpush-hint.card .btn { flex: 0 0 auto; min-height: 40px; }

/* ===== Chat: odpovede, reakcie, akcie správy (migrácia 0011) ===== */
.cmsg-bubble { display: flex; flex-direction: column; gap: 4px; }
/* Bublina nesmie byť širšia ako stĺpec správy (inak dlhá citácia vytlačí odpoveď mimo obrazovky). */
.cmsg { min-width: 0; }
.cmsg-bubble { max-width: 100%; min-width: 0; }
/* Citácia: zalomená na najviac 3 riadky, aj dlhé slová bez medzier. */
.cmsg-quote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  font-size: var(--fs-xs); line-height: 1.35; opacity: 0.85; padding: 4px 8px;
  border-inline-start: 3px solid currentColor; border-radius: 6px; background: rgba(0, 0, 0, 0.18);
  overflow: hidden; white-space: normal; overflow-wrap: anywhere; max-width: 100%;
}
.cmsg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.cmsg-react {
  display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.cmsg-react span { font-size: var(--fs-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cmsg-react.mine { border-color: var(--accent); background: var(--accent-soft); }
.cmsg-actions {
  margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--sp-2);
}
.cmsg-react-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.cmsg-react-opt {
  min-width: 40px; min-height: 40px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface-3); font-size: 20px; line-height: 1; cursor: pointer;
}
.cmsg-react-opt:hover { border-color: var(--border-strong); }
.cmsg-action-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.creply-bar {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-inline-start: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2);
}
.creply-label { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-bold); flex: 0 0 auto; }
.creply-text {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--text-dim); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere;
}
.cshare-open-row { display: flex; margin-top: var(--sp-2); }

/* ===== Zdieľaný plán / tréning (chat aj príspevok) ===== */
.cshare-card {
  margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); text-align: start; max-width: 100%; min-width: 0;
}
.cshare-card[data-kind="workout"] { border-color: var(--ok-line, var(--border-strong)); }
.cshare-kind { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.cshare-card[data-kind="workout"] .cshare-kind { color: var(--ok, var(--accent)); }
.cshare-name { margin: 2px 0 0; font-weight: var(--fw-black); font-size: var(--fs-md); color: var(--text); overflow-wrap: anywhere; }
.cshare-meta { margin: 2px 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); }
.cshare-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cshare-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-2); font-size: var(--fs-sm); }
.cshare-ex { color: var(--text); overflow-wrap: anywhere; }
.cshare-ex-meta { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cshare-picker { margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.cshare-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cshare-draft { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.cshare-draft .cshare-card { width: 100%; }
.cshare-compose-row { flex-wrap: wrap; }
.result-share { margin-top: var(--sp-3); }

/* ===== Najlepšie úspechy na profile ===== */
.cprofile-ach { margin: var(--sp-3) 0; }
.cprofile-ach-title { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.cprofile-ach-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.cprofile-ach-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); text-align: center;
}
.cprofile-ach-icon { font-size: 26px; line-height: 1; }
.cprofile-ach-name { font-size: var(--fs-xs); color: var(--text); overflow-wrap: anywhere; }
.cprofile-ach-empty { margin: var(--sp-2) 0; }

/* ===== Pripomienky (voda, jedlo, tréning) ===== */
.crem .community-check { margin-top: var(--sp-3); }
.crem-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-6); }
.crem-lbl { font-size: var(--fs-sm); color: var(--text-dim); }
.crem-time { width: auto; min-width: 6.5em; min-height: 40px; margin: 0; }
.crem-select { width: auto; min-height: 40px; margin: 0; }
.crem-days .goal-chip { min-width: 44px; min-height: 40px; padding: 0 10px; }
/* skrytý panel (odpoveď, výber zdieľania) musí byť naozaj skrytý – display:flex vyššie prekoná [hidden] */
.creply-bar[hidden], .cshare-picker[hidden], .cmsg-actions[hidden] { display: none; }

/* Automatická záloha bez vypínača: stav "Zapnuté" alebo dlhší text "Netreba – synchronizácia". */
#auto-backup-state { color: var(--accent); }
#auto-backup-state.setting-state-ok { color: var(--ok); white-space: normal; text-align: end; max-width: 12em; text-transform: none; letter-spacing: 0; }

/* Zdieľanie tréningu z kalendára: do Community alebo priateľovi. */
.day-share { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.day-share-row, .day-share-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.day-share-row .btn { flex: 1 1 10rem; min-height: 40px; }
.day-share-friends { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.day-share-friends[hidden] { display: none; }
.day-share-friends .modal-label { margin-top: 0; }
.day-share-to { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-share-sent { margin: 0 0 var(--sp-2); color: var(--ok); font-weight: var(--fw-bold); overflow-wrap: anywhere; }

/* Drop série: riadky pod sériami cviku a tlačidlo "+ Drop séria". */
.drops { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.drops:empty { display: none; }
.drop-item { flex: 1 1 100%; align-items: center; }
.drop-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-dim); overflow-wrap: anywhere; }
.drop-item .drop-done { flex: 0 0 auto; min-width: 52px; }
.drop-weight, .drop-reps { color: var(--text); }
.btn-add-drop { min-height: 40px; }
.drop-note { display: block; font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }
.cshare-ex-drop { flex: 1 0 100%; font-size: var(--fs-xs); color: var(--text-dim); }

/* Odpoveď: ťuknutím na citáciu sa chat presunie na pôvodnú správu, ktorá na chvíľu zasvieti. */
.cmsg-quote[data-community-action] { cursor: pointer; }
.cmsg-quote[data-community-action]:hover { opacity: 1; }
.cmsg.cmsg-flash .cmsg-bubble { animation: cmsg-flash 1.6s ease-out; }
@keyframes cmsg-flash {
  0%, 35% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cmsg.cmsg-flash .cmsg-bubble { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}
.cmsg-gone { font-size: var(--fs-xs); color: var(--text-dim); margin: 2px var(--sp-1) 0; }

/* ===== Trénovanie s priateľom (migrácia 0014) ===== */
.train-box[hidden] { display: none; }
.train-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.train-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.train-title { margin: 0; font-weight: var(--fw-bold); color: var(--text); overflow-wrap: anywhere; }
.train-picker { display: flex; flex-direction: column; gap: var(--sp-2); }
.train-picker .modal-label { margin: 0; }
.train-friends, .train-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.train-actions .btn { flex: 1 1 8rem; min-height: 44px; }
.train-friend { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.train-partner { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.train-partner-line, .train-partner-meta, .train-partner-wait { margin: 0; overflow-wrap: anywhere; }
.train-partner-meta, .train-partner-wait { font-size: var(--fs-sm); color: var(--text-dim); }
.train-progress { height: 6px; }
.train-fin { color: var(--ok); font-weight: var(--fw-bold); }
.train-cheers { display: flex; gap: var(--sp-2); }
.train-cheer {
  flex: 1 1 0; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface-3); font-size: 22px; line-height: 1; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease;
}
.train-cheer:hover { border-color: var(--border-strong); }
.train-cheer.sent { border-color: var(--accent); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .train-cheer { transition: none; } .train-cheer.sent { transform: none; } }
.train-toast { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text); font-weight: var(--fw-bold); }
.train-note, .train-privacy { margin: 0; }
.train-with { color: var(--text-dim); }

/* ==========================================================================
   ===== Bento dizajn (v78): svetlý a tmavý režim =====
   Celá aplikácia v dizajne Bento: teplé sivé pozadie, zaoblené dlaždice, čierne
   a limetkové akcenty, pastelové dlaždice, plávajúca čierna lišta. Mení sa LEN vzhľad:
   žiadne dáta, žiadne funkcie. Režim volí Nastavenia → Vzhľad (svetlý / tmavý / podľa
   telefónu); <html data-theme="light|dark"> nastaví skript v <head> ešte pred vykreslením.
   ========================================================================== */

/* Písmo Bento (Space Grotesk, SIL OFL 1.1 – fonts/OFL.txt), uložené v aplikácii, funguje offline.
   Arabčina a iné písma, ktoré Space Grotesk nemá, použijú systémové písmo. */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Farby: svetlý režim (aj predvolený, keby skript v <head> nebežal) ---- */
:root, html[data-theme="light"] {
  --bg: #E9E8E4; --bg-elev: #F2F1ED;
  --surface: #FFFFFF; --surface-2: #F2F1ED; --surface-3: #E6E4DE;
  --border: #E0DED8; --border-strong: #CCC9C1;
  --text: #121212; --text-dim: #5F5D57; --text-faint: #8A8882;
  --accent: #121212; --accent-strong: #000000; --accent-soft: rgba(18, 18, 18, 0.07); --accent-line: rgba(18, 18, 18, 0.35);
  --on-accent: #F4F3EF;
  --blue: #3550C8; --blue-soft: rgba(53, 80, 200, 0.10); --blue-line: rgba(53, 80, 200, 0.40);
  --danger: #C2362C; --danger-soft: rgba(194, 54, 44, 0.09); --danger-line: rgba(194, 54, 44, 0.38);
  --ok: #2E7D4F; --ok-soft: rgba(46, 125, 79, 0.13); --ok-line: rgba(46, 125, 79, 0.45);
  --miss: #B24E5B; --miss-soft: rgba(178, 78, 91, 0.10); --miss-line: rgba(178, 78, 91, 0.36);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.14);
  /* Bento dlaždice */
  --lime: #D6F35A; --on-lime: #121212;
  --tile-lime: #D6F35A; --tile-lav: #CFC8FF; --tile-peach: #FFC9A8; --tile-sky: #BFE3F2; --tile-sand: #EFE3C8; --tile-fg: #121212;
  --ink: #121212; --on-ink: #F4F3EF;
  --nav-bg: #121212; --nav-fg: #9C9A94;
  --scrim: rgba(18, 18, 18, 0.38);
  --fig-near: #2B2B2B; --fig-far: #8B8981; --fig-torso: #3A3A3A; --fig-equip: #6B6963; --fig-equip-2: #9C9A94; --fig-soft: #C9C6BE;
  color-scheme: light;
}
/* ---- Farby: tmavý režim ---- */
html[data-theme="dark"] {
  --bg: #0E0E0F; --bg-elev: #141416;
  --surface: #1A1A1C; --surface-2: #222225; --surface-3: #2B2B2F;
  --border: #2C2C30; --border-strong: #3B3B41;
  --text: #F4F3EF; --text-dim: #A3A19B; --text-faint: #75736D;
  --accent: #D6F35A; --accent-strong: #C8F03A; --accent-soft: rgba(214, 243, 90, 0.12); --accent-line: rgba(214, 243, 90, 0.45);
  --on-accent: #121212;
  --blue: #9AB0FF; --blue-soft: rgba(154, 176, 255, 0.14); --blue-line: rgba(154, 176, 255, 0.45);
  --danger: #FF6B6B; --danger-soft: rgba(255, 107, 107, 0.12); --danger-line: rgba(255, 107, 107, 0.42);
  --ok: #6BCB8B; --ok-soft: rgba(107, 203, 139, 0.14); --ok-line: rgba(107, 203, 139, 0.45);
  --miss: #D98A94; --miss-soft: rgba(217, 138, 148, 0.10); --miss-line: rgba(217, 138, 148, 0.34);
  --shadow-1: none;
  --shadow-2: 0 12px 34px rgba(0, 0, 0, 0.6);
  --lime: #D6F35A; --on-lime: #121212;
  --tile-lime: #4B5A13; --tile-lav: #3B3470; --tile-peach: #6A3B22; --tile-sky: #1F4A5C; --tile-sand: #4A4130; --tile-fg: #F4F3EF;
  --ink: #000000; --on-ink: #F4F3EF;
  --nav-bg: #1C1E22; --nav-fg: #A3A19B;
  --scrim: rgba(0, 0, 0, 0.66);
  --fig-near: #C6CBD7; --fig-far: #6F7482; --fig-torso: #B6BCC9; --fig-equip: #7C8290; --fig-equip-2: #A7ADBA; --fig-soft: #454A56;
  color-scheme: dark;
}

/* ---- Tvar: zaoblené dlaždice, pilulky ---- */
:root { --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --tile-r: 22px; --tabbar-h: 88px; }

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", Tahoma, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
}
html[dir="rtl"] body, body:lang(ar) { font-family: "Noto Sans Arabic", "Geeza Pro", system-ui, -apple-system, Tahoma, sans-serif; }

.app-title { font-size: 26px; letter-spacing: -0.04em; font-weight: 700; }
.screen-title { font-size: 32px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; margin-bottom: var(--sp-4); }
.today-date { margin-top: calc(-1 * var(--sp-2)); }
.header-level { background: var(--ink); color: var(--lime); border-color: transparent; }
.btn-icon { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .btn-icon { border-color: var(--border); }

/* Dlaždice (karty) */
.card, .summary-bar, .exercise, .stat-card, .fig-box, .motivation-card {
  border-radius: var(--tile-r);
}
.card { border: 0; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .card { border: 1px solid var(--border); }
.card-title { letter-spacing: -0.02em; }
.card-value { letter-spacing: -0.045em; font-weight: 700; }

/* Tlačidlá: pilulky. Hlavné = limetka s čiernym textom (Bento „Start“). */
.btn { border-radius: var(--r-full); letter-spacing: 0; }
.btn-primary { background: var(--lime); color: var(--on-lime); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: #CBEB45; }
.btn-primary:disabled { background: var(--surface-3); color: var(--text-faint); border: 0; }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
html[data-theme="dark"] .btn-secondary { background: var(--surface-2); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); filter: brightness(0.97); }
.btn-big { box-shadow: none; min-height: 60px; font-size: var(--fs-lg); }
#btn-start-workout { background: var(--ink); color: var(--lime); }
html[data-theme="dark"] #btn-start-workout { background: var(--lime); color: var(--on-lime); }

/* Pokrok */
.progress { box-shadow: none; }
.stat-card { background: var(--surface); border: 0; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .stat-card { border: 1px solid var(--border); }
.stats-row .stat-card:nth-child(1) { background: var(--tile-lime); }
.stats-row .stat-card:nth-child(3) { background: var(--tile-lav); }
.stats-row .stat-card:nth-child(1) .stat-value, .stats-row .stat-card:nth-child(3) .stat-value,
.stats-row .stat-card:nth-child(1) .stat-label, .stats-row .stat-card:nth-child(3) .stat-label { color: var(--tile-fg); }
.stat-value { letter-spacing: -0.045em; font-weight: 700; }
.record-weight { color: var(--text); }

/* Tréning: plány ako farebné dlaždice, vybraný = čierny */
.chip.recommended::after { color: inherit; }
.chip:not(.plan-chips .chip) { border-radius: var(--r-full); }
.exercise { border: 0; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .exercise { border: 1px solid var(--border); }
.exercise-meta b { color: var(--text); }
.set-btn { border-radius: 14px; background: var(--surface-2); border: 2px solid var(--border); color: var(--text-dim); }
.set-btn.done { background: var(--ink); border-color: var(--ink); color: var(--lime); }
html[data-theme="dark"] .set-btn.done { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.set-weight, .set-reps, .drop-weight, .drop-reps, .set-fail { border-radius: 14px; }
.summary-bar { border: 0; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .summary-bar { border: 1px solid var(--border); }
.summary-bar b { color: var(--text); }

/* Kalendár */
.cal-cell { border-radius: 12px; }

/* Plávajúca čierna lišta (Bento): pilulka v strede, iba ikony, aktívna karta = limetkový kruh.
   Názov karty ostáva v DOM (čítačky obrazovky), len je vizuálne skrytý. */
.tab-bar {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  width: auto; max-width: calc(100% - 24px); height: auto;
  padding: 6px; gap: 4px;
  background: var(--nav-bg);
  border: 0; border-radius: var(--r-full);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-theme="dark"] .tab-bar { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--border); }
.tab-bar .tab {
  flex: 0 0 auto; width: 54px; min-width: 0; height: 46px; min-height: 46px; padding: 0;
  justify-content: center; color: var(--nav-fg); border-radius: var(--r-full);
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-bar .tab::before { display: none; }
.tab-bar .tab.active { background: var(--lime); color: var(--on-lime); }
.tab-bar .tab > span[data-i18n] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tab-bar .tab-icon svg { width: 22px; height: 22px; }
@media (max-width: 340px) { .tab-bar .tab { width: 48px; } }
.update-banner { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); border-radius: var(--tile-r); left: 10px; right: 10px; max-width: calc(var(--maxw) - 20px); border-top: 0; background: var(--ink); }
.update-banner .update-text { color: var(--on-ink); }

/* Okná */
.modal-backdrop { background: var(--scrim); }
.modal { border: 0; border-radius: var(--r-lg); }
html[data-theme="dark"] .modal { border: 1px solid var(--border-strong); }
.modal .modal-xp { color: var(--text); }
.modal-input { border-radius: 14px; }

/* Text na akcentovej farbe (namiesto pevnej tmavej) */
.fb-ex[aria-pressed="true"] .fb-check, .lang-item.active .lang-check { color: var(--on-accent); }
.cnav-badge, .tab-badge { color: var(--on-accent) !important; }
.cmsg.mine .cmsg-bubble { color: var(--on-accent); }
.cal-cell .cal-badge, .cal-count { color: var(--bg); }

/* Ilustrácie cvikov: odtiene podľa režimu */
.fig-far { stroke: var(--fig-far); }
.fig-near { stroke: var(--fig-near); }
.fig-torso { fill: var(--fig-torso); stroke: var(--fig-torso); }
.fig-neck { stroke: var(--fig-torso); }
.fig-head, .fig-hand { fill: var(--fig-near); }
.fig-foot { stroke: var(--fig-near); }
.fig-bar, .fig-cable-line { stroke: var(--fig-equip-2); }
.fig-plate { fill: var(--fig-equip); stroke: var(--fig-equip-2); }
.fig-plate-sm { fill: var(--fig-equip); }
.fig-bench-pad { stroke: var(--fig-equip-2); }
.fig-post, .fig-post-base, .fig-anchor { stroke: var(--fig-equip); }
.fig-pulley { fill: var(--fig-equip-2); }
.fig-stack { fill: var(--fig-equip); }
.fig-box-body { fill: var(--fig-soft); stroke: var(--fig-equip); }
.fig-mat { fill: var(--fig-soft); }
.fig-props, .fig-props-thin { stroke: var(--fig-soft); }

/* Community: lepiace hlavičky a pole na písanie podľa pozadia */
html[data-theme="light"] .cnav, html[data-theme="light"] #community-tabs { background: rgba(233, 232, 228, 0.94); }
.ccomposer { background: linear-gradient(to top, var(--bg) 75%, transparent); }

/* Bento: biele dlaždice cvikov, vybrané voľby ako čierna/limetková pilulka, kompaktnejšie tlačidlo v dlaždici */
.exercise { background: var(--surface); }
.goal-chip { border-radius: var(--r-full); }
.goal-chip.active { background: var(--ink); border-color: var(--ink); color: var(--lime); }
html[data-theme="dark"] .goal-chip.active { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
/* XP v potvrdení dokončenia tréningu (predtým pevná svetlozelená farba v texte) */
.xp-gain { color: var(--ok); font-weight: var(--fw-black); }
html[data-theme="dark"] .xp-gain { color: var(--lime); }


/* =====================================================================
   Bento podľa referencie (design-concepts/app/r2/03-bento.html, tmavý: r7/02-classic-dark.html)
   Hodnoty sú prevzaté z referencie: mriežka 4 × 84 px, medzera 8 px, dlaždica 22 px / 14 px,
   štítok 12 px, hodnota 34 px, menu 52 × 44 px. Mení sa iba vzhľad – prvky, id a obsluha ostávajú.
   ===================================================================== */
:root, html[data-theme="light"] {
  --b-bg: #E9E8E4; --b-tile: #FFFFFF; --b-fg: #121212; --b-hd-small: #6E6C66; --b-tile-shadow: none;
  --b-dark: #121212; --b-on-dark: #F4F3EF; --b-dark-ring: none;
  --b-lime: #D6F35A; --b-lav: #CFC8FF; --b-peach: #FFC9A8; --b-sky: #BFE3F2; --b-sand: #EFE3C8; --b-pastel-fg: #121212;
  --b-line-op: .7; --b-tline: inherit;
  --b-dot: rgba(0,0,0,.1); --b-bar: rgba(0,0,0,.1);
  --b-sq-bd: rgba(0,0,0,.15); --b-sq-bg: rgba(255,255,255,.5); --b-sq-on-bg: #121212; --b-sq-on-fg: #D6F35A;
  --b-mini: rgba(0,0,0,.08);
  --b-nav: #121212; --b-nav-fg: #9C9A94; --b-nav-shadow: 0 10px 30px rgba(0,0,0,.25);
  /* listy (kit referencie) */
  --k-bg: #FFFFFF; --k-fg: #17191D; --k-mute: #6B7079; --k-card: #F2F1ED; --k-line: #E0DED8; --k-acc: #121212; --k-acc-fg: #FFFFFF;
  --k-danger: #C8372D; --k-good: #2E9A5B; --k-bad: #D9A39D; --k-radius: 22px; --k-scrim: rgba(10,12,16,.45); --k-shadow: 0 -10px 40px rgba(0,0,0,.22);
}
html[data-theme="dark"] {
  --b-bg: #0E0E0F; --b-tile: #1A1A1C; --b-fg: #F4F3EF; --b-hd-small: #9C9A94; --b-tile-shadow: inset 0 0 0 1px #2C2C2F;
  --b-dark: #000000; --b-on-dark: #F4F3EF; --b-dark-ring: inset 0 0 0 1px #2C2C2F;
  --b-lime: #4B5A13; --b-lav: #3B3470; --b-peach: #6A3B22; --b-sky: #1F4A5C; --b-sand: #4A4130; --b-pastel-fg: #F4F3EF;
  --b-line-op: 1; --b-tline: #9C9A94;
  --b-dot: rgba(255,255,255,.14); --b-bar: rgba(255,255,255,.14);
  --b-sq-bd: rgba(255,255,255,.18); --b-sq-bg: rgba(255,255,255,.06); --b-sq-on-bg: #D6F35A; --b-sq-on-fg: #121212;
  --b-mini: rgba(255,255,255,.14);
  --b-nav: #1C1E22; --b-nav-fg: #9C9A94; --b-nav-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px #2C2C2F;
  --k-bg: #1A1A1C; --k-fg: #F4F3EF; --k-mute: #9C9A94; --k-card: #0E0E0F; --k-line: #2C2C2F; --k-acc: #D6F35A; --k-acc-fg: #121212;
  --k-scrim: rgba(0,0,0,.6);
}
html { background: var(--b-bg); }
body { background: var(--b-bg); color: var(--b-fg); font: 15px/1.35 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html[dir="rtl"] body, body:lang(ar) { font-family: "Noto Sans Arabic", "Geeza Pro", system-ui, -apple-system, Tahoma, sans-serif; }
.kico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Hlavička aplikácie z predošlej verzie nie je v referencii: ostáva v DOM (nastavenia a level sú v dlaždiciach) */
.app-header { display: none; }
/* main: 50px 12px 110px */
.app-main { padding: max(50px, calc(env(safe-area-inset-top, 0px) + 16px)) 12px calc(110px + env(safe-area-inset-bottom, 0px)); max-width: 600px; }
.screen { animation: none; }
/* .hd { display:flex; align-items:flex-end; justify-content:space-between; padding:0 4px 12px } h1 30px −1px */
.hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 4px 12px; margin: 0; }
.hd > div { min-width: 0; }
.hd .screen-title, .bh-hello { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; color: inherit; overflow-wrap: anywhere; }
.hd small, .hd .today-date { color: var(--b-hd-small); font-size: 12.5px; margin: 0; display: block; }
#screen-trening.in-session > .hd { display: none; }

/* ---- mriežka a dlaždice ---- */
.bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(84px, auto); gap: 8px; margin: 0; }
.bt {
  position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; text-align: start;
  border-radius: 22px; padding: 14px; background: var(--b-tile); color: var(--b-fg); overflow: hidden; border: 0;
  font: inherit; cursor: pointer; box-shadow: var(--b-tile-shadow); -webkit-tap-highlight-color: transparent;
}
.bt > * { position: relative; }
.bt.bt-static { cursor: default; }
.bt[hidden] { display: none !important; }
.bt.w2 { grid-column: span 2; } .bt.w4 { grid-column: span 4; } .bt.h2 { grid-row: span 2; } .bt.h3 { grid-row: span 3; }
.bt-dark { background: var(--b-dark); color: var(--b-on-dark); box-shadow: var(--b-dark-ring); }
.bt-lime { background: var(--b-lime); color: var(--b-pastel-fg); box-shadow: none; }
.bt-lav { background: var(--b-lav); color: var(--b-pastel-fg); box-shadow: none; }
.bt-peach { background: var(--b-peach); color: var(--b-pastel-fg); box-shadow: none; }
.bt-sky { background: var(--b-sky); color: var(--b-pastel-fg); box-shadow: none; }
.bt-sand { background: var(--b-sand); color: var(--b-pastel-fg); box-shadow: none; }
.bt-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; line-height: 1.35; overflow-wrap: anywhere; }
.bt-v { font-size: 34px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; margin-top: auto; overflow-wrap: anywhere; }
.bt-v small { font-size: 14px; letter-spacing: 0; font-weight: 500; opacity: .7; }
.bt-v.bt-v24 { font-size: 24px; } .bt-v.bt-v22 { font-size: 22px; }
.bt-line { font-size: 12px; opacity: var(--b-line-op); }
.bt:not(.bt-dark):not(.bt-lime):not(.bt-lav):not(.bt-peach):not(.bt-sky):not(.bt-sand) .bt-line { color: var(--b-tline); }
html[data-theme="light"] .bt-line, :root:not([data-theme]) .bt-line { opacity: .7; }
html[data-theme="dark"] .bt-dark .bt-line, html[data-theme="dark"] :is(.bt-lime, .bt-lav, .bt-peach, .bt-sky, .bt-sand) .bt-line { color: #F4F3EF; opacity: .75; }
.bt-bottom { margin-top: auto; }
.bt .kico { width: 20px; height: 20px; }
.bt-bg { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
/* Ďalší tréning */
.bt-next .bt-plan { font-size: 30px; font-weight: 700; margin-top: 6px; line-height: 1.1; overflow-wrap: anywhere; }
.bt-next .bt-line { opacity: .75; }
.bt-start, #bt-next #btn-start-workout {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 0;
  background: #D6F35A; color: #121212; border: 0; border-radius: 999px; padding: 11px 18px; font: 700 16px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; box-shadow: none;
}
.bt-start .kico { width: 20px; height: 20px; }
/* týždeň */
.bt-dots { display: flex; gap: 5px; margin-top: 8px; }
.bt-dots i { flex: 1; height: 26px; border-radius: 8px; background: var(--b-dot); }
.bt-dots i.d { background: currentColor; } .bt-dots i.n { box-shadow: inset 0 0 0 2px currentColor; }
/* level */
.bt-bar { display: block; height: 8px; border-radius: 4px; background: var(--b-bar); overflow: hidden; margin: 10px 0 0; }
.bt-bar i { display: block; height: 100%; background: currentColor; border-radius: 4px; }
.bt-lav .bt-bar + .bt-line { margin-top: 6px; }
/* priatelia */
.bt-avs { display: flex; margin-top: auto; }
.k-av { --s: 32px; width: var(--s); height: var(--s); flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; background: var(--av, #888); color: #fff; font: 700 calc(var(--s) * .42) 'Space Grotesk', system-ui, sans-serif; overflow: hidden; }
.k-av img { width: 100%; height: 100%; object-fit: cover; }
.bt-avs .k-av { margin-inline-end: -8px; border: 2px solid var(--b-lav); }
.bt-badge { position: absolute !important; top: 12px; inset-inline-end: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #121212; color: #D6F35A; font: 700 12px/20px 'Space Grotesk', system-ui, sans-serif; text-align: center; }
html[data-theme="dark"] .bt-badge { background: #D6F35A; color: #121212; }
#bt-rest.bt-running { background: #D6F35A; color: #121212; }
#bt-rest.bt-running .bt-line { font: 700 18px 'Space Grotesk', sans-serif; opacity: 1; color: #121212; font-variant-numeric: tabular-nums; }

/* ---- menu: tmavá pilulka, 52 × 44, aktívna karta limetková ---- */
.tab-bar {
  position: fixed; left: 50%; right: auto; top: auto; transform: translateX(-50%); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 4px; width: auto; height: auto; max-width: none; margin: 0; padding: 6px; border: 0; border-radius: 999px;
  background: var(--b-nav); box-shadow: var(--b-nav-shadow); z-index: 10; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.tab-bar .tab {
  flex: 0 0 auto; width: 52px; height: 44px; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 999px;
  background: none; color: var(--b-nav-fg); display: grid; place-items: center; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none;
}
.tab-bar .tab::before { display: none; }
.tab-bar .tab.active { background: #D6F35A; color: #121212; }
.tab-bar .tab-icon { position: relative; display: grid; place-items: center; }
.tab-bar .tab .kico { width: 22px; height: 22px; }
.tab-bar .tab > span[data-i18n] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tab-bar .tab:focus-visible { outline: 2px solid #D6F35A; outline-offset: 2px; }
.tab-badge { position: absolute; top: -6px; inset-inline-end: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #D6F35A; color: #121212 !important; font: 700 10px/16px 'Space Grotesk', sans-serif; }
.tab.active .tab-badge { background: #121212; color: #D6F35A !important; }

/* ---- časovač oddychu: limetková pilulka (restpill) ---- */
.timer-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 9; margin: 0 auto; max-width: 576px;
  display: flex; align-items: center; gap: 10px; background: #D6F35A; color: #121212; border: 0; border-radius: 22px; padding: 12px 14px; box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.timer-bar[hidden] { display: none; }
.timer-bar .timer-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.timer-bar .timer-time { flex: 1; font: 700 26px 'Space Grotesk', sans-serif; color: #121212; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.timer-bar #timer-stop { border: 0; background: #121212; color: #fff; border-radius: 999px; padding: 8px 12px; width: auto; height: auto; min-height: 0; font: 600 13px 'Space Grotesk', sans-serif; box-shadow: none; }
html[data-theme="dark"] .timer-bar #timer-stop { background: #000; color: #F4F3EF; }
.timer-bar.done { background: #D6F35A; }

/* ---- Tréning ---- */
.plan-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.chip-wrap { display: flex; min-width: 0; }
.plan-chips .chip {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 0;
  min-height: 176px; padding: 14px; border: 0; border-radius: 22px; background: var(--b-lime); color: var(--b-pastel-fg); box-shadow: none; font: inherit; cursor: pointer;
}
.plan-chips .chip[data-tile="1"] { background: var(--b-lav); } .plan-chips .chip[data-tile="2"] { background: var(--b-peach); }
.plan-chips .chip[data-tile="3"] { background: var(--b-sky); } .plan-chips .chip[data-tile="4"] { background: var(--b-sand); }
.plan-chips .chip.active { background: var(--b-dark); color: var(--b-on-dark); box-shadow: var(--b-dark-ring); }
.plan-chips .chip:hover { filter: none; }
.plan-chips .chip.recommended::after { content: none; }
.chip-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.chip-name { font-size: 22px; font-weight: 700; margin-top: 4px; line-height: 1.15; overflow-wrap: anywhere; }
.chip-meta { margin-top: auto; font-size: 12px; opacity: .7; font-weight: 400; }
.plan-chips.managing { grid-template-columns: minmax(0, 1fr); }
.plan-chips.managing .chip { min-height: 64px; border-radius: 0; }
.plan-chips.managing .chip-wrap { border-radius: 22px; overflow: hidden; }
.plan-chips.managing .chip-drag, .plan-chips.managing .chip-edit { display: inline-flex; align-items: center; justify-content: center; background: var(--b-tile); border: 0; color: var(--b-fg); width: 44px; }
.tr-detail { min-height: 268px; margin: 0 0 8px; cursor: default; }
.tr-rows { display: flex; flex-direction: column; margin-top: 4px; }
.tr-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.tr-row b { white-space: nowrap; font-weight: 700; }
.mini { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.tr-detail .mini { margin-top: auto; padding-top: 8px; }
.mini > button, .mini > .mini-icon, .btn-add-drop, .set-pill {
  border: 0; background: var(--b-mini); border-radius: 999px; padding: 6px 10px; font: 600 12px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; color: inherit;
  display: inline-flex; gap: 4px; align-items: center; min-height: 28px; width: auto; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.mini .kico { width: 14px; height: 14px; }
.mini .mini-dark, .tr-detail #tr-start { background: #121212; color: #D6F35A; }
html[data-theme="dark"] .tr-detail #tr-start { background: #D6F35A; color: #121212; }
.tr-tiles { margin-bottom: 8px; }
.plan-manage-hint { margin: 8px 4px; font-size: 13px; color: var(--b-hd-small); }
/* prebiehajúci tréning */
.bt-session { margin-bottom: 8px; min-height: 176px; cursor: default; display: flex; }
.bt-session[hidden] { display: none; }
.bt-session .tr-switch { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: start; cursor: pointer; align-self: flex-start; }
.bt-session .duration-value { color: inherit; font-size: 40px; letter-spacing: -1.5px; margin-top: auto; font-variant-numeric: tabular-nums; }
.bt-session .summary-bar { display: block; background: none; border: 0; box-shadow: none; padding: 0; margin: 4px 0 0; border-radius: 0; color: inherit; }
.bt-session .summary-bar b { color: inherit; font-size: inherit; font-weight: 700; }
.bt-session .mini > button { background: rgba(255,255,255,.12); color: inherit; }
.bt-session .mini > .mini-lime { background: #D6F35A; color: #121212; }
.bt-session .mini > button:disabled { opacity: .5; cursor: default; }
.bt-session .duration-note { font-size: 12px; opacity: .7; }
.tr-session[hidden] { display: none; }
.failure-hint { margin: 0 4px 8px; font-size: 12px; color: var(--b-hd-small); background: none; border: 0; padding: 0; }
/* cviky = dlaždice w4: aktuálny levanduľový, hotový limetkový */
.exercise-list { display: flex; flex-direction: column; gap: 8px; }
.exercise { position: relative; display: flex; flex-direction: column; border-radius: 22px; padding: 14px; background: var(--b-tile); color: var(--b-fg); border: 0; box-shadow: var(--b-tile-shadow); margin: 0; min-height: 176px; }
.exercise.ex-current { background: var(--b-lav); color: var(--b-pastel-fg); box-shadow: none; }
.exercise.ex-done { background: var(--b-lime); color: var(--b-pastel-fg); box-shadow: none; }
.exercise .compare-hint { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin: 0; color: inherit; }
.exercise .compare-hint :is(.up, .down) { color: inherit; font-weight: 700; }
.exercise-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0; }
.exercise-name { font-size: 20px; font-weight: 700; color: inherit; letter-spacing: 0; }
.exercise-lr { font-size: 13px; font-weight: 500; }
.exercise-meta { margin-inline-start: auto; font-size: 12px; opacity: .7; color: inherit; }
.exercise-meta b { color: inherit; }
.exercise-side-note, .exercise-swap-note { font-size: 12px; opacity: .7; margin: 2px 0 0; color: inherit; }
.exercise .sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.exercise .sets::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
.exercise .set-item { display: contents; }
.exercise .set-btn.sq {
  order: 1; flex: 0 0 calc((100% - 24px) / 5); height: 52px; min-height: 0; min-width: 0; padding: 0; border-radius: 14px;
  border: 2px solid var(--b-sq-bd); background: var(--b-sq-bg); color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 14px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; line-height: 1.1; box-shadow: none;
}
.exercise .set-btn.sq small { font-size: 10px; font-weight: 500; opacity: .7; }
.exercise .set-btn.sq i { font-style: normal; font-size: 10px; font-weight: 700; opacity: .7; }
.exercise .set-btn.sq.done { background: var(--b-sq-on-bg); color: var(--b-sq-on-fg); border-color: var(--b-sq-on-bg); }
.exercise .set-pill { order: 3; padding: 0 4px 0 10px; gap: 0; cursor: default; }
.exercise .set-pill .set-n, .exercise .set-pill .set-side-label { font-weight: 700; padding-inline-end: 4px; }
.exercise .set-pill :is(.set-reps, .set-weight, .set-fail) {
  background: none; border: 0; border-radius: 999px; min-height: 28px; min-width: 24px; padding: 0 6px; font: 600 12px 'Space Grotesk', system-ui, sans-serif; color: inherit; box-shadow: none; cursor: pointer;
}
.exercise .set-pill .set-weight::after { content: ' ' attr(data-unit); }
.exercise .set-pill .set-fail { opacity: .45; } .exercise .set-pill .set-fail.active { opacity: 1; } .exercise .set-pill .set-fail.planned { opacity: .75; }
.exercise .set-pill :is(.set-reps, .set-weight).changed { text-decoration: underline; text-underline-offset: 2px; }
.exercise .set-weight-editor { order: 4; flex-basis: 100%; margin: 4px 0 0; }
.exercise .set-locked .set-btn.sq { opacity: .55; }
.ex-mini { margin-top: 8px; }
.ex-mini .drops { display: contents; }
.ex-mini .drop-item { display: inline-flex; align-items: center; gap: 0; background: var(--b-mini); border-radius: 999px; padding: 0 4px 0 10px; min-height: 28px; font: 600 12px 'Space Grotesk', sans-serif; }
.ex-mini .drop-item :is(.drop-done, .drop-reps, .drop-weight, .drop-remove) { background: none; border: 0; min-height: 28px; min-width: 24px; padding: 0 6px; font: inherit; color: inherit; border-radius: 999px; box-shadow: none; }
.ex-mini .drop-item .drop-done.done { background: #121212; color: #D6F35A; }
.ex-mini .drop-label { padding-inline-end: 4px; }
.ex-mini .mini-icon { padding: 6px 8px; }
.ex-mini .mini-icon .kico { width: 14px; height: 14px; }
.btn-undo-swap { margin-top: 8px; }
.edit-panel { background: var(--b-tile); border-radius: 22px; padding: 14px; margin: 0 0 8px; box-shadow: var(--b-tile-shadow); border: 0; }

/* ---- Štatistiky: graf série za týždeň, rekordy ---- */
.k-chart { width: 100%; height: auto; display: block; margin: 6px 0; color: currentColor; overflow: visible; }
.k-col { fill: currentColor; opacity: .45; } .k-col.last { opacity: 1; }
.k-chart-t { fill: var(--b-hd-small); font: 600 11px 'Space Grotesk', system-ui, sans-serif; }
.st-rec { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-top: 6px; }
.st-rec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-rec b { white-space: nowrap; }
.st-plan { font-weight: 700; overflow-wrap: anywhere; }
.stats-grid[hidden] { display: none; }
#subview-progress > .stats-row:first-child { display: none; }

/* ---- celostránkové listy (ako k-full v referencii): podpohľady Štatistík, kalendár, Community ---- */
.k-head { display: flex; align-items: center; gap: 8px; padding: max(14px, env(safe-area-inset-top, 0px)) 14px 10px; border-bottom: 1px solid var(--k-line); background: var(--k-bg); position: sticky; top: 0; z-index: 2; margin: 0 -16px 12px; }
.k-head h2 { flex: 1; margin: 0; font: 700 18px/1.2 'Space Grotesk', system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-fg); }
.k-x { background: none; border: 0; color: var(--k-fg); padding: 6px; margin: -6px 0 -6px -4px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; min-width: 34px; min-height: 34px; }
[dir="rtl"] .k-x .kico { transform: scaleX(-1); }
#screen-pokrok.sheet-open > .subview:not([hidden]), #screen-kalendar, #screen-komunita.sheet-open #community-body {
  position: fixed; inset: 0; z-index: 15; overflow-y: auto; background: var(--k-bg); color: var(--k-fg);
  padding: 0 16px max(26px, env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch;
}
#screen-kalendar[hidden] { display: none; }
#screen-pokrok.sheet-open > .hd, #screen-pokrok.sheet-open > .subtabs { display: none; }
.subtabs { display: none; }
/* obsah listov: bez kariet, sekcie so štítkami (k-sec) a riadkami */
:is(#screen-pokrok.sheet-open > .subview, #screen-kalendar, #screen-komunita.sheet-open #community-body) .card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 18px;
}
:is(#screen-pokrok.sheet-open > .subview, #screen-kalendar) .card-title, #screen-komunita.sheet-open .csection {
  display: flex; justify-content: space-between; align-items: center; margin: 18px 0 6px; font: 700 12px/1.2 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--k-mute);
}
:is(#screen-pokrok.sheet-open > .subview, #screen-kalendar) :is(.record-row, .history-row) { border-bottom: 1px solid var(--k-line); padding: 11px 2px; }
:is(#screen-pokrok.sheet-open > .subview, #screen-kalendar) :is(.card-note, .card-sub, .record-meta) { color: var(--k-mute); font-size: 13px; }
.k-head + * { margin-top: 0; }
/* kalendár ako v referencii */
.calendar-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.calendar-head .calendar-title { flex: 1; text-align: center; font: 700 17px 'Space Grotesk', sans-serif; }
.calendar-head .btn-icon { background: none; border: 0; box-shadow: none; border-radius: 50%; }
.calendar-weekday { font-size: 12px; color: var(--k-mute); font-weight: 600; text-transform: none; letter-spacing: 0; }
.cal-cell { border-radius: 10px; background: var(--k-card); color: inherit; font: 600 14px 'Space Grotesk', sans-serif; border: 0; box-shadow: none; }
.cal-cell.cal-done { background: var(--k-good); color: #fff; border: 0; }
.cal-cell.cal-miss { background: var(--k-bad); color: var(--k-fg); border: 0; }
html[data-theme="dark"] .cal-cell.cal-miss { color: #121212; }
.cal-cell.cal-future { background: var(--k-card); color: inherit; }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px #E8862B; color: inherit; }
.cal-cell.cal-done.cal-today { color: #fff; }
.cal-cell.cal-outside { opacity: .4; }
.legend-swatch { border-radius: 4px; width: 12px; height: 12px; }
.legend-swatch.swatch-ok { background: var(--k-good); border-color: var(--k-good); }
.legend-swatch.swatch-miss { background: var(--k-bad); border-color: var(--k-bad); }
.legend-swatch.swatch-today { background: transparent; box-shadow: inset 0 0 0 2px #E8862B; border: 0; }
.calendar-legend { color: var(--k-mute); font-size: 13px; }

/* ---- Community ---- */
.chd { align-items: center; }
.hd-icon { background: none; border: 0; color: inherit; padding: 8px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; min-width: 40px; min-height: 40px; }
.community-screen { gap: 8px; }
.cnav.cbento { position: static; display: grid; padding: 0; margin: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cnav.cbento .cnav-btn { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 14px; font: inherit; font-size: inherit; letter-spacing: 0; min-height: 84px; }
.cnav.cbento .cnav-btn.active { background: inherit; color: inherit; }
.cnav.cbento .bt-dark .bt-l { color: inherit; }
.cnav.cbento .cnav-badge { position: absolute !important; top: 12px; inset-inline-end: 12px; inset-inline-start: auto; }
#screen-komunita.sheet-open .chd { visibility: hidden; }
#community-body .card, #community-body .community-card, #community-body .cfeed > * { border-radius: 22px; }
.cfeed > .card, #community-feed > .card, #community-feed > .community-card { background: var(--b-tile); border: 0; box-shadow: var(--b-tile-shadow); padding: 14px; }
.csub-head { display: flex; align-items: center; gap: 8px; padding: max(14px, env(safe-area-inset-top, 0px)) 14px 10px; margin: 0 -16px 12px; border-bottom: 1px solid var(--k-line); background: var(--k-bg); position: sticky; top: 0; z-index: 2; }
.csub-head .csub-title { flex: 1; font: 700 18px/1.2 'Space Grotesk', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csub-back { background: none; border: 0; box-shadow: none; color: inherit; }
#screen-komunita.sheet-open .ccomposer { background: var(--k-bg); }
.goal-chips.cscope, .community-scope { margin: 4px 0; }

/* ---- listy (bottom sheets) a ovládacie prvky ako kit referencie ---- */
.modal-backdrop { background: var(--k-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; align-items: flex-end; padding: 0; z-index: 20; }
.modal {
  background: var(--k-bg); color: var(--k-fg); border: 0; border-radius: 22px 22px 0 0; box-shadow: var(--k-shadow);
  width: 100%; max-width: 600px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px)); text-align: start;
  font: 15px/1.4 'Space Grotesk', system-ui, sans-serif; animation: gq-sheet-up .2s ease;
}
@keyframes gq-sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal > h3:first-child {
  margin: 0 -16px 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--k-line); font: 700 18px/1.2 'Space Grotesk', sans-serif; text-align: start;
  position: sticky; top: 0; background: var(--k-bg); z-index: 1;
}
.modal p { color: var(--k-fg); }
.modal .card-note, .modal .card-sub, .modal .modal-label { color: var(--k-mute); }
.modal.modal-sheet, .modal.modal-fb { padding: 0; max-height: 88dvh; }
@media (min-width: 700px) { .modal-backdrop { align-items: center; padding: 20px; } .modal { border-radius: 22px; } }
.setting-block { background: none; border: 0; border-bottom: 1px solid var(--k-line); border-radius: 0; padding: 11px 2px; margin: 0; }
.setting-block > .card-title, .goal-head > .card-title, .setting-main > .card-title { font: 700 12px/1.2 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--k-mute); }
/* tlačidlá (k-btn) */
.btn { font: 600 15px/1.2 'Space Grotesk', system-ui, sans-serif; padding: 11px 14px; border-radius: 16.5px; border: 1px solid transparent; min-height: 44px; letter-spacing: 0; text-transform: none; box-shadow: none; }
.btn-primary { background: var(--k-acc); color: var(--k-acc-fg); border-color: var(--k-acc); }
.btn-primary:hover:not(:disabled) { background: var(--k-acc); filter: brightness(1.08); }
.btn-secondary { background: var(--k-card); color: var(--k-fg); border-color: transparent; }
.btn-secondary:hover:not(:disabled) { background: var(--k-card); border-color: var(--k-line); }
.btn-sm { padding: 7px 12px; min-height: 36px; font-size: 14px; }
.btn-big { min-height: 52px; font-size: 16px; }
/* čipy (k-chip) */
.goal-chip, .chip:not(.plan-chips .chip), .metric-chip, .unit-chip, .timer-chip {
  border: 1px solid var(--k-line); background: none; color: inherit; border-radius: 999px; padding: 6px 12px; font: 600 13px/1.2 'Space Grotesk', sans-serif; min-height: 36px; box-shadow: none;
}
:is(.goal-chip, .metric-chip, .timer-chip).active, .metric-chip[aria-pressed="true"], .unit-chip[aria-pressed="true"], .timer-chip[aria-pressed="true"] { background: var(--k-acc); border-color: var(--k-acc); color: var(--k-acc-fg); }
/* segment (k-seg) pre Svetlý / Tmavý / Systém */
.theme-chips { display: flex; background: var(--k-card); border-radius: 15.4px; padding: 3px; gap: 3px; margin: 6px 0; }
.theme-chips .goal-chip { flex: 1; border: 0; padding: 9px 0; border-radius: 12.1px; font: 600 14px 'Space Grotesk', sans-serif; justify-content: center; text-align: center; }
.theme-chips .goal-chip.active { background: var(--k-acc); color: var(--k-acc-fg); }
/* prepínač (k-sw) 48 × 28 */
.switch { width: 48px; height: 28px; }
.switch::before { inset-inline-start: 0; top: 0; width: 48px; height: 28px; border-radius: 14px; border: 0; background: var(--k-line); }
.switch-knob { top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch[aria-checked="true"]::before { background: var(--k-acc); border: 0; }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); background: #fff; }
[dir="rtl"] .switch[aria-checked="true"] .switch-knob { transform: translateX(-20px); }
/* polia formulárov */
.modal-input, .modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea, #community-body input:not([type=checkbox]):not([type=radio]), #community-body textarea {
  font: 16px/1.3 'Space Grotesk', system-ui, sans-serif; color: var(--k-fg); background: var(--k-card); border: 1px solid var(--k-line); border-radius: 13.2px; padding: 10px 11px;
}
.update-banner { left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); border-radius: 22px; background: #121212; color: #F4F3EF; border: 0; }
.storage-warning { border-radius: 14px; }
.empty-state { color: var(--k-mute); text-align: center; padding: 18px 8px; margin: 0; }

/* ---- prístupnosť ---- */
/* Dvojité ťuknutie (napr. dva rýchle ťuky na dlaždicu plánu) na iPhone nepriblíži stránku;
   priblíženie dvoma prstami ostáva zachované (manipulation = posúvanie + pinch-zoom).
   :where() má nulovú špecificitu, takže prvky s vlastným touch-action (ťahanie cvikov) ho prebijú. */
:where(html, body, body *) { touch-action: manipulation; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus, #3550C8); outline-offset: 2px; }
:root, html[data-theme="light"] { --focus: #3550C8; } html[data-theme="dark"] { --focus: #D6F35A; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ---- tablet a počítač: stĺpec 600 px ako telefón v referencii; od 900 px širší a mriežka v 8 stĺpcoch ---- */
@media (min-width: 900px) {
  .app-main { max-width: 880px; }
  .bento-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .plan-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timer-bar { max-width: 856px; }
  #screen-pokrok.sheet-open > .subview:not([hidden]), #screen-kalendar, #screen-komunita.sheet-open #community-body { left: 50%; right: auto; width: 600px; transform: translateX(-50%); box-shadow: 0 0 0 100vmax var(--k-scrim); }
}
html[data-theme] .bt-session .summary-bar { border: 0; background: none; box-shadow: none; }
.bt .k-chart { color: var(--k-acc); }
.bt-session .mini > .mini-lime:disabled { opacity: .65; }
/* plán: editor ako celostránkový list (referencia: "Edit plan") */
.edit-panel:not([hidden]) { position: fixed; inset: 0; z-index: 15; margin: 0; border-radius: 0; overflow-y: auto; background: var(--k-bg); color: var(--k-fg); padding: 0 16px max(26px, env(safe-area-inset-bottom, 0px)); box-shadow: none; }
.edit-panel .modal-actions { position: sticky; bottom: 0; background: var(--k-bg); padding: 10px 0; margin: 10px 0 0; }
/* história: súhrny ako k-stats (sivé karty) */
#subview-progress .stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
#subview-progress .stats-row .stat-card { background: var(--k-card); border: 0; box-shadow: none; border-radius: 22px; padding: 10px; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; text-align: start; gap: 2px; grid-column: auto; }
#subview-progress .stats-row .stat-value { font: 800 24px/1.1 'Space Grotesk', sans-serif; color: var(--k-fg); letter-spacing: 0; }
#subview-progress .stats-row .stat-label { font-size: 12px; color: var(--k-mute); text-transform: none; letter-spacing: 0; opacity: 1; }
/* úspechy ako k-ach */
.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.achievement { background: var(--k-card); border: 0; border-radius: 22px; padding: 10px; text-align: start; opacity: .6; box-shadow: none; filter: none; display: flex; flex-direction: column; gap: 2px; }
.achievement.unlocked { opacity: 1; background: var(--k-card); border: 0; box-shadow: none; }
.achievement .achievement-icon { font-size: 24px; filter: grayscale(1); margin: 0; } .achievement.unlocked .achievement-icon { filter: none; }
.achievement .achievement-name { font-size: 13px; line-height: 1.2; color: var(--k-fg); }
.achievement :is(.achievement-desc, .achievement-date, .achievement-xp) { font-size: 11px; color: var(--k-mute); }
#subview-motivation > .card:nth-of-type(1) .card-value { font: 800 28px/1.15 'Space Grotesk', sans-serif; }
/* nastavenia ako celostránkový list */
#modal-settings .modal { max-width: none; height: 100%; max-height: none; border-radius: 0; }
@media (min-width: 700px) { #modal-settings .modal { max-width: 600px; height: auto; max-height: calc(100dvh - 40px); border-radius: 22px; } }
.bt-session .tr-switch { min-height: 28px; padding: 6px 10px 6px 0; margin: -6px 0; }
/* Prístupnosť: o odtieň tmavšie než referencia, aby malý text a dni v kalendári mali kontrast aspoň 4,5 : 1 */
:root, html[data-theme="light"] { --b-hd-small: #605E58; --k-good: #2A7F4B; }
html[data-theme="dark"] { --k-good: #2A7F4B; }
#screen-komunita.sheet-open #community-body .ccomposer { position: sticky; bottom: 0; }
#screen-komunita.sheet-open #community-body > * { flex-shrink: 0; }

/* ===== Úpravy po vydaní v78 ===== */
/* Menu so šiestimi kartami (pribudli Správy): na úzkom displeji užšie tlačidlá, aby sa pilulka zmestila */
@media (max-width: 400px) { .tab-bar .tab { width: 46px; } }
@media (max-width: 340px) { .tab-bar { gap: 2px; padding: 5px; } .tab-bar .tab { width: 42px; } }

/* Full Body, detail cviku, knižnica a prehliadač fotiek: na telefóne celostránkový list od vrchu (pod
   stavovým riadkom), obsah sa posúva vnútri listu, hlavička a spodné tlačidlá ostávajú na mieste. */
@media (max-width: 699px) {
  .modal-backdrop:has(> .modal.modal-sheet), .modal-backdrop:has(> .modal.modal-fb) { padding: 0; align-items: stretch; }
  .modal.modal-sheet, .modal.modal-fb {
    height: 100%; height: 100dvh; max-height: none; width: 100%; max-width: none; border-radius: 0; border: 0;
    padding: env(safe-area-inset-top, 0px) 0 0; display: flex; flex-direction: column; overflow: hidden; animation: none;
  }
  .modal-sheet .sheet-scroll, .modal-fb .fb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .modal-sheet .sheet-head, .modal-sheet .sheet-search, .modal-fb .fb-head, .modal-fb .fb-foot { flex: 0 0 auto; }
  .modal-fb .fb-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* Kalendár: mesiac presne v strede, šípky rovnako veľké po stranách */
.calendar-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin: 4px 0 12px; }
.calendar-head .calendar-title { text-align: center; font: 700 18px/1.2 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; margin: 0; }
.calendar-head .cal-nav { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--k-card); color: var(--k-fg); box-shadow: none; }
.calendar-head .cal-nav .kico { width: 20px; height: 20px; }
[dir="rtl"] .calendar-head .cal-nav .kico { transform: scaleX(-1); }
#btn-cal-today { display: block; margin: 12px auto 0; }

/* Trénovať s priateľom: levanduľová dlaždica medzi akciami Tréningu; výber priateľa a spoločný tréning ako dlaždice */
.train-tile { flex-direction: row; align-items: center; gap: 12px; min-height: 84px; }
.train-tile > .kico { width: 26px; height: 26px; flex: 0 0 auto; }
.train-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.train-tile-text b { font-size: 17px; }
.train-box { margin: 0 0 8px; }
.train-box .train-card, .train-today .train-card, #train-today .train-card {
  background: var(--b-lav); color: var(--b-pastel-fg); border: 0; border-radius: 22px; padding: 14px; box-shadow: none; margin: 0;
}
.train-card .train-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.train-card .train-title { margin: 0; font: 700 18px/1.2 'Space Grotesk', system-ui, sans-serif; color: inherit; }
.train-card .k-x { color: inherit; }
.train-card :is(.card-note, .modal-label, .train-privacy, .train-with) { color: inherit; opacity: .75; }
.train-card .train-friends { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.train-card .btn { border-radius: 999px; }
.train-card .btn-secondary { background: rgba(255,255,255,.55); color: var(--b-pastel-fg); border: 0; }
html[data-theme="dark"] .train-card .btn-secondary { background: rgba(255,255,255,.14); }
.train-card .btn-primary { background: #121212; color: #D6F35A; border: 0; }
html[data-theme="dark"] .train-card .btn-primary { background: #D6F35A; color: #121212; }
.train-card .train-cheer { background: rgba(255,255,255,.55); border: 0; border-radius: 999px; }
html[data-theme="dark"] .train-card .train-cheer { background: rgba(255,255,255,.14); }
#train-today { margin: 0 0 8px; }

/* Správy: rozhovory sú hlavná stránka karty; nadpis Community sa vtedy skryje */
#screen-komunita.msg-mode:has(.chats-hd) > .chd { display: none; }
.chats-hd { padding: 0 4px 12px; align-items: center; }
.cchat-list { display: flex; flex-direction: column; gap: 8px; }
#screen-komunita:not(.sheet-open) .cchat-row { background: var(--b-tile); border-radius: 22px; padding: 12px 14px; border: 0; box-shadow: var(--b-tile-shadow); }

/* ===== Úpravy po vydaní v79 ===== */
/* Správy: „Videné / Odoslané“ pod mojou poslednou správou */
.cmsg-seen { font-weight: 600; }
.cmsg-seen.on { color: var(--text); }
.k-seg { display: flex; background: var(--k-card); border-radius: calc(var(--k-radius) * .7); padding: 3px; gap: 3px; }
.k-seg button { flex: 1; border: 0; background: none; color: inherit; padding: 8px 14px; border-radius: calc(var(--k-radius) * .55); font: 600 14px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; min-height: 36px; }
.k-seg button.on { background: var(--k-acc); color: var(--k-acc-fg); }
.k-seg button:focus-visible { outline: 2px solid var(--b-lime); outline-offset: 2px; }
/* Ospravedlnenie týždňa: list s týždňami */
.excuse-weeks { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.excuse-row { display: flex; align-items: center; gap: 12px; background: var(--k-card); border-radius: 18px; padding: 12px 10px 12px 14px; }
.excuse-row.on { background: var(--b-lime); color: #121212; }
.excuse-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.excuse-text b { font-size: 16px; }
.excuse-text span { font-size: 13px; opacity: .75; }
.excuse-text .excuse-hint { font-size: 12px; font-weight: 600; opacity: .9; }
.excuse-row .switch[disabled] { opacity: .4; cursor: default; }
.bt.bt-excused { background: var(--b-lime); color: var(--b-pastel-fg); box-shadow: none; }
.excuse-row.on .switch::before { background: #121212; border-color: #121212; }
.excuse-row.on .switch .switch-knob { background: #D6F35A; }
/* Nastavenia v80: skupiny (Bento karty), zriedkavé nástroje v „Ďalšie možnosti“ */
.settings-sheet .set-group { background: var(--k-card); border-radius: 22px; padding: 14px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 10px; }
.settings-sheet .set-group[hidden] { display: none; }   /* Health Connect len v Android appke */
.settings-sheet .set-group > .setting-block, .settings-sheet .set-group > .setting-row { margin: 0; padding: 0; border: 0; }
.settings-sheet .set-group .modal-actions { margin: 0; }
.set-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.set-sub[hidden] { display: none; }
.set-sub { display: flex; flex-direction: column; gap: 8px; }
.set-more > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding-inline-end: 28px; position: relative; min-height: 44px; justify-content: center; }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary::after { content: ''; position: absolute; inset-inline-end: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; transition: transform .15s ease; }
.set-more[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.set-more > summary:focus-visible { outline: 2px solid var(--b-lime); outline-offset: 4px; border-radius: 10px; }
.set-more .set-label { opacity: 1; font-size: 15px; letter-spacing: 0; text-transform: none; }
.settings-sheet .set-foot { position: sticky; bottom: 0; padding-top: 8px; background: inherit; }
.settings-sheet .set-group .btn-secondary, .settings-sheet .set-group .goal-chip:not(.active), .settings-sheet .set-group .len-chip:not(.active) { background: var(--b-tile); }
.settings-sheet .set-group .setting-row { background: none; box-shadow: none; padding: 0; }
.settings-sheet .set-group .card-sub { font-size: 12px; }
.settings-sheet #auto-backup-row[hidden], .settings-sheet #auto-backup-last[hidden] { display: none; }
.settings-sheet .set-group .setting-row { border: 0; }

/* ===== Profil v štýle Instagramu (v80): lišta · hlavička · akcie · mriežka; farby a tvary Bento ===== */
.pf-bar-name { font: 700 18px/1.2 'Space Grotesk', system-ui, sans-serif; }
.csub-head .pf-more { flex: none; width: 44px; height: 44px; border-radius: 999px; background: none; border: 0; box-shadow: none; color: inherit; display: grid; place-items: center; }
.csub-head .pf-more[aria-expanded="true"] { background: var(--k-card); }
.pf-menu { position: sticky; top: calc(max(14px, env(safe-area-inset-top, 0px)) + 56px); z-index: 3; margin: -6px 0 12px auto; width: min(280px, 100%);
  background: var(--b-tile); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.pf-menu[hidden] { display: none; }
.pf-menu-item { border: 0; background: none; color: inherit; text-align: start; font: 600 15px 'Space Grotesk', system-ui, sans-serif; padding: 14px 16px; min-height: 48px; cursor: pointer; }
.pf-menu-item + .pf-menu-item { border-top: 1px solid var(--k-line); }
.pf-menu-item:hover, .pf-menu-item:focus-visible { background: var(--k-card); outline: none; }
.pf-menu-item.pf-danger { color: #C0392B; }
html[data-theme="dark"] .pf-menu-item.pf-danger { color: #FF8A7A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .pf-menu-item.pf-danger { color: #FF8A7A; } }

#community-body .cprofile { gap: 6px; margin: 0 0 4px; }
#community-body .cprofile-top { gap: 18px; align-items: center; }
#community-body .cprofile .community-avatar-lg { width: 80px; height: 80px; font-size: 38px; flex: none; }
#community-body .cprofile-stats { justify-content: space-between; gap: 2px; }
#community-body .cstat { padding: 6px 4px; min-width: 56px; border-radius: 14px; color: inherit; }
#community-body button.cstat:hover { background: var(--k-card); }
#community-body .cstat-n { font: 700 19px/1.1 'Space Grotesk', system-ui, sans-serif; }
#community-body .cstat-l { font-size: 12px; color: var(--k-mute); }
#community-body .cprofile-name { font: 700 15px/1.3 'Space Grotesk', system-ui, sans-serif; margin-top: 6px; overflow-wrap: anywhere; }
#community-body .cprofile-bio { font-size: 14px; line-height: 1.4; }
/* top úspechy: kompaktný rad čipov (nie veľké dlaždice) */
#community-body .cprofile-ach { margin: 8px 0 2px; }
#community-body .cprofile-ach-title { margin: 0 0 6px; font-size: 11px; color: var(--k-mute); }
#community-body .cprofile-ach-list { display: flex; flex-wrap: wrap; gap: 6px; }
#community-body .cprofile-ach-item { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--k-card); border: 0; min-height: 0; }
#community-body .cprofile-ach-icon { font-size: 18px; }
#community-body .cprofile-ach-name { font-size: 12px; font-weight: 600; }
#community-body .pf-actions { margin: 10px 0 6px; gap: 8px; flex-wrap: nowrap; }
#community-body .pf-actions .btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 10px; border-radius: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
#community-body .pf-actions .btn-secondary { background: var(--k-card); }
@media (max-width: 340px) { #community-body .pf-actions { flex-wrap: wrap; } }

/* kostra počas načítania */
.pf-skel-av { background: var(--k-card) !important; }
.pf-skel-bar { display: block; height: 14px; width: 70%; border-radius: 999px; background: var(--k-card); }
.csub-head .pf-more svg { width: 24px; height: 24px; }
/* kompaktnejšia horná lišta listov (Späť · názov) – hneď pod bezpečnou oblasťou, bez veľkej medzery */
.csub-head { padding: max(8px, env(safe-area-inset-top, 0px)) 10px 6px; margin-bottom: 14px; }
#community-body .cprofile-ach-empty { font-size: 12px; margin: 4px 0 0; }

/* Príspevky na profile ako list ikon aplikácie (app-icons/overview.png): teplá sivá plocha, „squircle“
   dlaždice vo farbách Bento s jedným znakom, krátky popis pod každou. */
#community-body .pf-sheet { --pf-panel: #CDCAC2; --pf-cap: #2A2925; background: var(--pf-panel); border-radius: 26px; padding: 14px 12px 6px; margin: 12px 0 10px; }
html[data-theme="dark"] #community-body .pf-sheet { --pf-panel: #2A2A2D; --pf-cap: #CFCCC4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #community-body .pf-sheet { --pf-panel: #2A2A2D; --pf-cap: #CFCCC4; } }
#community-body .pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; margin: 0; }
@media (min-width: 560px) { #community-body .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; padding: 0; margin: 0; background: none; color: inherit; cursor: pointer; min-width: 0; font: inherit; }
.pf-sqw { position: relative; width: 100%; aspect-ratio: 1; display: block; }
.pf-sq { position: absolute; inset: 0; border-radius: 23%; overflow: hidden; display: grid; place-items: center; }
.pf-sq.pf-photo { background: #121212; }
.pf-sq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-sq svg { width: 52%; height: 52%; }
.pf-letter { font: 700 clamp(30px, 11vw, 46px)/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: -1px; }
.pf-ink { background: #121212; color: #D6F35A; }
.pf-lime { background: #D6F35A; color: #121212; }
.pf-lav { background: #CFC8FF; color: #121212; }
.pf-peach { background: #FFC9A8; color: #121212; }
.pf-sky { background: #BFE3F2; color: #121212; }
.pf-sand { background: #EFE3C8; color: #121212; }
.pf-warm { background: #E9E8E4; color: #121212; }
.pf-olive { background: #4B5A13; color: #D6F35A; }
html[data-theme="dark"] .pf-ink { box-shadow: inset 0 0 0 1.5px #3A3A3E; }
.pf-cap { width: 100%; font: 500 11px/1.25 'Space Grotesk', system-ui, sans-serif; color: var(--pf-cap); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tile:focus-visible { outline: none; }
.pf-tile:focus-visible .pf-sq { outline: 3px solid #D6F35A; outline-offset: 2px; }
.pf-tile:active .pf-sq { transform: scale(.97); }
.pf-marks { position: absolute; top: 7%; inset-inline-end: 7%; display: flex; gap: 4px; }
.pf-mark { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #121212; color: #D6F35A; box-shadow: 0 0 0 2px rgba(255,255,255,.35); font: 700 11px/1 'Space Grotesk', sans-serif; }
.pf-mark svg { width: 12px; height: 12px; }
.pf-mark.pf-dot { min-width: 12px; width: 12px; height: 12px; padding: 0; background: #EFE3C8; box-shadow: 0 0 0 2px #121212; }
.pf-pending .pf-sq { opacity: .55; }
.pf-cap.pf-status { font-weight: 700; }
#community-body .pf-empty { margin: 24px 0; text-align: center; }

/* ===== Ty = môj profil (v80): kompaktná hlavička + moje príspevky; farby a tvary Bento ===== */
#screen-ty { padding-bottom: 8px; }
.ty-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 44px; }
.ty-title { flex: 1; min-width: 0; margin: 0; font: 700 26px/1.15 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-bar-actions { display: flex; gap: 4px; }
.ty-icon { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--b-tile); color: var(--b-fg); display: grid; place-items: center; cursor: pointer; box-shadow: var(--b-tile-shadow); }
.ty-icon[hidden] { display: none; }
.ty-icon .kico { width: 22px; height: 22px; }
.ty-icon[aria-expanded="true"] { background: var(--b-lime); color: #121212; }
.ty-menu { position: relative; top: auto; margin: -4px 0 10px auto; }
.ty-head { background: var(--b-tile); border-radius: 22px; padding: 14px; box-shadow: var(--b-tile-shadow); display: flex; flex-direction: column; gap: 8px; }
.ty-top { display: flex; align-items: center; gap: 14px; }
.ty-av { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2F4F4F; color: #fff; font: 700 30px 'Space Grotesk', sans-serif; overflow: hidden; }
.ty-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-stats { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 2px; }
.ty-stats .cstat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; min-width: 0; flex: 1; border: 0; background: none; color: inherit; border-radius: 14px; font: inherit; }
.ty-stats button.cstat { cursor: pointer; }
.ty-stats button.cstat:hover { background: var(--k-card); }
.ty-stats .cstat-n { font: 700 19px/1.1 'Space Grotesk', system-ui, sans-serif; }
.ty-stats .cstat-l { font-size: 11.5px; color: var(--b-tline, inherit); opacity: .8; text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
.ty-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ty-id b { font: 700 17px/1.25 'Space Grotesk', system-ui, sans-serif; overflow-wrap: anywhere; }
.ty-handle { font-size: 13px; opacity: .7; }
.ty-handle:empty { display: none; }
.ty-bio { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ty-bio:not(.ty-bio-real) { font-size: 13px; opacity: .75; }
.ty-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ty-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 0; font: 600 13px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; color: var(--b-pastel-fg); }
.ty-pill .kico { width: 16px; height: 16px; }
.ty-pill-lav { background: var(--b-lav); } .ty-pill-lime { background: var(--b-lime); } .ty-pill-sky { background: var(--b-sky); }
html[data-theme="dark"] .ty-pill { color: #F4F3EF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ty-pill { color: #F4F3EF; } }
.ty-actions { display: flex; gap: 8px; }
.ty-actions .btn { flex: 1 1 0; min-width: 0; min-height: 40px; border-radius: 12px; padding: 8px 10px; background: var(--k-card); }
.ty-actions .btn[hidden] { display: none; }
/* filtre */
.ty-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 10px; padding: 2px 16px; }
.ty-filters::-webkit-scrollbar { display: none; }
.ty-filter { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 0; background: var(--b-tile); color: var(--b-fg); box-shadow: var(--b-tile-shadow); font: 600 14px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.ty-filter.on { background: var(--k-acc); color: var(--k-acc-fg); box-shadow: none; }
.ty-filter .kico { width: 15px; height: 15px; }
.ty-filter:focus-visible { outline: 2px solid var(--b-lime); outline-offset: 2px; }
.ty-private { margin: 0 4px 10px; font-size: 12.5px; opacity: .75; }
/* obsah */
.ty-posts { display: flex; flex-direction: column; gap: 8px; }
.ty-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ty-photo { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 16px; overflow: hidden; background: var(--k-card); cursor: pointer; display: block; min-width: 0; }
.ty-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-photo:focus-visible, .ty-card:focus-visible { outline: 3px solid var(--b-lime); outline-offset: 2px; }
.ty-card { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: start; border: 0; border-radius: 22px; padding: 14px; background: var(--b-tile); color: var(--b-fg); box-shadow: var(--b-tile-shadow); cursor: pointer; font: inherit; }
.ty-card.ty-text { flex-direction: column; gap: 6px; }
.ty-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: .65; flex-wrap: wrap; }
.ty-meta svg { width: 13px; height: 13px; }
.ty-body { font-size: 15px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ty-body-sm { font-size: 13.5px; -webkit-line-clamp: 3; }
.ty-counts-row { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: .65; }
.ty-counts-row svg { width: 14px; height: 14px; margin-inline-start: 4px; }
.ty-counts-row svg:first-child { margin-inline-start: 0; }
.ty-workout { align-items: center; }
.ty-w-icon { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; }
.ty-w-icon svg { width: 28px; height: 28px; }
.ty-w-done .ty-w-icon { background: #121212; color: #D6F35A; }
.ty-w-plan .ty-w-icon { background: #D6F35A; color: #121212; }
.ty-w-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ty-w-name { font: 700 16px/1.25 'Space Grotesk', system-ui, sans-serif; overflow-wrap: anywhere; }
.ty-w-sub { font-size: 13px; opacity: .75; }
.ty-w-ex { font-size: 12.5px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ty-w-thumb { width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; background: var(--k-card); }
.ty-w-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-pend { display: flex; flex-direction: column; gap: 8px; }
.ty-pending { background: var(--b-sand); color: var(--b-pastel-fg); box-shadow: none; align-items: center; }
.ty-pending.ty-rejected { background: var(--b-peach); }
.ty-status { font-weight: 700; opacity: 1; }
html[data-theme="dark"] .ty-pending { color: #F4F3EF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ty-pending { color: #F4F3EF; } }
.ty-history { display: flex; flex-direction: column; gap: 8px; }
.ty-hist { align-items: center; }
.ty-hist-date { width: 48px; height: 48px; flex: none; border-radius: 15px; background: var(--b-lav); color: var(--b-pastel-fg); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ty-hist-date b { font: 700 18px 'Space Grotesk', sans-serif; }
.ty-hist-date span { font-size: 11px; text-transform: uppercase; opacity: .75; margin-top: 2px; }
html[data-theme="dark"] .ty-hist-date { color: #F4F3EF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ty-hist-date { color: #F4F3EF; } }
.ty-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--k-card); border-radius: 18px; padding: 12px 14px; font-size: 13.5px; }
.ty-note .btn { flex: none; }
.ty-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; }
.ty-loading { text-align: center; font-size: 13px; opacity: .7; margin: 10px 0; }
.ty-more-btn { margin-top: 4px; }
.ty-sentinel { height: 1px; }
@media (min-width: 700px) {
  .ty-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ty-head { padding: 18px; }
  .ty-av { width: 96px; height: 96px; font-size: 38px; }
}
.ty-mosaic[data-n="1"] { grid-template-columns: 1fr; }
.ty-mosaic[data-n="1"] .ty-photo { aspect-ratio: 16 / 10; border-radius: 22px; }
.ty-mosaic[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ty-mosaic[data-n="2"] .ty-photo { border-radius: 20px; }
@media (min-width: 700px) { .ty-mosaic[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ty-mosaic[data-n="1"] .ty-photo { aspect-ratio: 5 / 2; } .ty-mosaic[data-n="2"] .ty-photo { aspect-ratio: 4 / 3; } }

/* ===== Community = feed (v83): kompaktná prilepená hlavička, príspevky v jednom stĺpci ako na X, vzhľad Bento ===== */
#screen-komunita > .chd { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -8px -16px 8px; padding: max(8px, env(safe-area-inset-top, 0px)) 16px 8px; background: var(--b-bg, var(--k-bg)); }
/* Nadpis sa nikdy nezalomí uprostred slova („Communit / y“ na 360–375 px alebo pri väčšom písme v systéme):
   keď sa nezmestí vedľa tlačidiel, tlačidlá prejdú do druhého riadku vpravo. */
#screen-komunita > .chd .screen-title { flex: 1; min-width: min-content; margin: 0; overflow-wrap: normal; }
.chd-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.chd-actions [hidden] { display: none !important; }
.chd-more { position: relative; }
.chd-dot { position: absolute; top: 8px; inset-inline-end: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--b-lime); box-shadow: 0 0 0 2px var(--b-bg, var(--k-bg)); }
.chd-new { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px 8px 11px; border: 0; border-radius: 999px;
  background: var(--b-lime); color: #121212; font: 700 14px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.chd-new .kico { width: 18px; height: 18px; }
/* Úzky telefón: Nový príspevok je okrúhle tlačidlo + (text zostáva pre čítačky obrazovky), hlavička ostane v jednom riadku. */
@media (max-width: 389px) {
  .chd-new { position: relative; justify-content: center; width: 40px; min-width: 40px; padding: 0; }
  .chd-new > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.chd-new:focus-visible, .chd-actions .hd-icon:focus-visible { outline: 2px solid var(--b-fg); outline-offset: 2px; }
.cmenu { position: absolute; top: 100%; inset-inline-end: 16px; margin: 0; z-index: 7; }
.cmenu-sub { opacity: .6; font-weight: 600; margin-inline-start: 4px; }
#screen-komunita:not(.sheet-open) .cscope { margin: 0 0 10px; }
/* príspevok: avatar vľavo, obsah vpravo – jeden celok (zaoblená karta Bento) */
#community-feed .xpost, #community-body .xpost { padding: 12px 14px 8px; }
.xp-row { display: flex; gap: 10px; align-items: flex-start; }
.xp-row > .cpost-avatar { margin-top: 2px; }
.xp-row > .cpost-avatar .community-avatar { width: 42px; height: 42px; }
.xp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xpost .cpost-head.xp-head { padding: 0; gap: 6px; align-items: flex-start; }
.xpost .cpost-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; }
.xpost .cpost-who .community-name-btn { font-weight: 700; font-size: 15px; padding: 0; }
.xpost .cpost-meta { font-size: 13px; }
.xpost .cpost-more { margin: -6px -6px 0 auto; width: 36px; height: 36px; }
.xpost .cpost-text { padding: 0; font-size: 15.5px; line-height: 1.45; }
.xpost .community-photos { border-radius: 18px; overflow-x: auto; margin-top: 2px; }
.xpost .community-photo { max-height: 520px; object-fit: cover; }
.xpost .cshare-card { margin: 2px 0 0; }
.xpost .cpost-actions { padding: 2px 0 0; gap: 0; justify-content: space-between; max-width: 340px; margin-inline-start: -8px; }
.xpost .cpost-act { min-height: 40px; padding: 6px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border-radius: 999px; }
.xpost .cpost-act svg { width: 20px; height: 20px; }
.xpost .cpost-act:not(:disabled):not(.community-count-static):hover { background: var(--k-card); }
.xpost .cpost-shared { padding: 0 0 6px 52px; font-size: 12.5px; opacity: .7; }
.xpost > :last-child { margin-bottom: 0; }
.xpost .cpost-menu { padding: 0; }
#community-feed.cfeed { gap: 8px; }
/* kostra, stav, koniec zoznamu */
.cpost-skel { display: flex; gap: 10px; padding: 14px; }
.cskel-av { width: 42px; height: 42px; border-radius: 50%; background: var(--k-card); flex: none; }
.cskel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cskel-lines i { display: block; height: 11px; border-radius: 999px; background: var(--k-card); }
.cskel-lines i:nth-child(1) { width: 40%; } .cskel-lines i:nth-child(2) { width: 92%; } .cskel-lines i:nth-child(3) { width: 70%; }
@media (prefers-reduced-motion: no-preference) { .cskel-av, .cskel-lines i { animation: cskel 1.2s ease-in-out infinite alternate; } }
@keyframes cskel { from { opacity: .55; } to { opacity: 1; } }
.cfeed-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; background: var(--b-tile); border-radius: 22px; text-align: center; }
.cfeed-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 14px 0 6px; font-size: 13px; opacity: .85; }
.cfeed-end { opacity: .6; }
.cfeed-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--k-line); border-top-color: var(--b-fg); }
@media (prefers-reduced-motion: no-preference) { .cfeed-spin { animation: cspin .8s linear infinite; } }
@keyframes cspin { to { transform: rotate(360deg); } }
@media (min-width: 700px) { #screen-komunita > .chd { margin-inline: 0; padding-inline: 0; } .cmenu { inset-inline-end: 0; } }
.chd-new { background: #D6F35A; color: #121212; }
@media (min-width: 900px) { #screen-komunita:not(.msg-mode) { max-width: 680px; margin-inline: auto; } }