/* ============================================================
   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;
  font-size: var(--fs-sm);
  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); }
/* ===== Ukážky dizajnov (Nastavenia → Vzhľad aplikácie) ===== */
/* Výber je vyšší ako displej telefónu: okno sa posúva (ako Nastavenia), Zavrieť zostáva dole na dosah. */
#modal-designs .modal {
  max-width: 440px;
  max-height: calc(100vh - var(--sp-5) * 2);    /* staršie prehliadače */
  max-height: calc(100dvh - var(--sp-5) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}
#modal-designs .modal-actions {
  position: sticky; bottom: 0; margin: 0 calc(-1 * var(--sp-6)); padding: var(--sp-3) var(--sp-6) var(--sp-4);
  background: linear-gradient(to top, var(--surface) 70%, transparent);
}
.design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
@media (min-width: 560px) { .design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.design-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text);
  font: inherit; text-align: start; cursor: pointer; min-width: 0;
}
.design-item:hover { border-color: var(--border-strong); }
.design-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.design-thumb { display: block; width: 100%; height: auto; aspect-ratio: 300 / 649; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-3); }
.design-thumb-current {
  display: grid; place-items: center; color: var(--accent); font-weight: var(--fw-black); font-size: var(--fs-md);
  background: radial-gradient(circle at 50% 35%, var(--accent-soft), var(--surface-3) 70%);
}
.design-current { border-color: var(--accent); }
.design-name { font-weight: var(--fw-bold); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.design-meta { font-size: var(--fs-xs); color: var(--text-dim); }
.design-current .design-meta { color: var(--accent); font-weight: var(--fw-bold); }

.design-view { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #000; }
.design-view[hidden] { display: none; }
.design-view-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.design-view-text { display: flex; flex-direction: column; min-width: 0; }
.design-view-title { font-weight: var(--fw-bold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-view-note { font-size: var(--fs-xs); color: var(--text-dim); }
.design-view-bar .btn { flex: 0 0 auto; min-height: 40px; }
.design-view-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
html.design-view-open, html.design-view-open body { overflow: hidden; }