/* Restart40+: mobile-first app styles */

:root {
  /* Warm orange brand: readable on white, soft tints for chips/rings */
  --accent: #E06A1F;
  --accent-soft: #FFF1E4;
  --accent-dark: #B85212;
  --accent-track: #F3E4D4;
  --ink: #1C1B1F;
  --ink-2: #6B6A70;
  --ink-3: #9C9BA1;
  --bg: #FAF8F5;
  --card: #FFFFFF;
  --line: #EEEBE7;
  --radius: 20px;
  --nav-h: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Visual Viewport (iOS Safari chrome) — nastavuje inline script */
  --vv-top: 0px;
  --vv-bottom: 0px;
  --app-height: 100dvh;
  --app-max: 520px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
  background: var(--bg);
  color-scheme: light;
  /* Mobil: vypnout pinch-zoom / double-tap zoom */
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* iOS: focus na input <16px spúšťa zoom. Drž form controls aspoň na 16px. */
@media (max-width: 767px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* Mobil: zabránit scrollu layout viewportu pod Safari chrome */
@media (max-width: 767px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- App shell ---- */
.app {
  width: 100%;
  max-width: var(--app-max);
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Edge-to-edge na mobilu: bez „rámečku“ */
  box-shadow: none;
}

/* Mobil: app = viditelná plocha (nad spodním/horním browser UI) */
@media (max-width: 767px) {
  .app {
    position: fixed;
    top: var(--vv-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--app-max);
    margin: 0 auto;
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    overflow: hidden;
  }
}

@media (min-width: 768px) {
  body {
    padding: 24px 16px;
    background: #EFE8DF;
  }

  .app {
    min-height: calc(100dvh - 48px);
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
      0 24px 64px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(0, 0, 0, 0.06);
  }
}

/* ---- Screens ---- */
.screens {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding:
    calc(16px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(var(--nav-h) + var(--safe-bottom) + 24px)
    calc(20px + var(--safe-left));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.screen.active {
  display: block;
}

.screen::-webkit-scrollbar {
  width: 0;
}

.app.is-login .nav {
  display: none;
}

.app.is-login .login-screen,
.app.is-login .paywall-screen {
  padding: 0;
}

/* Onboarding: bez spodního menu — víc místa na formulář + klávesnici */
.app.is-onboarding .nav {
  display: none;
}

.app.is-onboarding #s-onboarding {
  padding-bottom: calc(28px + var(--safe-bottom));
}

/* ---- Login / Register / Password ---- */
.login-screen {
  display: none;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  background: #1a120c;
  color: #fff;
}

.login-screen.active {
  display: block;
}

.login {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.login-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: min(46vh, 420px);
  overflow: hidden;
}

.login-stage--compact {
  min-height: min(38vh, 340px);
}

.login-media {
  position: absolute;
  inset: 0;
}

.login-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.06);
  animation: paywallKen 16s ease-in-out infinite alternate;
}

.login-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 10, 6, 0.18) 0%, rgba(18, 10, 6, 0.08) 28%, rgba(18, 10, 6, 0.55) 68%, rgba(18, 10, 6, 0.92) 100%),
    radial-gradient(90% 60% at 80% 10%, rgba(224, 106, 31, 0.28) 0%, transparent 55%);
  pointer-events: none;
}

.login-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding:
    calc(28px + var(--safe-top))
    calc(22px + var(--safe-right))
    28px
    calc(22px + var(--safe-left));
}

.login-brand {
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: paywallRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-brand span {
  color: #FFB074;
}

.login-title {
  margin-top: 16px;
  max-width: 12ch;
  font-size: clamp(32px, 9vw, 42px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: #fff;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  animation: paywallRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.login-lead {
  margin-top: 12px;
  max-width: 26ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 245, 235, 0.86);
  animation: paywallRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}

.login-sheet {
  position: relative;
  z-index: 2;
  margin-top: -18px;
  padding:
    22px
    calc(20px + var(--safe-right))
    calc(18px + var(--safe-bottom))
    calc(20px + var(--safe-left));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224, 106, 31, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #2A1A12 0%, #1A120C 100%);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.28);
  animation: paywallSheet 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255, 236, 220, 0.72);
}

.login-field input {
  width: 100%;
  border: 1px solid rgba(255, 236, 220, 0.16);
  background: rgba(255, 245, 235, 0.06);
  border-radius: 16px;
  padding: 14px 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-field input::placeholder {
  color: rgba(255, 236, 220, 0.38);
}

.login-field input:focus {
  border-color: rgba(242, 137, 58, 0.55);
  background: rgba(255, 245, 235, 0.1);
  box-shadow: 0 0 0 3px rgba(224, 106, 31, 0.22);
}

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px #2A1A12 inset;
}

.login-error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #FFB4A8;
  line-height: 1.35;
}

.login-success {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #8FD9A4;
  line-height: 1.4;
}

.login-submit {
  width: 100%;
  margin-top: 6px;
  min-height: 54px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(180deg, #F2893A 0%, #E06A1F 52%, #C45312 100%);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow:
    0 14px 28px rgba(224, 106, 31, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.login-submit:hover {
  filter: brightness(1.05);
}

.login-submit:active {
  transform: translateY(1px) scale(0.995);
}

.login-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.login-switch {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 236, 220, 0.62);
  line-height: 1.4;
}

.login-switch--secondary {
  margin-top: 10px;
}

.login-register-cta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 236, 220, 0.14);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-register-cta__hint {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 236, 220, 0.78);
}

.login-register {
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 176, 116, 0.85);
  background: rgba(255, 176, 116, 0.12);
  color: #FFE8D4;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.login-register:hover {
  filter: brightness(1.08);
  background: rgba(255, 176, 116, 0.2);
}

.login-register:active {
  transform: translateY(1px) scale(0.995);
}

.login-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #FFB074;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .login-media img,
  .login-brand,
  .login-title,
  .login-lead,
  .login-sheet {
    animation: none !important;
  }

  .login-media img {
    transform: none;
  }
}

/* ---- Paywall ---- */
.paywall-screen {
  display: none;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  background: #1a120c;
  color: #fff;
}

.paywall-screen.active {
  display: block;
}

.paywall {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.paywall-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: min(58vh, 520px);
  overflow: hidden;
}

.paywall-stage--compact {
  min-height: min(48vh, 420px);
}

.paywall-media {
  position: absolute;
  inset: 0;
}

.paywall-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.06);
  animation: paywallKen 16s ease-in-out infinite alternate;
}

@keyframes paywallKen {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

.paywall-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 10, 6, 0.18) 0%, rgba(18, 10, 6, 0.08) 28%, rgba(18, 10, 6, 0.55) 68%, rgba(18, 10, 6, 0.92) 100%),
    radial-gradient(90% 60% at 80% 10%, rgba(224, 106, 31, 0.28) 0%, transparent 55%);
  pointer-events: none;
}

.paywall-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding:
    calc(28px + var(--safe-top))
    calc(22px + var(--safe-right))
    28px
    calc(22px + var(--safe-left));
}

.paywall-brand {
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: paywallRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.paywall-brand span {
  color: #FFB074;
}

.paywall-title {
  margin-top: 18px;
  max-width: 12ch;
  font-size: clamp(34px, 9.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: #fff;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  animation: paywallRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.paywall-lead {
  margin-top: 12px;
  max-width: 26ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 245, 235, 0.86);
  animation: paywallRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}

@keyframes paywallRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.paywall-sheet {
  position: relative;
  z-index: 2;
  margin-top: -18px;
  padding:
    22px
    calc(20px + var(--safe-right))
    calc(18px + var(--safe-bottom))
    calc(20px + var(--safe-left));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224, 106, 31, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #2A1A12 0%, #1A120C 100%);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.28);
  animation: paywallSheet 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes paywallSheet {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.paywall-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.paywall-price {
  font-size: clamp(40px, 11vw, 52px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #fff;
  line-height: 1;
}

.paywall-interval {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 236, 220, 0.72);
}

.paywall-product {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #FFB074;
}

.paywall-benefits {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paywall-benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 245, 235, 0.88);
}

.paywall-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E06A1F;
  box-shadow: 0 0 0 3px rgba(224, 106, 31, 0.22);
}

.paywall-error {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #FFB4A8;
  line-height: 1.4;
}

.paywall-cta {
  width: 100%;
  margin-top: 18px;
  min-height: 54px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(180deg, #F2893A 0%, #E06A1F 52%, #C45312 100%);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow:
    0 14px 28px rgba(224, 106, 31, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.15s ease, filter 0.15s ease;
  animation: paywallCtaPulse 2.4s ease-in-out 1s 2;
}

@keyframes paywallCtaPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

.paywall-cta:hover {
  filter: brightness(1.05);
}

.paywall-cta:active {
  transform: translateY(1px) scale(0.995);
}

.paywall-cta:disabled {
  opacity: 0.65;
  cursor: wait;
  animation: none;
}

.paywall-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 236, 220, 0.55);
  line-height: 1.4;
}

.paywall-logout {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 236, 220, 0.58);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.paywall-sheet--plans {
  padding-top: 18px;
}

.paywall-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.paywall-plan {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 245, 235, 0.14);
  background: rgba(255, 245, 235, 0.04);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.paywall-plan:hover {
  border-color: rgba(255, 176, 116, 0.45);
}

.paywall-plan.is-selected {
  border-color: #E06A1F;
  background:
    linear-gradient(135deg, rgba(224, 106, 31, 0.18) 0%, rgba(224, 106, 31, 0.06) 100%),
    rgba(255, 245, 235, 0.05);
  box-shadow: 0 0 0 1px rgba(224, 106, 31, 0.25);
}

.paywall-plan:active {
  transform: scale(0.985);
}

.paywall-plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.paywall-plan__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255, 245, 235, 0.92);
}

.paywall-plan__save {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFB074;
}

.paywall-plan__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.paywall-plan__price {
  font-size: clamp(28px, 7.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
}

.paywall-plan__interval {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 245, 235, 0.62);
}

.paywall-plan__compare {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 245, 235, 0.48);
  text-decoration: line-through;
}

.paywall-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(24px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(20px + var(--safe-left));
}

.paywall-notice-overlay[hidden] {
  display: none !important;
}

.paywall-notice-overlay__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(10, 6, 4, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  animation: paywallNoticeFade 0.28s ease both;
}

.paywall-notice-overlay__card {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  padding: 28px 24px 22px;
  border-radius: 22px;
  border: 1.5px solid rgba(255, 176, 116, 0.4);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224, 106, 31, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, #2A1A12 0%, #1A120C 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: paywallNoticePop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.paywall-notice__title {
  margin: 0;
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
}

.paywall-notice__text {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 245, 235, 0.8);
}

.paywall-notice-overlay__card .paywall-cta {
  margin-top: 22px;
  width: 100%;
}

@keyframes paywallNoticeFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes paywallNoticePop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.paywall-success {
  min-height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .paywall-media img,
  .paywall-brand,
  .paywall-title,
  .paywall-lead,
  .paywall-sheet,
  .paywall-cta,
  .paywall-notice-overlay__backdrop,
  .paywall-notice-overlay__card {
    animation: none !important;
  }

  .paywall-media img {
    transform: none;
  }
}

/* ---- Bottom nav ---- */
.nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding: 8px 6px calc(10px + var(--safe-bottom));
  padding-left: calc(6px + var(--safe-left));
  padding-right: calc(6px + var(--safe-right));
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid rgba(238, 235, 231, 0.8);
  display: flex;
  z-index: 40;
}

.nav button {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 4px 1px;
  letter-spacing: -0.02em;
}

.nav button[hidden] {
  display: none;
}

.nav button svg {
  width: 24px;
  height: 24px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon-wrap {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

.nav-dot {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(250, 248, 245, 0.95);
  pointer-events: none;
}

.nav-dot[hidden] {
  display: none;
}

.nav button.on {
  color: var(--accent);
}

.nav button.on svg {
  stroke: var(--accent);
}

/* ---- Typography & shared ---- */
h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.sub {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.card.clickable,
.clickable {
  cursor: pointer;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 99px;
}

.chip.gray {
  color: var(--ink-2);
  background: #F1F0EF;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn[hidden] {
  display: none !important;
}

.btn:active {
  transform: scale(0.98);
}

.btn:hover {
  background: var(--accent-dark);
}

.btn.ghost {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

.btn.ghost:hover {
  background: #F7F6F5;
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
  cursor: wait;
}

.btn.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.btn:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.link {
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(145deg, #FFE8D2 0%, #F3C59A 55%, #E8A66E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--accent-dark);
  font-size: 15px;
  flex: none;
  cursor: pointer;
  border: none;
  overflow: hidden;
  position: relative;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(184, 82, 18, 0.12);
}

.avatar-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  user-select: none;
  z-index: 0;
}

.avatar.has-photo .avatar-letter {
  visibility: hidden;
}

.avatar img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.avatar.has-photo img {
  display: block;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  font-size: 28px;
  cursor: pointer;
  /* Ikona foťáku musí vyčnívat — kruh řežeme jen na fotce/letteru */
  overflow: visible;
}

.profile-avatar .avatar-letter {
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(145deg, #FFE8D2 0%, #F3C59A 55%, #E8A66E 100%);
}

.profile-avatar img {
  border-radius: 50%;
}

.profile-avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(224, 106, 31, 0.35);
  border: 2px solid #fff;
  pointer-events: none;
}

.profile-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  max-width: 140px;
}

.profile-avatar-actions .link {
  font-size: 12px;
  font-weight: 700;
}

.profile-avatar-remove {
  color: var(--ink-3);
}

.profile-head-copy {
  flex: 1;
  min-width: 0;
}

.profile-email {
  margin-top: 2px;
  word-break: break-all;
}

.thumb {
  border-radius: 16px;
  background: linear-gradient(135deg, #EFEDEA, #E3E1DD);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.thumb .play {
  position: relative;
  z-index: 2;
}

.play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex: none;
}

.play::after {
  content: "";
  border-left: 14px solid var(--accent);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}

.dur {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(28, 27, 31, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  z-index: 2;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: 12px;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}

/* Sticky top bar (article + recipe detail)
   Bez záporného top marginu — ten robil „dieru“, cez ktorú preblikával obsah. */
#s-article.screen,
#s-recipe.screen,
#s-body-metrics.screen,
#s-onboarding-answers.screen {
  padding-top: 0;
  background: var(--bg);
}

/* ---- Onboarding answers (Moje odpovědi) ---- */
.oav-loading {
  margin-top: 24px;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

.oav-hero {
  margin: 4px -4px 0;
  padding: 18px 18px 20px;
  border-radius: 26px;
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(240, 138, 53, 0.18) 0%, transparent 55%),
    linear-gradient(165deg, #FFF7EF 0%, #FAF8F5 50%, #FFFFFF 100%);
}

.oav-hero__eyebrow {
  display: inline-flex;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(224, 106, 31, 0.12);
  padding: 5px 10px;
  border-radius: 999px;
}

.oav-hero__title {
  margin-top: 12px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.oav-hero__lead {
  margin-top: 8px;
  max-width: 36ch;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.oav-section {
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
  box-shadow: 0 10px 24px rgba(28, 27, 31, 0.05);
}

.oav-section__title {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.oav-section__count {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.oav-row {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.oav-row:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.oav-row__q {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1.35;
  margin-bottom: 4px;
}

.oav-row__a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.oav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.oav-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #FAF8F5;
  border: 1px solid rgba(28, 27, 31, 0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* ---- Body metrics (Tvoje údaje) ---- */
.bm-hero {
  position: relative;
  margin: 4px -4px 0;
  padding: 18px 18px 20px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(240, 138, 53, 0.22) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(224, 106, 31, 0.1) 0%, transparent 50%),
    linear-gradient(165deg, #FFF7EF 0%, #FAF8F5 48%, #FFFFFF 100%);
}

.bm-hero__eyebrow {
  display: inline-flex;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(224, 106, 31, 0.12);
  padding: 5px 10px;
  border-radius: 999px;
}

.bm-hero__title {
  margin-top: 12px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: clamp(30px, 7.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.bm-hero__lead {
  margin-top: 8px;
  max-width: 32ch;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.bm-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.bm-grid--hero {
  grid-template-columns: 1fr 1fr;
}

.bm-kpi {
  position: relative;
  padding: 14px 14px 13px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
  box-shadow: 0 10px 24px rgba(28, 27, 31, 0.05);
  overflow: hidden;
}

.bm-kpi--wide {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, #F08A35 0%, var(--accent) 48%, var(--accent-dark) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 12px 28px rgba(224, 106, 31, 0.24);
}

.bm-kpi__label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bm-kpi--wide .bm-kpi__label {
  color: rgba(255, 255, 255, 0.85);
}

.bm-kpi__value {
  display: block;
  margin-top: 8px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.bm-kpi--wide .bm-kpi__value {
  color: #fff;
  font-size: 34px;
}

.bm-kpi__unit {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.75;
}

.bm-kpi__meta {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
}

.bm-kpi--wide .bm-kpi__meta {
  color: rgba(255, 255, 255, 0.9);
}

.bm-panel {
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
  box-shadow: 0 10px 24px rgba(28, 27, 31, 0.05);
}

.bm-panel--soft {
  background:
    linear-gradient(165deg, #FFF7EF 0%, #fff 55%);
}

.bm-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.bm-panel__head h2 {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.bm-panel__tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 4px 9px;
  border-radius: 999px;
}

.bm-panel__note {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.bm-optimal {
  display: grid;
  gap: 10px;
}

.bm-optimal__main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #FFF1E4 0%, #FFE4CC 100%);
}

.bm-optimal__main b {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-dark);
}

.bm-optimal__main span {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: right;
  line-height: 1.35;
}

.bm-optimal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bm-optimal__cell {
  padding: 12px;
  border-radius: 16px;
  background: #FAF8F5;
}

.bm-optimal__cell small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bm-optimal__cell b {
  display: block;
  margin-top: 4px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.bm-energy {
  display: grid;
  gap: 10px;
}

.bm-energy__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #FAF8F5;
}

.bm-energy__row.is-target {
  background: linear-gradient(135deg, rgba(224, 106, 31, 0.12), rgba(240, 138, 53, 0.08));
  border: 1px solid rgba(224, 106, 31, 0.18);
}

.bm-energy__row span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
}

.bm-energy__row b {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.bm-macros {
  display: grid;
  gap: 10px;
}

.bm-macro {
  padding: 12px 14px;
  border-radius: 16px;
  background: #FAF8F5;
}

.bm-macro__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.bm-macro__top span {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.bm-macro__top b {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bm-macro__track {
  height: 8px;
  border-radius: 99px;
  background: #EEE9E4;
  overflow: hidden;
}

.bm-macro__track i {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.bm-macro.is-protein .bm-macro__track i {
  background: linear-gradient(90deg, #E06A1F, #F08A35);
}

.bm-macro.is-carbs .bm-macro__track i {
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.bm-macro.is-fat .bm-macro__track i {
  background: linear-gradient(90deg, #CA8A04, #EAB308);
}

.bm-extras {
  display: grid;
  gap: 8px;
}

.bm-extra {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.bm-extra:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bm-extra span {
  color: var(--ink-2);
  font-weight: 600;
}

.bm-extra b {
  font-weight: 800;
  color: var(--ink);
  text-align: right;
}

.bm-disclaimer {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
}

.bm-empty {
  margin-top: 8px;
  padding: 28px 22px;
  border-radius: 26px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(240, 138, 53, 0.16) 0%, transparent 55%),
    #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
  box-shadow: 0 10px 24px rgba(28, 27, 31, 0.05);
}

.bm-empty__chip {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 999px;
}

.bm-empty__title {
  margin-top: 14px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.bm-empty__lead {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.screen-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  isolation: isolate;
  margin:
    0
    calc(-20px - var(--safe-right))
    14px
    calc(-20px - var(--safe-left));
  padding:
    calc(10px + var(--safe-top))
    calc(16px + var(--safe-right))
    10px
    calc(12px + var(--safe-left));
  background: var(--bg);
  border-bottom: none;
  box-shadow: none;
}

/* Kryt nad sticky (safe-area / overscroll), aby nič neprebliklo hore */
.screen-sticky-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 80px;
  background: var(--bg);
  pointer-events: none;
}

.screen-sticky-bar__back {
  flex: 0 0 auto;
  margin: 0;
  min-height: 40px;
  padding: 8px 8px 8px 4px;
  color: var(--ink);
  font-weight: 700;
}

.screen-sticky-bar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

/* ---- Home header (no logo) ---- */
.home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
}

.home-header-text {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.home-header-text .sub {
  margin-bottom: 4px;
}

.home-header-text h1 {
  font-size: 24px;
  line-height: 1.15;
}

.home-avatar {
  width: 48px;
  height: 48px;
  flex: none;
  margin-top: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent-soft);
}

/* Dominant home teaser: Tvůj plán */
.plan-teaser {
  border: none;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #F08A35 0%, var(--accent) 48%, var(--accent-dark) 100%);
  box-shadow: 0 10px 28px rgba(224, 106, 31, 0.28);
  position: relative;
}

.plan-teaser::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.plan-teaser::after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: -15%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.plan-teaser:hover {
  filter: brightness(1.03);
}

.plan-teaser-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
}

.plan-teaser-inner[hidden],
.plan-teaser-thermo[hidden],
.plan-teaser-gate[hidden],
#plan-ready-wrap[hidden],
#plan-gate[hidden] {
  display: none !important;
}

.plan-teaser-copy {
  flex: 1;
  min-width: 0;
}

.plan-teaser-chip {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  padding: 5px 10px;
  border-radius: 99px;
}

.plan-teaser-copy h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1.25;
}

.plan-teaser-copy p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.35;
  max-width: 18ch;
}

.plan-teaser-arrow {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.plan-teaser-ring-wrap {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),
    0 0 0 3px rgba(255, 255, 255, 0.35);
}

.plan-teaser-ring {
  width: 60px;
  height: 60px;
  flex: none;
}

.plan-teaser-ring i {
  width: 44px;
  height: 44px;
  background: #fff;
  color: #9A5A2E;
  font-size: 13px;
  font-weight: 700;
}

.plan-teaser-thermo {
  position: relative;
  z-index: 1;
  padding: 0 14px 14px;
}

/* Light inset so red→green reads clearly on orange card */
.plan-teaser-thermo-panel {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.plan-teaser-thermo .thermo-track {
  height: 12px;
  background: #EEE9E4;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.plan-teaser-thermo .thermo-spectrum {
  background-image: linear-gradient(
    90deg,
    #E23B3B 0%,
    #F07A2E 38%,
    #E8C23A 62%,
    #7ED957 78%,
    #22C55E 80%,
    #16A34A 100%
  );
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.25);
}

.plan-teaser-thermo .thermo-tick {
  background: var(--ink);
  opacity: 0.7;
  width: 2px;
  box-shadow: 0 0 0 2px #fff;
}

.plan-teaser-thermo-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.plan-teaser-thermo-caption {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.3;
  white-space: nowrap;
}

.plan-teaser-thermo-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  line-height: 1.35;
}

.plan-teaser-thermo-pct {
  flex: none;
}

.plan-teaser-thermo-pct strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #16A34A;
}

.plan-teaser-thermo-stats.is-low .plan-teaser-thermo-pct strong {
  color: #C2410C;
}

.plan-teaser-thermo-detail {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.plan-teaser-thermo-meta strong {
  color: #16A34A;
  font-weight: 800;
}

/* Live koučink: event invitation card */
.live-event {
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #F0D2B8;
  box-shadow: 0 8px 24px rgba(224, 106, 31, 0.1);
}

.live-event-banner {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #E8D5C4;
}

.live-event-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.live-event-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28, 27, 31, 0.05) 0%,
    rgba(28, 27, 31, 0.45) 100%
  );
}

.live-event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(28, 27, 31, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 99px;
}

.live-event-body {
  display: flex;
  gap: 14px;
  padding: 16px 16px 4px;
  align-items: flex-start;
}

.live-event-when {
  flex: none;
  width: 56px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid #F5E0CC;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 12px;
  text-align: center;
}

.live-event-day {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.live-event-date {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 2px;
}

.live-event-time {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: #fff;
  padding: 3px 7px;
  border-radius: 8px;
}

.live-event-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.live-event-info h2 {
  font-size: 17px;
  line-height: 1.25;
}

.live-event-info > p {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
  line-height: 1.4;
}

.live-event-host {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.live-event-host img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #F0D2B8;
}

.live-event-host span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.live-event-actions {
  display: block;
  padding: 14px 16px 16px;
}

.live-event-actions .btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
}

.live-event-actions .btn:disabled {
  opacity: 0.85;
  cursor: default;
}

.live-event-status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
}

.day-plan-cover {
  position: relative;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
}

.day-plan-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.day-plan-cover .dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
}

.day-plan-video {
  background: #17161A;
}

.day-plan-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 31, 0.22);
  pointer-events: none;
  z-index: 1;
}

.day-plan-video .play {
  position: relative;
  z-index: 2;
}

.day-plan-video .dur {
  z-index: 2;
}

.day-plan-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(240, 138, 53, 0.35) 0%, transparent 55%),
    #17161A;
}

.day-plan-video--embed {
  background: #17161A;
}

.day-plan-video--embed::after {
  display: none;
}

.day-plan-video--embed .dur {
  z-index: 2;
  pointer-events: none;
}

.coaching-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: #17161A;
}

.article-card__cover .coaching-embed {
  z-index: 1;
}

.coaching-card.has-embed .coaching-card__dur {
  z-index: 3;
}

.workout-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workout-actions[hidden],
.workout-actions .btn[hidden] {
  display: none !important;
}

.day-plan.is-done {
  border-color: rgba(46, 125, 50, 0.22);
  background: linear-gradient(145deg, #F4FBF4, #fff);
}

.day-plan.is-done .chip.done {
  background: rgba(46, 125, 50, 0.12);
  color: #2E7D32;
}

.day-plan.is-rest {
  background: linear-gradient(160deg, #f3f6f4 0%, #e8efea 55%, #f7f3ee 100%);
  border: 1px solid rgba(45, 74, 62, 0.08);
  cursor: default;
}

.day-plan.is-rest .chip {
  background: rgba(45, 74, 62, 0.1);
  color: #3d5c4c;
}

.day-plan-rest {
  margin-top: 12px;
  height: 120px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
}

.day-plan-rest-icon {
  width: 52px;
  height: 52px;
  display: block;
  opacity: 0.7;
  color: #3d5c4c;
}

/* ---- Week strip (horizontal scroll) ---- */
.week-wrap {
  margin-top: 14px;
  margin-left: -20px;
  margin-right: -20px;
  position: relative;
}

.week-wrap::before,
.week-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  z-index: 2;
  pointer-events: none;
}

.week-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.week-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

.week {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 2px 20px 4px;
  scrollbar-width: none;
  cursor: grab;
}

.week::-webkit-scrollbar {
  display: none;
}

.week.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.day {
  flex: 0 0 52px;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  scroll-snap-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  font: inherit;
  color: inherit;
}

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

.day span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
}

.day b {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}

.day .day-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: transparent;
}

.day .day-mark.empty {
  width: 6px;
  height: 6px;
  background: var(--line);
}

.day.done .day-mark:not(.empty) {
  background: var(--accent);
  color: #fff;
}

.day.is-today:not(.selected) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.day.selected {
  background: var(--accent);
  border-color: var(--accent);
}

.day.selected > span:first-child,
.day.selected > b {
  color: #fff;
}

.day.selected .day-mark.empty {
  background: rgba(255, 255, 255, 0.45);
}

.day.selected.done .day-mark:not(.empty) {
  background: #fff;
  color: var(--accent);
}

.day.future,
.day:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.day.future:active,
.day:disabled:active {
  transform: none;
}

/* ---- Plan page hero ---- */
.plan-hero {
  position: relative;
  overflow: hidden;
  padding: 18px 16px 16px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(145deg, #FFF6EC 0%, #FFE8D2 42%, #F8D9B8 100%);
  border: 1px solid rgba(224, 106, 31, 0.14);
}

.plan-hero::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(224, 106, 31, 0.1);
  pointer-events: none;
}

.plan-hero-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(224, 106, 31, 0.18);
  padding: 5px 10px;
  border-radius: 99px;
}

.plan-hero-title {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.plan-hero-lead {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
}

.plan-hero-date {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(28, 27, 31, 0.06);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

/* ---- Habits dashboard ---- */
.habits-dash {
  margin-top: 16px;
}

.habits-dash .dash-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.habits-dash .dash-copy {
  flex: 1;
  min-width: 0;
}

.habits-dash .dash-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.habits-dash .dash-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.01em;
}

.habits-dash .dash-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.4;
}

.habits-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.habits-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.habits-section-head h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.habits-section-count {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 4px 9px;
  border-radius: 999px;
}

.habits-section-hint {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.habits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.habit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #F7F6F5;
  border: 1px solid transparent;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.habit:active {
  transform: scale(0.985);
}

.habit:hover {
  border-color: #E4E2E0;
}

.habit.done {
  background: #EAF6EE;
  border-color: transparent;
}

.habit.missed {
  background: #FDEEEC;
  border-color: transparent;
}

.habit:not(.done):not(.missed) .habit-check {
  border-color: #D0CFCD;
  background: #fff;
  color: transparent;
}

.habit .habit-check {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1.5px solid #D5D4D2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.habit.done .habit-check {
  background: #3A9B58;
  border-color: #3A9B58;
  color: #fff;
}

.habit.missed .habit-check {
  background: #D64545;
  border-color: #D64545;
  color: #fff;
  font-size: 12px;
}

.habit-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
  font-size: 18px;
  line-height: 1;
}

.habit.done .habit-icon {
  background: rgba(255, 255, 255, 0.7);
}

.habit.missed .habit-icon {
  background: rgba(255, 255, 255, 0.7);
}

.habit-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.habit .habit-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.habit .habit-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.3;
}

.habit.done .habit-meta {
  color: #2F8A4C;
}

.habit.done .habit-name {
  color: #1F5C34;
}

.habit.missed .habit-meta {
  color: #C94444;
}

.habit.missed .habit-name {
  color: #8E2F2F;
}

/* Thermometer progress */
.habits-bar {
  margin-top: 16px;
}

.thermo-track {
  position: relative;
  height: 14px;
  border-radius: 99px;
  background: #EFEDEA;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.thermo-spectrum {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 99px;
  background-image: linear-gradient(
    90deg,
    #E23B3B 0%,
    #F07A2E 35%,
    #E8C23A 62%,
    #7ED957 78%,
    #22C55E 80%,
    #16A34A 100%
  );
  background-repeat: no-repeat;
  background-position: left center;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.2);
}

.thermo-threshold {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 0;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.thermo-tick {
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  opacity: 0.55;
  box-shadow: 0 0 0 2px rgba(250, 250, 249, 0.9);
}

.thermo-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  position: relative;
}

.thermo-scale .thermo-goal {
  position: absolute;
  left: 80%;
  transform: translateX(-50%);
  color: var(--ink-2);
  font-weight: 700;
  white-space: nowrap;
}

.habits-bar .bar-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
}

.habits-bar .bar-meta strong {
  font-weight: 700;
}

.habits-bar .bar-meta.ok strong {
  color: #2F8A4C;
}

.habits-bar .bar-meta.low strong {
  color: #C94444;
}

/* ---- Habit modal (bottom sheet) ---- */
.modal-root {
  position: fixed;
  /* Visual Viewport: nepod Safari spodní/horní chrome */
  top: var(--vv-top, 0px);
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: var(--app-height, 100dvh);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.modal-root[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 31, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFadeIn 0.22s ease;
}

.modal-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--app-max);
  max-height: calc(var(--app-height, 100dvh) - 8px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 12px 22px calc(22px + var(--safe-bottom));
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
  animation: modalSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}

@media (min-width: 768px) {
  .modal-root {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    align-items: center;
    padding: 24px;
  }

  .modal-sheet {
    border-radius: 28px;
    padding: 28px 28px 26px;
    max-height: min(90vh, 760px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    animation: modalPop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .modal-handle {
    display: none;
  }
}

.modal-handle {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: #E0DFDD;
  margin: 0 auto 14px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #F3F2F1;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.modal-close:hover {
  background: #E8E7E5;
}

.modal-icon {
  width: 72px;
  height: 72px;
  margin: 4px auto 0;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--accent-soft), #fff);
  border: 1px solid #F5E0CC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 0 8px 24px rgba(224, 106, 31, 0.16);
}

.modal-root.is-done .modal-icon {
  background: linear-gradient(145deg, #EAF6EE, #fff);
  border-color: #D5EDDC;
  box-shadow: 0 8px 24px rgba(58, 155, 88, 0.14);
}

.modal-root.is-missed .modal-icon {
  background: linear-gradient(145deg, #FDEEEC, #fff);
  border-color: #F5D0CE;
  box-shadow: 0 8px 24px rgba(214, 69, 69, 0.14);
}

.modal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: #F3F2F1;
  padding: 5px 10px;
  border-radius: 99px;
}

.modal-root.is-done .modal-status {
  color: #2F8A4C;
  background: #EAF6EE;
}

.modal-root.is-missed .modal-status {
  color: #C94444;
  background: #FDEEEC;
}

.modal-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.25;
  padding: 0 8px;
}

.modal-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 8px;
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
}

.modal-tip {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #FAFAF9;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  text-align: left;
}

.modal-tip strong {
  color: var(--ink);
  font-weight: 700;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions--stack {
  grid-template-columns: 1fr;
}

.modal-sheet--info {
  text-align: left;
}

.modal-sheet--info .modal-title,
.modal-sheet--info .modal-desc {
  text-align: left;
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #FAFAF9;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.contact-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-row-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.membership-card {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #FFF7EE, #fff);
  border: 1px solid rgba(224, 106, 31, 0.16);
}

.membership-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.membership-card-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.membership-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(224, 106, 31, 0.12);
}

.membership-card-meta span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.membership-card-meta b {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.membership-card-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.btn-danger {
  background: #D64545;
  color: #fff;
  border: none;
}

.btn-danger:hover {
  background: #C03A3A;
}

.modal-choice {
  margin: 0;
  padding: 13px 12px;
  font-size: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  box-shadow: none;
}

.modal-choice:hover {
  background: #F7F6F5;
}

.modal-choice.is-done.is-active {
  background: #3A9B58;
  border-color: #3A9B58;
  color: #fff;
}

.modal-choice.is-done.is-active:hover {
  background: #2F8A4C;
}

.modal-choice.is-undone.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.modal-choice.is-undone.is-active:hover {
  background: #2A292E;
}

.modal-choice.is-done:not(.is-active):hover {
  border-color: #3A9B58;
  color: #2F8A4C;
  background: #EAF6EE;
}

.modal-choice.is-undone:not(.is-active):hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

body.modal-open {
  overflow: hidden;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ring.sm {
  width: 56px;
  height: 56px;
}

.ring.sm i {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

/* ---- Progress ring ---- */
.ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 216deg, var(--accent-track) 216deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.ring i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Dashboard „Tvůj plán“: percentá v kruhu — čitelné, ne křiklavé */
.ring.plan-teaser-ring i {
  color: #9A5A2E;
  font-weight: 700;
  font-size: 13px;
}

/* ---- Program list ---- */
.program-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Empty / preparing content ---- */
.content-empty {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 24px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(224, 106, 31, 0.14);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(224, 106, 31, 0.16) 0%, transparent 52%),
    linear-gradient(165deg, #FFF9F3 0%, #FAF8F5 46%, #F3E8DC 100%);
  box-shadow: 0 10px 28px rgba(60, 36, 18, 0.05);
}

.content-empty::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(224, 106, 31, 0.07);
  pointer-events: none;
}

.content-empty__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(224, 106, 31, 0.12);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content-empty__mark {
  margin-top: 16px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(224, 106, 31, 0.12);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.content-empty__mark svg {
  width: 28px;
  height: 28px;
  display: block;
}

.content-empty__title {
  display: block;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.content-empty__lead {
  margin-top: 8px;
  max-width: 34ch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.content-empty--compact {
  padding: 18px 16px 16px;
}

.content-empty--compact .content-empty__mark {
  margin-top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.content-empty--compact .content-empty__mark svg {
  width: 24px;
  height: 24px;
}

.content-empty--compact .content-empty__title {
  margin-top: 12px;
  font-size: 16px;
}

.content-empty--compact .content-empty__lead {
  font-size: 13px;
}

.rgrid .content-empty {
  grid-column: 1 / -1;
}

.program-empty {
  padding: 28px 20px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.program-empty b {
  display: block;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.program-empty p {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.program-card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.program-card:hover {
  border-color: #e0d9d0;
}

.program-card:active {
  transform: scale(0.985);
}

.program-card__cover {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  background: var(--accent-soft);
  overflow: hidden;
}

/* Rovnaký fill fix ako recepty — globálne img { height:auto; max-width:100% } inak kazí cover. */
.program-card__cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

.program-card__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background:
    linear-gradient(145deg, var(--accent-soft) 0%, #fff 55%, #f3ebe2 100%);
}

.program-card__chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  margin-bottom: 8px;
}

.program-card.is-done .program-card__chip {
  background: #EAF6EE;
  color: #2F8A4C;
}

.program-card__body {
  padding: 16px 18px 18px;
}

.program-card__body b {
  display: block;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.program-card__desc {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.program-card__meta {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}

.program-card.is-done .program-card__meta {
  color: #2F8A4C;
}

.program-card__progress {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px 12px;
  border-radius: 16px;
  background: rgba(28, 27, 31, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(28, 27, 31, 0.18);
  pointer-events: none;
}

.program-card__progress-num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: #fff;
}

.program-card__progress-num b {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
}

.program-card__progress-num i {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 1px;
}

.program-card__progress-num em {
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.88);
}

.program-card__progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.program-card--series.is-done .program-card__progress,
.program-card.is-done .program-card__progress {
  background: rgba(47, 138, 76, 0.78);
}

.program-card--series.is-done .program-card__progress-num b,
.program-card--series.is-done .program-card__progress-num em,
.program-card--series.is-done .program-card__progress-num i,
.program-card--series.is-done .program-card__progress-label,
.program-card.is-done .program-card__progress-num b,
.program-card.is-done .program-card__progress-num em,
.program-card.is-done .program-card__progress-num i,
.program-card.is-done .program-card__progress-label {
  color: #fff;
}

.prog {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.prog:hover {
  border-color: #ddd;
}

.prog .ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  font-size: 20px;
  overflow: hidden;
}

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

.prog .ic.gray {
  background: #F1F0EF;
}

.prog small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.prog b {
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.prog p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.4;
}

.prog.today-hl {
  border: 1.5px solid var(--accent);
}

.prog.is-locked {
  opacity: 0.72;
  border-style: dashed;
  border-color: var(--line);
}

.prog.is-locked .ic {
  filter: grayscale(0.35);
}

.prog.is-done {
  border-color: #86efac;
}

/* ---- Lessons ---- */
.lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lesson:last-child {
  border-bottom: none;
}

.lesson.is-open:hover,
.lesson.is-open:active {
  background: rgba(224, 106, 31, 0.04);
}

.lesson.is-active {
  background: var(--accent-soft);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 14px;
  border-bottom-color: transparent;
}

.lesson.is-active + .lesson {
  border-top: none;
}

.lesson.is-locked {
  opacity: 0.55;
  cursor: default;
}

.lesson .num {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #F1F0EF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  flex: none;
}

.lesson .num.on {
  background: var(--accent-soft);
  color: var(--accent);
}

.lesson.is-active .num.on {
  background: #fff;
  color: var(--accent-dark);
}

.lesson b {
  font-size: 14px;
  color: var(--ink);
}

.lesson span {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ---- Section hero (Tréninky / Koučink / Články / Recepty) ---- */
.section-hero {
  position: relative;
  margin: 4px -4px 0;
  padding: 18px 18px 20px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(240, 138, 53, 0.22) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(224, 106, 31, 0.1) 0%, transparent 50%),
    linear-gradient(165deg, #FFF7EF 0%, #FAF8F5 48%, #FFFFFF 100%);
  animation: sectionHeroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.section-hero::before {
  content: "";
  position: absolute;
  right: -28px;
  top: -36px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(224, 106, 31, 0.08);
  pointer-events: none;
}

.section-hero__eyebrow {
  position: relative;
  display: inline-flex;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(224, 106, 31, 0.12);
  padding: 5px 10px;
  border-radius: 999px;
}

.section-hero__title {
  position: relative;
  margin-top: 12px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: clamp(32px, 8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--ink);
}

.section-hero__lead {
  position: relative;
  margin-top: 8px;
  max-width: 28ch;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.upsell-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#s-recipes .upsell-stack {
  margin-top: 14px;
  animation: sectionHeroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.upsell-stack--plan {
  margin: 0 0 16px;
}

.habits-dash .upsell-stack--plan .meal-upsell {
  box-shadow: 0 8px 20px rgba(224, 106, 31, 0.18);
}

.upsell-stack[hidden] {
  display: none !important;
}

#s-recipes .meal-upsell,
.upsell-stack .meal-upsell {
  margin-top: 0;
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(224, 106, 31, 0.24);
}

.meal-upsell--program {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
    linear-gradient(135deg, #2A211C 0%, #4A3428 48%, #E06A1F 100%);
  box-shadow: 0 12px 28px rgba(42, 33, 28, 0.28);
}

.recipes-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  margin-bottom: 12px;
}

.recipes-section-title {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.recipes-section-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
  background: #F1EEEA;
  padding: 4px 9px;
  border-radius: 999px;
}

.recipes-section-count[hidden] {
  display: none !important;
}

.rgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 0;
}

.rcard {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: left;
  padding: 0;
  font: inherit;
  line-height: normal;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(28, 27, 31, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: rcardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rcard-delay, 0ms);
}

.rcard:active {
  transform: scale(0.975);
  box-shadow: 0 6px 16px rgba(28, 27, 31, 0.08);
}

/* Padding-bottom trick = spoľahlivá výška na všetkých browseroch (nie len aspect-ratio). */
.rcard__cover {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 112%; /* ~9:10, viac jedla vo frame */
  background:
    linear-gradient(160deg, #FFE8D2 0%, var(--accent-soft) 55%, #FFF8F1 100%);
  overflow: hidden;
  flex: 0 0 auto;
}

.rcard__cover img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  transform: scale(1.02);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.rcard:active .rcard__cover img {
  transform: scale(1.06);
}

.rcard__cover-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, transparent 0%, rgba(18, 12, 8, 0.42) 100%);
  pointer-events: none;
  z-index: 1;
}

.rcard__pills {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;
}

.rcard__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.rcard__pill--protein {
  background: var(--accent);
  color: #fff;
}

.rcard__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  opacity: 0.55;
}

.rcard__body,
.rcard .pad {
  padding: 12px 12px 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rcard b {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcard__meta,
.rcard span:not(.rcard__pill):not(.content-new-badge) {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  margin-top: 0;
  display: block;
}

.rcard .content-new-badge,
.article-card .content-new-badge,
.coaching-card .content-new-badge {
  display: inline-flex;
  margin-top: 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.rcard .content-new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}

@keyframes sectionHeroIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rcardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-hero,
  #s-recipes .meal-upsell,
  .rcard {
    animation: none !important;
  }

  .rcard__cover img {
    transition: none;
  }
}

.upsell {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: var(--radius);
  padding: 20px;
  color: #fff;
  margin-top: 18px;
}

.upsell h2 {
  color: #fff;
}

.upsell p {
  font-size: 13px;
  opacity: 0.92;
  margin-top: 6px;
  line-height: 1.45;
}

.upsell .btn {
  background: #fff;
  color: var(--accent);
  margin-top: 14px;
  padding: 12px;
}

.meal-upsell {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: none;
  border-radius: 18px;
  padding: 12px 14px;
  cursor: pointer;
  color: #fff;
  font: inherit;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
    linear-gradient(135deg, #F08A35 0%, var(--accent) 48%, var(--accent-dark) 100%);
  box-shadow: 0 8px 22px rgba(224, 106, 31, 0.22);
}

.meal-upsell[hidden] {
  display: none !important;
}

.meal-upsell:active {
  transform: scale(0.985);
}

.meal-upsell-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.meal-upsell-chip {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.meal-upsell-copy strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.meal-upsell-copy > span:last-child {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

.meal-upsell-cta {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.avatar-prompt-sheet {
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 241, 228, 0.98) 0%, transparent 58%),
    #fff;
  padding-top: 10px;
}

.avatar-prompt-hero {
  position: relative;
  height: 118px;
  margin: 6px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.avatar-prompt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.avatar-prompt-orb--a {
  width: 140px;
  height: 140px;
  background: rgba(224, 106, 31, 0.12);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar-prompt-orb--b {
  width: 72px;
  height: 72px;
  background: rgba(224, 106, 31, 0.18);
  top: 18px;
  right: 18%;
}

.avatar-prompt-faces {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-prompt-face {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(28, 27, 31, 0.12);
  background:
    linear-gradient(145deg, #f3e4d4 0%, #e8d5c0 100%);
}

.avatar-prompt-face--1 {
  transform: translateX(10px) scale(0.9);
  opacity: 0.85;
  background:
    linear-gradient(145deg, #ead7c4, #d9b89a);
}

.avatar-prompt-face--3 {
  transform: translateX(-10px) scale(0.9);
  opacity: 0.85;
  background:
    linear-gradient(145deg, #f0dcc8, #c9a688);
}

.avatar-prompt-face--2.is-you {
  width: 72px;
  height: 72px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  background:
    linear-gradient(160deg, #fff 0%, var(--accent-soft) 55%, #f3e0cf 100%);
  box-shadow:
    0 0 0 4px rgba(224, 106, 31, 0.12),
    0 10px 24px rgba(28, 27, 31, 0.14);
  animation: avatarPromptPulse 2.4s ease-in-out infinite;
}

.avatar-prompt-eyebrow {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.avatar-prompt-sheet .modal-title {
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.avatar-prompt-desc {
  margin: 10px auto 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.avatar-prompt-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 8px;
}

.avatar-prompt-points li {
  position: relative;
  padding: 10px 12px 10px 36px;
  border-radius: 14px;
  background: rgba(255, 241, 228, 0.65);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
}

.avatar-prompt-points li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 28%, transparent 30%),
    var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 106, 31, 0.15);
}

.avatar-prompt-sheet .modal-actions {
  margin-top: 18px;
}

/* ---- iOS app promo (web only) ---- */
.ios-app-promo-sheet {
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 241, 228, 0.98) 0%, transparent 58%),
    #fff;
  padding-top: 10px;
}

.ios-app-promo-hero {
  position: relative;
  height: 132px;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.ios-app-promo-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(224, 106, 31, 0.16);
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ios-app-promo-phone {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 16px 32px rgba(28, 27, 31, 0.18),
    0 0 0 3px rgba(255, 255, 255, 0.9);
  transform: rotate(-4deg);
}

.ios-app-promo-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ios-app-promo-badge {
  position: absolute;
  z-index: 2;
  right: calc(50% - 78px);
  bottom: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #1c1b1f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 16px rgba(28, 27, 31, 0.2);
}

.ios-app-promo-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.ios-app-promo-sheet .modal-title {
  margin-top: 0;
}

.ios-app-promo-desc {
  margin: 8px auto 0;
  max-width: 32ch;
}

.ios-app-promo-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 8px;
}

.ios-app-promo-points li {
  position: relative;
  padding: 10px 12px 10px 36px;
  border-radius: 12px;
  background: rgba(224, 106, 31, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.ios-app-promo-points li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 28%, transparent 30%),
    var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 106, 31, 0.15);
}

.ios-app-promo-sheet .modal-actions {
  margin-top: 18px;
}

.ios-app-promo-actions {
  align-items: center;
}

.ios-app-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.ios-app-store-link:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

.ios-app-store-link:active {
  transform: translateY(1px) scale(0.99);
}

.ios-app-store-link img {
  display: block;
  width: 168px;
  height: auto;
}

.ios-app-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px 16px 16px 16px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid rgba(224, 106, 31, 0.28);
  background:
    linear-gradient(135deg, #fff7ef 0%, #ffffff 55%, #fff1e4 100%);
  box-shadow: 0 8px 20px rgba(180, 84, 20, 0.08);
}

.ios-app-banner[hidden] {
  display: none !important;
}

.ios-app-banner__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 28px;
}

.ios-app-banner__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(28, 27, 31, 0.12);
}

.ios-app-banner__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ios-app-banner__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ios-app-banner__chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.ios-app-banner__title {
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
}

.ios-app-banner__lead {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.ios-app-banner__store {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 64px;
  line-height: 0;
  text-decoration: none;
}

.ios-app-banner__store img {
  display: block;
  width: 140px;
  height: auto;
}

.ios-app-banner__store:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

.ios-app-banner__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(28, 27, 31, 0.06);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ios-app-banner__close:hover {
  background: rgba(28, 27, 31, 0.1);
}

/* ---- Measurements check-in nudge ---- */
.measure-nudge {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 16px 15px 18px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  border: 1.5px solid rgba(224, 106, 31, 0.42);
  border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(242, 137, 58, 0.28) 0%, transparent 55%),
    linear-gradient(145deg, #FFE8D2 0%, #FFF4E8 42%, #FFFFFF 100%);
  box-shadow:
    0 12px 28px rgba(180, 84, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.measure-nudge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #F2893A 0%, #E06A1F 55%, #C45312 100%);
}

.measure-nudge:active {
  transform: scale(0.99);
}

.measure-nudge__mark {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, #F2893A 0%, #E06A1F 55%, #C45312 100%);
  border: 1px solid rgba(196, 83, 18, 0.35);
  box-shadow:
    0 8px 18px rgba(224, 106, 31, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.measure-nudge__mark svg {
  width: 26px;
  height: 26px;
  display: block;
}

.measure-nudge__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.measure-nudge__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: #E06A1F;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(224, 106, 31, 0.28);
}

.measure-nudge__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #1C1B1F;
}

.measure-nudge__lead {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #5A4538;
}

.measure-nudge__cta {
  margin-top: 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: #B85212;
}

.measure-nudge--plan {
  margin-bottom: 14px;
}

.plan-start-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 16px 16px 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 248, 240, 0.98), rgba(255, 241, 232, 0.92)),
    #fff8f0;
  border: 1px solid rgba(224, 106, 31, 0.22);
  box-shadow: 0 10px 28px rgba(124, 74, 36, 0.08);
  position: relative;
  overflow: hidden;
}

.plan-start-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #e06a1f, #f0a36a);
}

.plan-start-note[hidden] {
  display: none !important;
}

.plan-start-note__mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #e06a1f;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(224, 106, 31, 0.18);
  box-shadow: 0 4px 12px rgba(224, 106, 31, 0.12);
}

.plan-start-note__mark svg {
  width: 24px;
  height: 24px;
}

.plan-start-note__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 1px;
}

.plan-start-note__chip {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c45a18;
  background: rgba(224, 106, 31, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
}

.plan-start-note__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

.plan-start-note__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.plan-teaser.is-before-start .plan-teaser-chip {
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
}

.measure-nudge[hidden] {
  display: none !important;
}

/* ---- Home: kalorie & makra → /profil/udaje ---- */
.home-macros {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 16px 16px 15px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(28, 27, 31, 0.07);
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(240, 138, 53, 0.2) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    linear-gradient(165deg, #FFF7EF 0%, #FAF8F5 45%, #FFFFFF 100%);
  box-shadow: 0 12px 28px rgba(28, 27, 31, 0.06);
  transition: transform 0.12s ease;
}

.home-macros[hidden] {
  display: none !important;
}

.home-macros:active {
  transform: scale(0.99);
}

.home-macros__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-macros__chip {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(224, 106, 31, 0.12);
  color: var(--accent-dark);
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-macros__cta {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--accent-dark);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(28, 27, 31, 0.08);
}

.home-macros__title {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}

.home-macros__lead {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 36ch;
}

.home-macros__kcal {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F08A35 0%, var(--accent) 50%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(224, 106, 31, 0.22);
}

.home-macros__kcal b {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.home-macros__kcal span {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.9;
}

.home-macros__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.home-macros__macro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 9px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(28, 27, 31, 0.06);
}

.home-macros__macro small {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.home-macros__macro b {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.home-macros__macro.is-p b {
  color: #C45312;
}

.home-macros__macro.is-c b {
  color: #2563EB;
}

.home-macros__macro.is-f b {
  color: #A16207;
}

.measure-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.measure-charts[hidden] {
  display: none !important;
}

.measure-chart-card {
  padding: 16px 14px 10px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(224, 106, 31, 0.16);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(224, 106, 31, 0.1) 0%, transparent 55%),
    #fff;
  box-shadow: 0 10px 24px rgba(60, 36, 18, 0.05);
}

.measure-chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.measure-chart-card__chip {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(224, 106, 31, 0.12);
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.measure-chart-card__title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.measure-chart-card__delta {
  flex: 0 0 auto;
  max-width: 42%;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent-dark);
}

.measure-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 2px 8px;
}

.measure-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.measure-chart-legend__item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.measure-chart-legend__item--waist { color: #E06A1F; }
.measure-chart-legend__item--hips { color: #2F6F8F; }
.measure-chart-legend__item--thighs { color: #5B8A4A; }

.measure-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.measure-chart__grid {
  stroke: rgba(28, 27, 31, 0.08);
  stroke-width: 1;
}

.measure-chart__axis {
  fill: var(--ink-3);
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
}

.measure-chart__line {
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.measure-chart__line--weight { stroke: #E06A1F; }
.measure-chart__line--waist { stroke: #E06A1F; }
.measure-chart__line--hips { stroke: #2F6F8F; }
.measure-chart__line--thighs { stroke: #5B8A4A; }

.measure-chart__dot {
  stroke: #fff;
  stroke-width: 1.6;
}

.measure-chart__dot--weight,
.measure-chart__dot--waist { fill: #E06A1F; }
.measure-chart__dot--hips { fill: #2F6F8F; }
.measure-chart__dot--thighs { fill: #5B8A4A; }

.measure-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.measure-history-hint {
  padding: 16px 16px 14px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px dashed rgba(224, 106, 31, 0.35);
  background: #FFF8F1;
}

.measure-history-hint b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.measure-history-hint p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.measure-history-loading,
.measure-history-empty {
  padding: 22px 18px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--line);
  background: var(--card);
}

.measure-history-empty b,
.measure-history-loading {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.measure-history-empty p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.measure-history-card {
  padding: 16px 16px 14px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 8px 20px rgba(60, 36, 18, 0.04);
}

.measure-history-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.measure-history-card__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: capitalize;
}

.measure-history-card__weight {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}

.measure-history-card__meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.measure-history-card__meta span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.measure-history-card__meta--muted span {
  background: #F3F1EE;
  color: var(--ink-3);
  font-weight: 600;
}

.measure-sheet {
  text-align: left;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 241, 228, 0.98) 0%, transparent 58%),
    #fff;
  padding-top: 10px;
}

.measure-sheet-hero {
  position: relative;
  height: 88px;
  margin: 2px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.measure-sheet-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
}

.measure-sheet-orb--a {
  width: 120px;
  height: 120px;
  left: 12%;
  top: -28px;
  background: rgba(224, 106, 31, 0.12);
}

.measure-sheet-orb--b {
  width: 90px;
  height: 90px;
  right: 10%;
  bottom: -30px;
  background: rgba(224, 106, 31, 0.08);
}

.measure-sheet-badge {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: linear-gradient(160deg, #fff7ef 0%, #ffe8d4 100%);
  border: 1px solid rgba(224, 106, 31, 0.18);
  box-shadow: 0 10px 24px rgba(224, 106, 31, 0.12);
}

.measure-sheet-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.measure-sheet .modal-title {
  text-align: left;
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
}

.measure-sheet-desc {
  text-align: left;
  margin-top: 6px;
  max-width: none;
}

.measure-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.measure-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.measure-field--wide {
  grid-column: 1 / -1;
}

.measure-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.measure-field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.measure-field span em {
  color: var(--accent);
  font-style: normal;
}

.measure-field__input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 0 12px 0 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.measure-field__input:focus-within {
  border-color: rgba(224, 106, 31, 0.45);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.measure-field__input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 13px 4px 13px 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}

.measure-field__unit {
  flex: 0 0 auto;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-3) !important;
}

.measure-field--hero .measure-field__input {
  border-color: rgba(224, 106, 31, 0.28);
  background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}

.measure-field--hero .measure-field__input input {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.measure-form-error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
}

.measure-sheet .modal-actions {
  margin-top: 4px;
}

.name-sheet {
  text-align: left;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 241, 228, 0.98) 0%, transparent 58%),
    #fff;
  padding-top: 10px;
}

.name-sheet-hero {
  position: relative;
  height: 88px;
  margin: 2px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.name-sheet-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
}

.name-sheet-orb--a {
  width: 120px;
  height: 120px;
  left: 12%;
  top: -28px;
  background: rgba(224, 106, 31, 0.12);
}

.name-sheet-orb--b {
  width: 90px;
  height: 90px;
  right: 10%;
  bottom: -30px;
  background: rgba(224, 106, 31, 0.08);
}

.name-sheet-badge {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: linear-gradient(160deg, #fff7ef 0%, #ffe8d4 100%);
  border: 1px solid rgba(224, 106, 31, 0.18);
  box-shadow: 0 10px 24px rgba(224, 106, 31, 0.12);
}

.name-sheet-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.name-sheet .modal-title {
  text-align: left;
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
}

.name-sheet-desc {
  text-align: left;
  margin-top: 6px;
  max-width: none;
}

.name-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.name-form-error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
}

.name-sheet .modal-actions {
  margin-top: 4px;
}

/* ---- App tour (spotlight) ---- */
.tour-root {
  position: fixed;
  top: var(--vv-top, 0px);
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: var(--app-height, 100dvh);
  z-index: 260;
  pointer-events: none;
}

.tour-root[hidden] {
  display: none;
}

.tour-scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

.tour-hole {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(28, 27, 31, 0.62);
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
  transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease, border-radius 0.28s ease;
  pointer-events: none;
  z-index: 1;
}

.tour-hole.is-pill {
  border-radius: 999px;
}

.tour-hole.is-nav {
  border-radius: 16px;
}

.tour-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: min(440px, calc(var(--app-max) - 28px));
  z-index: 2;
  pointer-events: auto;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 241, 228, 0.95) 0%, transparent 55%),
    #fff;
  border-radius: 22px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  animation: tourCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.tour-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.tour-progress {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.tour-skip {
  border: 0;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
}

.tour-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tour-text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tour-actions {
  margin-top: 16px;
}

.tour-actions .btn {
  width: 100%;
}

body.tour-open {
  overflow: hidden;
}

@keyframes tourCardIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-hole {
    transition: none;
  }
  .tour-card {
    animation: none;
  }
}

@keyframes avatarPromptPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-prompt-face--2.is-you {
    animation: none;
  }
}

.modal-sheet--scroll {
  max-height: min(calc(var(--app-height, 100dvh) - 8px), 760px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}

.meal-plan-sheet {
  padding-top: 8px;
  background:
    radial-gradient(90% 50% at 0% 0%, rgba(255, 241, 228, 0.95) 0%, transparent 55%),
    #fff;
}

.meal-plan-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.meal-plan-hero .modal-title {
  text-align: left;
  padding: 0;
  margin-top: 12px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.meal-plan-hero .modal-desc {
  text-align: left;
  margin-top: 10px;
  max-width: none;
  font-size: 14px;
}

.meal-plan-modal-image {
  margin: 16px -22px 0;
  width: calc(100% + 44px);
  max-width: none;
  overflow: hidden;
  background: #F3E8DC;
}

.meal-plan-modal-image[hidden] {
  display: none !important;
}

.meal-plan-modal-image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .meal-plan-modal-image {
    margin-left: -28px;
    margin-right: -28px;
    width: calc(100% + 56px);
  }
}

.meal-plan-kicker {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(224, 106, 31, 0.18);
  padding: 5px 10px;
  border-radius: 999px;
}

.meal-plan-price-pill {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  padding: 6px 11px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 16px rgba(224, 106, 31, 0.28);
}

.meal-plan-protein {
  margin-top: 16px;
  padding: 14px 15px;
  border-radius: 18px;
  background: linear-gradient(135deg, #FFF1E4 0%, #FFE0C4 100%);
  border: 1px solid rgba(224, 106, 31, 0.2);
}

.meal-plan-protein-label {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.meal-plan-protein p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
}

.meal-plan-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.meal-plan-proof > div {
  padding: 12px 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: 0 4px 14px rgba(28, 27, 31, 0.04);
}

.meal-plan-proof b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.meal-plan-proof span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.3;
}

.meal-plan-section {
  margin-top: 22px;
}

.meal-plan-section h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.meal-plan-list {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meal-plan-list li {
  padding: 13px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.meal-plan-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.meal-plan-steps {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meal-plan-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: #FAFAF9;
  border: 1px solid var(--line);
}

.meal-plan-steps li > span {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.meal-plan-steps strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 2px;
}

.meal-plan-steps div {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.meal-plan-reviews {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meal-plan-review {
  padding: 13px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(28, 27, 31, 0.03);
}

.meal-plan-stars {
  color: #E06A1F;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
}

.meal-plan-review p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
}

.meal-plan-review footer {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}

.meal-plan-offer {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #FFF7EE, #FFE8D2);
  border: 1px solid rgba(224, 106, 31, 0.18);
}

.meal-plan-offer-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.meal-plan-offer strong {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}

.meal-plan-offer em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.meal-plan-actions {
  margin-top: 16px;
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 24%);
}

.meal-plan-actions .btn {
  text-decoration: none;
}

/* ---- Recipe detail ---- */
.recipe-detail-cover {
  position: relative;
  margin-top: 14px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  background:
    linear-gradient(160deg, var(--accent-soft), #fff 70%);
  box-shadow: 0 10px 28px rgba(28, 27, 31, 0.08);
}

.recipe-detail-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.recipe-detail-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recipe-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recipe-detail-title {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.recipe-macros {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: stretch;
  background:
    linear-gradient(145deg, #fff 0%, #FFF8F1 100%);
  border: 1px solid #F0E4D8;
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(176, 112, 48, 0.06);
}

.recipe-macros[hidden] {
  display: none !important;
}

.recipe-macros-kcal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 18px;
  padding: 14px 10px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  min-height: 100%;
}

.recipe-macros-kcal b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.recipe-macros-kcal span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.92;
}

.recipe-macros-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  min-width: 0;
}

.recipe-macro-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.recipe-macro-row-top span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.recipe-macro-row-top b {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.recipe-macro-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(28, 27, 31, 0.06);
  overflow: hidden;
}

.recipe-macro-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.45s ease;
}

.recipe-macro-row.is-protein .recipe-macro-track i {
  background: linear-gradient(90deg, #E06A1F, #F0A15A);
}

.recipe-macro-row.is-carbs .recipe-macro-track i {
  background: linear-gradient(90deg, #C9853A, #E8C28A);
}

.recipe-macro-row.is-fat .recipe-macro-track i {
  background: linear-gradient(90deg, #8A6A4A, #C4A484);
}

.mt20 {
  margin-top: 20px;
}

.recipe-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
}

@media (max-width: 360px) {
  .recipe-macros {
    grid-template-columns: 1fr;
  }

  .recipe-macros-kcal {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .recipe-macros-kcal b {
    font-size: 26px;
  }

  .recipe-macros-kcal span {
    margin-top: 0;
    text-align: left;
  }
}

.recipe-body p {
  margin: 0 0 1em;
}

.recipe-body p:last-child {
  margin-bottom: 0;
}

.recipe-body h2,
.recipe-body h3 {
  font-size: 17px;
  line-height: 1.3;
  margin: 1.35em 0 0.55em;
  color: var(--ink);
  font-weight: 700;
}

.recipe-body h2:first-child,
.recipe-body h3:first-child {
  margin-top: 0;
}

/* Reset * { padding:0 } inak čísla/odrážky „lezia“ do textu a wrap ide pod marker. */
.recipe-body ul,
.recipe-body ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
  list-style-position: outside;
}

.recipe-body ul {
  list-style-type: disc;
}

.recipe-body ol {
  list-style-type: decimal;
  padding-left: 1.65em;
}

.recipe-body li {
  margin: 0.45em 0;
  padding-left: 0.25em;
}

.recipe-body li::marker {
  color: var(--ink-2);
  font-weight: 600;
}

.recipe-body figure {
  margin: 1.25em 0;
}

.recipe-body figure img,
.recipe-body > img {
  width: 100%;
  border-radius: 14px;
  display: block;
  background: var(--accent-soft);
}

.recipe-body figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

.recipe-body a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.recipe-body a:hover {
  color: var(--accent);
}

.recipe-body .muted {
  color: var(--ink-3);
}

.upsell .btn:hover {
  background: var(--accent-soft);
}

/* ---- Challenge page ---- */
.challenge-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(120% 90% at 100% 0%, #FFD7B0 0%, transparent 50%),
    linear-gradient(145deg, #FFF7EF 0%, #FFE8D2 55%, #F8F1E8 100%);
  border: 1px solid #F0E0D0;
}

.challenge-hero-title {
  margin-top: 10px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.challenge-hero-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.challenge-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.challenge-hero-ring {
  width: 72px;
  height: 72px;
  box-shadow: 0 8px 20px rgba(176, 112, 48, 0.12);
}

.challenge-hero-ring i {
  width: 54px;
  height: 54px;
  font-size: 14px;
}

.challenge-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.challenge-hero-meta b {
  font-size: 16px;
  line-height: 1.25;
}

.challenge-today-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(28, 27, 31, 0.06);
  color: var(--ink-2);
}

.challenge-today-pill.is-done {
  background: rgba(46, 125, 70, 0.12);
  color: #2E7D46;
}

.challenge-today-pill.is-todo {
  background: rgba(224, 106, 31, 0.12);
  color: var(--accent-dark);
}

.challenge-section-label {
  font-size: 15px;
  font-weight: 700;
}

.challenge-cal-card .cal {
  margin-top: 12px;
}

#challenge-done-btn.is-done {
  background: #2E7D46;
  box-shadow: none;
}

#challenge-done-btn.is-done:hover {
  background: #25683A;
}

.challenge-community {
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(155deg, #1F2A24 0%, #2E4338 55%, #3A5346 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(31, 42, 36, 0.18);
}

.challenge-community-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.challenge-community-faces {
  display: flex;
  flex: none;
  padding-left: 8px;
}

.challenge-community-faces span {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(circle at 30% 30%, #FFE0C2, #E08A4A);
}

.challenge-community-faces span:nth-child(2) {
  background: radial-gradient(circle at 30% 30%, #E8F0EA, #7FA38C);
}

.challenge-community-faces span:nth-child(3) {
  background: radial-gradient(circle at 30% 30%, #F7E7D8, #C48A62);
}

.challenge-community-faces__photo {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  background: #d6d3d1;
}

.challenge-community-faces__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.challenge-community-faces__more {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

/* Challenge participant faces (dashboard / Výzva40+ / detail) */
.chal-faces {
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.chal-faces[hidden] {
  display: none !important;
}

.chal-faces__item {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: -6px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  background: #efece8;
  box-shadow: 0 1px 2px rgba(28, 27, 31, 0.08);
}

.chal-faces__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chal-faces__more {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #f3f1ee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 1px 2px rgba(28, 27, 31, 0.08);
}

.chal-faces__more span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-3);
}

.vyzva40-challenge-card .chal-faces {
  margin-top: 10px;
}

.challenge-community .challenge-section-label {
  color: #fff;
}

.challenge-community-text {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.challenge-community-meter {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.challenge-community-meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.challenge-community-meter-top b {
  font-size: 15px;
  color: #fff;
}

.challenge-community-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.challenge-community-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #F0A15A, #FFF1E0);
  transition: width 0.45s ease;
}

/* ---- Challenge calendar ---- */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.cal div {
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.cal div.hit {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.cal div.now {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal div.now:not(.hit) {
  background: #fff;
  color: var(--accent-dark);
  border-color: transparent;
}

.cal div.hit.now {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
}

/* ---- Articles list ---- */
.articles-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Coaching list (stejný layout jako články, cover = video) ---- */
.coaching-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.coaching-card.is-locked {
  cursor: default;
}

.coaching-card.is-locked .article-card__cover img {
  filter: saturate(0.72) brightness(0.78);
  transform: scale(1.02);
}

.coaching-card.is-done .article-card__chip {
  background: #e8f6ec;
  color: #2F8A4C;
}

.coaching-card.is-locked .article-card__chip {
  background: #F3E7DA;
  color: #9A5A28;
}

.coaching-card__soon {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 80% at 12% 18%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    radial-gradient(70% 90% at 88% 80%, rgba(240, 138, 53, 0.28) 0%, transparent 50%),
    linear-gradient(145deg, #F6E6D6 0%, #E8C9A8 48%, #D9A87A 100%);
}

.coaching-card__soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent 0,
      transparent 10px,
      rgba(255, 255, 255, 0.08) 10px,
      rgba(255, 255, 255, 0.08) 11px
    );
  opacity: 0.7;
}

.coaching-card__play,
.coaching-card__lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.coaching-card__play {
  background: rgba(28, 27, 31, 0.28);
  color: #fff;
  font-size: 18px;
}

.coaching-card__lock {
  background:
    linear-gradient(180deg, rgba(28, 27, 31, 0.18) 0%, rgba(28, 27, 31, 0.55) 100%);
  padding: 16px;
}

.coaching-card__lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: #fff;
}

.coaching-card__lock-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  position: relative;
  margin-bottom: 2px;
}

.coaching-card__lock-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 14px;
  height: 12px;
  margin-left: -7px;
  border: 2.5px solid var(--accent);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}

.coaching-card__lock-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  width: 18px;
  height: 14px;
  margin-left: -9px;
  border-radius: 4px;
  background: var(--accent);
}

.coaching-card__lock-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.coaching-card__lock-date {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.92;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.coaching-card__play::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  position: absolute;
}

.coaching-card__play::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.coaching-card__dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  pointer-events: none;
}

.article-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.article-card:active {
  transform: scale(0.985);
}

.article-card:hover {
  border-color: #e0d9d0;
}

.article-card__cover {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  background: var(--accent-soft);
  overflow: hidden;
}

.article-card__cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

.article-card__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background:
    linear-gradient(145deg, var(--accent-soft) 0%, #fff 55%, #f3ebe2 100%);
}

.content-new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  border: 0;
  box-shadow: 0 4px 14px rgba(224, 106, 31, 0.28);
  pointer-events: none;
}

.article-card__body {
  padding: 14px 16px 16px;
}

.article-card__chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.article-card--podcast .article-card__chip,
.article-card--podcast .article-card__fallback {
  background: #EEF4F8;
  color: #3A6B86;
}

.article-card--diary .article-card__chip,
.article-card--diary .article-card__fallback {
  background: #F6F0EB;
  color: #8A5A3B;
}

.article-card--substack .article-card__chip,
.article-card--substack .article-card__fallback {
  background: #F1F0EE;
  color: #5C5A56;
}

.article-card__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-top: 10px;
}

.article-card__excerpt {
  display: block;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 6px;
}

.article-card__meta {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 10px;
}

/* ---- Article detail ---- */
.article-detail-cover {
  margin-top: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--accent-soft);
}

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

.article-detail-title {
  font-size: 22px;
  line-height: 1.25;
}

.article-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
}

.article-body p {
  margin: 0 0 1em;
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body h2,
.article-body h3 {
  font-size: 17px;
  line-height: 1.3;
  margin: 1.35em 0 0.55em;
  color: var(--ink);
  font-weight: 700;
}

.article-body h2:first-child,
.article-body h3:first-child {
  margin-top: 0;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
  list-style-position: outside;
}

.article-body ul {
  list-style-type: disc;
}

.article-body ol {
  list-style-type: decimal;
  padding-left: 1.65em;
}

.article-body li {
  margin: 0.45em 0;
  padding-left: 0.25em;
}

.article-body li::marker {
  color: var(--ink-2);
  font-weight: 600;
}

.article-body figure {
  margin: 1.25em 0;
}

.article-body figure img,
.article-body > img {
  width: 100%;
  border-radius: 14px;
  display: block;
  background: var(--accent-soft);
}

.article-body figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

.article-body a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.article-body a:hover {
  color: var(--accent);
}

.article-body .muted {
  color: var(--ink-3);
}

#article-external {
  display: inline-flex;
  text-decoration: none;
  text-align: center;
  justify-content: center;
}

#article-external[hidden] {
  display: none !important;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0442E;
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- Profile ---- */
.prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.prow[hidden] {
  display: none !important;
}

.prow:last-child {
  border-bottom: none;
}

.prow span {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 13px;
}

.stat {
  flex: 1;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 6px;
}

.stat b {
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.stat span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ---- Video player (Vimeo) ---- */
.video-wrap {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #17161A;
  aspect-ratio: 16 / 9;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
}

.video-poster .thumb {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.video-poster.hidden,
.video-poster[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Koučink bez coveru: iframe musí byť plně klikací */
#coaching-video-wrap.is-direct .video-poster {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#coaching-video-wrap.is-direct iframe {
  z-index: 4;
  pointer-events: auto;
}

/* ---- Toast (mock feedback) ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--vv-bottom, 0px) + var(--nav-h) + var(--safe-bottom) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
  max-width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-loading {
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(32px + env(safe-area-inset-top, 0px)) 28px
    calc(32px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 80% at 50% 18%, #FFE4C8 0%, transparent 55%),
    linear-gradient(165deg, #FFF9F3 0%, var(--bg) 42%, #F3E8DC 100%);
  color: var(--ink);
}

@media (max-width: 767px) {
  .app-loading {
    position: fixed;
    top: var(--vv-top, 0px);
    left: 0;
    right: 0;
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    z-index: 200;
  }
}

.app-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 280px;
  animation: loading-enter 0.55s ease both;
}

.app-loading-mark {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 22px;
}

.app-loading-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(224, 106, 31, 0.15);
  border-top-color: var(--accent);
  border-right-color: #F0A15A;
  animation: loading-spin 0.95s linear infinite;
}

.app-loading-core {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 10px 24px rgba(184, 82, 18, 0.28);
  animation: loading-pulse 1.8s ease-in-out infinite;
}

.app-loading-brand {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  animation: loading-fade-up 0.6s 0.08s ease both;
}

.app-loading-text {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
  animation: loading-fade-up 0.6s 0.16s ease both;
}

.app-loading-dots {
  display: flex;
  gap: 7px;
  margin-top: 18px;
  animation: loading-fade-up 0.6s 0.22s ease both;
}

.app-loading-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: loading-dot 1.2s ease-in-out infinite;
}

.app-loading-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.app-loading-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

.app-loading.is-error .app-loading-ring {
  animation: none;
  border-color: rgba(176, 60, 40, 0.2);
  border-top-color: #C24A32;
}

.app-loading.is-error .app-loading-core {
  animation: none;
  background: linear-gradient(160deg, #D85A3C, #A63B28);
}

.app-loading.is-error .app-loading-dots {
  display: none;
}

.app-loading.is-error .app-loading-text {
  color: #8A3B2C;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes loading-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.96); }
}

@keyframes loading-dot {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@keyframes loading-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loading-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-inner,
  .app-loading-brand,
  .app-loading-text,
  .app-loading-dots,
  .app-loading-ring,
  .app-loading-core,
  .app-loading-dots i {
    animation: none !important;
  }
}

@media (min-width: 768px) {
  .toast {
    /* Align with centered app column */
    max-width: calc(var(--app-max) - 40px);
  }
}

/* —— Plan gate / onboarding —— */
.plan-teaser.is-gate {
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(224, 106, 31, 0.38);
}

.plan-teaser-gate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 20px 22px;
  color: #fff;
}

.plan-teaser-gate[hidden] {
  display: none !important;
}

.plan-teaser-step {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 10px;
  border-radius: 999px;
}

.plan-teaser-gate h2 {
  margin: 2px 0 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #fff;
  font-weight: 800;
  max-width: 16ch;
}

.plan-teaser-gate p {
  margin: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
  max-width: 28ch;
}

.plan-teaser-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  color: var(--accent-dark);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 20px rgba(28, 27, 31, 0.12);
}

.plan-teaser-cta[hidden] {
  display: none !important;
}

.plan-teaser-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.plan-teaser.is-gate .plan-teaser-thermo {
  display: none !important;
}

.plan-teaser.is-preparing .plan-teaser-cta {
  display: none !important;
}

.plan-prep-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}

.plan-prep-spinner[hidden] {
  display: none !important;
}

.plan-prep-spinner-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: plan-prep-spin 0.85s linear infinite;
}

.plan-prep-spinner--dark .plan-prep-spinner-ring {
  border-color: rgba(224, 106, 31, 0.2);
  border-top-color: var(--accent);
}

.plan-gate.is-preparing {
  text-align: center;
  align-items: center;
}

.plan-gate.is-preparing .plan-prep-spinner {
  margin: 0 auto 8px;
}

.plan-gate.is-preparing .plan-gate-step {
  margin: 0 auto;
}

.plan-gate.is-preparing .plan-gate-cta,
.plan-gate.is-preparing #plan-gate-cta {
  display: none !important;
}

@keyframes plan-prep-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-prep-spinner-ring {
    animation: none;
    border-top-color: inherit;
    opacity: 0.85;
  }
}

#home-week-wrap[hidden] {
  display: none !important;
}

.plan-gate {
  text-align: left;
  padding: 26px 20px 22px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 241, 228, 0.95) 0%, transparent 55%),
    linear-gradient(160deg, #fff 0%, #FFF7EE 100%);
  border: 1px solid rgba(224, 106, 31, 0.18);
  box-shadow: 0 12px 28px rgba(224, 106, 31, 0.1);
}

.plan-gate-step {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(224, 106, 31, 0.12);
  padding: 6px 10px;
  border-radius: 999px;
}

.plan-gate h2 {
  margin-top: 14px;
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.plan-gate .btn {
  width: 100%;
}

.plan-gate-meta {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
}

.onb-progress {
  height: 6px;
  border-radius: 999px;
  background: #F1F0EF;
  overflow: hidden;
}

.onb-progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease;
}

#s-onboarding .onb-top h1 {
  font-size: 22px;
  letter-spacing: -0.03em;
}

#s-onboarding #onb-lead {
  font-size: 13.5px;
  line-height: 1.4;
}

.onb-form .onb-q {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.onb-q-title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.onb-req {
  color: var(--accent);
}

.onb-opt-label {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}

.onb-help {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.4;
}

.onb-input {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 16px; /* iOS: zabrání auto-zoomu */
  color: var(--ink);
}

.onb-textarea {
  resize: vertical;
  min-height: 96px;
}

.onb-options {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onb-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
}

.onb-opt:has(input:checked) {
  border-color: rgba(224, 106, 31, 0.45);
  background: #FFF7EE;
}

.onb-opt input {
  margin-top: 2px;
  flex: none;
}

.onb-scale {
  margin-top: 14px;
  padding: 4px 2px 2px;
}

.onb-scale-value {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
}

.onb-scale-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --scale-pct: 50%;
}

.onb-scale-input:focus {
  outline: none;
}

.onb-scale-input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--scale-pct),
    #EDE8E2 var(--scale-pct),
    #EDE8E2 100%
  );
}

.onb-scale-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(28, 27, 31, 0.12);
}

.onb-scale-input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #EDE8E2;
}

.onb-scale-input::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.onb-scale-input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(28, 27, 31, 0.12);
}

.onb-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}

/* Tlačítka v toku formuláře — sticky překrývalo input při otevřené klávesnici */
.onb-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 0 4px;
}

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

.onb-done {
  text-align: center;
  padding: 28px 20px;
}

/* ---- Výzva40+ ---- */
#s-vyzva40.screen,
#s-vyzva40-detail.screen {
  padding-top: 0;
}

.vyzva40-challenges {
  display: grid;
  gap: 10px;
}

.vyzva40-challenge-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(28, 27, 31, 0.07);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(240, 138, 53, 0.18) 0%, transparent 55%),
    #fff;
  box-shadow: 0 10px 24px rgba(28, 27, 31, 0.05);
}

.vyzva40-challenge-card:active {
  transform: scale(0.99);
}

.vyzva40-challenge-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vyzva40-challenge-card__copy {
  flex: 1;
  min-width: 0;
}

.vyzva40-challenge-card__copy h2 {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.vyzva40-feed-title {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.vyzva40-feed {
  display: grid;
  gap: 12px;
}

.vyzva40-attachments {
  padding: 16px;
  border-radius: 18px;
  background: #FAF8F5;
  border: 1px solid rgba(28, 27, 31, 0.06);
}

.vyzva40-attachments__title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}

.vyzva40-att {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.vyzva40-att:first-child {
  border-top: none;
  padding-top: 0;
}

.vyzva40-att b {
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.vyzva40-att span {
  flex: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-dark);
}

/* ---- Interval workout player ---- */
.interval-player-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 6px;
}

.interval-player-top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.interval-player-top__title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.interval-player-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c45a18;
  background: rgba(224, 106, 31, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
}

.interval-player__video {
  position: relative;
  margin-top: 10px;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 9;
}

.interval-player__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* jemné priblíženie, aby zmizli zvyškové pásy / chrome okraje Vimea */
  transform: scale(1.08);
  transform-origin: center center;
}

.interval-player__rest {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: linear-gradient(
    to top,
    rgba(28, 25, 23, 0.92) 0%,
    rgba(28, 25, 23, 0.55) 45%,
    rgba(28, 25, 23, 0.25) 100%
  );
  color: #fff;
  pointer-events: none;
}

.interval-player__rest[hidden] {
  display: none !important;
}

.interval-player__rest-inner {
  width: 100%;
  text-align: center;
  padding-bottom: 8px;
}

.interval-player__rest-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.interval-player__rest-next-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}

.interval-player__rest-next {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.interval-player__upcoming {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark, #c2410c);
}

.interval-player__upcoming[hidden] {
  display: none !important;
}

.interval-player__info {
  text-align: center;
  margin-top: 18px;
}

.interval-player__progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.interval-player__ex-title {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.interval-player__timer {
  margin-top: 10px;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.interval-player__phase {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
}

.interval-player__actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 10px;
  row-gap: 28px;
  margin-top: 22px;
  align-items: stretch;
}

.interval-player__controls,
.interval-player__secondary {
  display: contents;
}

#interval-prev {
  grid-column: 1;
  grid-row: 1;
}

#interval-pause {
  grid-column: 2;
  grid-row: 1;
  min-width: 128px;
  padding-left: 18px;
  padding-right: 18px;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  box-shadow: 0 4px 16px rgba(224, 106, 31, 0.32);
}

#interval-pause .interval-player__nav-lbl {
  color: inherit;
  font-size: 13px;
}

#interval-skip {
  grid-column: 3;
  grid-row: 1;
}

#interval-sound-toggle {
  grid-column: 1;
  grid-row: 2;
}

#interval-skip-workout {
  grid-column: 3;
  grid-row: 2;
}

.interval-player__actions .btn {
  width: 100%;
  justify-self: stretch;
}

.interval-player__nav-btn {
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.interval-player__nav-ico {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  line-height: 0;
}

.interval-player__nav-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}

#interval-pause .interval-player__nav-ico {
  width: 20px;
  height: 20px;
}

#interval-pause .interval-player__nav-ico svg {
  width: 20px;
  height: 20px;
}

.interval-player__nav-lbl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

#interval-prev,
#interval-skip {
  min-height: 54px;
  padding: 16px 14px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(28, 27, 31, 0.07);
  border-width: 1.5px;
  border-color: rgba(28, 27, 31, 0.14);
  background: #fff;
}

#interval-pause {
  min-height: 54px;
  border-radius: 16px;
}

#interval-pause .interval-player__nav-lbl {
  color: inherit;
}

#interval-sound-toggle,
#interval-skip-workout {
  min-height: 48px;
  padding: 14px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 14px;
  color: var(--ink-2);
  background: rgba(28, 27, 31, 0.03);
  border: 1px solid rgba(28, 27, 31, 0.08);
  box-shadow: none;
  text-align: center;
  line-height: 1.25;
}

#interval-sound-toggle:hover,
#interval-skip-workout:hover {
  background: rgba(28, 27, 31, 0.055);
  color: var(--ink);
}

.interval-player__sound.is-off {
  opacity: 0.65;
}

.interval-player-done {
  margin-top: 28px;
  min-height: min(62vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.interval-player-done[hidden] {
  display: none !important;
}

.interval-player-done__card {
  width: 100%;
  text-align: center;
  padding: 36px 22px 28px;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224, 106, 31, 0.12), transparent 55%),
    linear-gradient(165deg, #fffaf4 0%, #ffffff 55%);
  border: 1px solid rgba(224, 106, 31, 0.16);
  box-shadow: 0 12px 32px rgba(61, 36, 18, 0.06);
}

.interval-player-done__card.is-skipped {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120, 90, 70, 0.1), transparent 55%),
    linear-gradient(165deg, #faf7f4 0%, #ffffff 55%);
  border-color: rgba(120, 90, 70, 0.14);
}

.interval-player-done__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  animation: interval-done-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.interval-player-done__card.is-skipped .interval-player-done__icon {
  color: #8a6a52;
  background: #f3ebe4;
}

.interval-player-done__svg {
  width: 56px;
  height: 56px;
  display: none;
}

.interval-player-done__card.is-success .interval-player-done__svg--success,
.interval-player-done__card.is-skipped .interval-player-done__svg--skip,
.interval-player-done__card:not(.is-skipped):not(.is-success) .interval-player-done__svg--success {
  display: block;
}

.interval-player-done__card h2 {
  margin: 14px 0 0;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.interval-player-done__lead {
  margin: 10px auto 0;
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.interval-player-done__card .btn {
  width: 100%;
  margin-top: 22px;
}

@keyframes interval-done-pop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .interval-player-done__icon {
    animation: none;
  }
}

.program-card__chip--interval {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.workout-rest-banner-slot[hidden] {
  display: none !important;
}

.workout-rest-banner {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--accent-soft), #fff);
  border: 1px solid rgba(224, 106, 31, 0.2);
}

.workout-rest-banner strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: -0.01em;
}

.workout-rest-banner p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.interval-series-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.interval-series-cover-img[hidden] {
  display: none !important;
}

.interval-series-cover-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.interval-series-cover-fallback[hidden] {
  display: none !important;
}

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

.nav button {
  font-size: 9px;
}

.nav button svg {
  width: 22px;
  height: 22px;
}

.nav-icon-wrap {
  width: 22px;
  height: 22px;
}

#s-chat.screen {
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
  gap: 0;
}

#s-chat.screen.active {
  display: flex;
}

.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}

.chat-header__back {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #f3f1ee;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-header__back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-header__back:active {
  background: #ebe8e4;
}

.chat-header__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(145deg, #FFE8D2 0%, #F3C59A 55%, #E8A66E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 82, 18, 0.12),
    0 6px 16px rgba(224, 106, 31, 0.18);
}

.chat-header__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-header__copy {
  min-width: 0;
  flex: 1;
}

.chat-header__title {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.15;
}

.chat-header__lead {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
}

.chat-loading[hidden] {
  display: none !important;
}

.chat-loading__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: chatLoadingPulse 0.9s ease-in-out infinite;
}

@keyframes chatLoadingPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.chat-empty {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  padding: 8px 0 16px;
}

.chat-empty[hidden] {
  display: none !important;
}

.chat-empty-card {
  position: relative;
  width: 100%;
  padding: 22px 20px 20px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(240, 138, 53, 0.28) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(224, 106, 31, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, #FFF7EF 0%, #FAF8F5 48%, #FFFFFF 100%);
  box-shadow: 0 14px 32px rgba(224, 106, 31, 0.16);
  animation: sectionHeroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-empty-card::before {
  content: "";
  position: absolute;
  right: -24px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(224, 106, 31, 0.1);
  pointer-events: none;
}

.chat-empty-card__chip {
  position: relative;
  display: inline-flex;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(224, 106, 31, 0.12);
  padding: 5px 10px;
  border-radius: 999px;
}

.chat-empty-card__title {
  position: relative;
  display: block;
  margin-top: 14px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.chat-empty-card__lead {
  position: relative;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.chat-empty-card .btn {
  position: relative;
  margin-top: 18px;
}

.chat-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-thread[hidden] {
  display: none !important;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}

.chat-row--coach {
  align-self: flex-start;
  flex-direction: row;
}

.chat-row--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(145deg, #FFE8D2 0%, #F3C59A 55%, #E8A66E 100%);
  box-shadow: inset 0 0 0 1px rgba(184, 82, 18, 0.12);
}

.chat-avatar__letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  user-select: none;
}

.chat-avatar.has-photo .chat-avatar__letter {
  visibility: hidden;
}

.chat-avatar img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.chat-avatar.has-photo img {
  display: block;
}

.chat-avatar img:not([src]),
.chat-avatar img[src=""] {
  display: none !important;
}

.chat-bubble {
  max-width: calc(86% - 40px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-bubble--user {
  align-items: flex-end;
}

.chat-bubble--coach {
  align-items: flex-start;
}

.chat-bubble__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

.chat-bubble--user .chat-bubble__meta {
  justify-content: flex-end;
}

.chat-bubble__meta time {
  font-weight: 500;
}

.chat-bubble__body {
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble--user .chat-bubble__body {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.chat-bubble--coach .chat-bubble__body {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.chat-composer {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(238, 235, 231, 0.9);
  background: var(--bg);
}

.chat-composer__input {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  outline: none;
}

.chat-composer__input:focus {
  border-color: rgba(224, 106, 31, 0.45);
  box-shadow: 0 0 0 3px rgba(224, 106, 31, 0.12);
}

.chat-composer__send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-composer__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.chat-composer__send svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Koučink voice player */
.voice-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, #fff 0%, #fff8f1 100%);
  border: 1px solid rgba(224, 106, 31, 0.14);
  box-shadow: 0 10px 28px rgba(28, 27, 31, 0.05);
}

.voice-player[hidden] {
  display: none !important;
}

.voice-player__play {
  flex: none;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.voice-player__play:hover {
  background: var(--accent-dark);
}

.voice-player__play:active {
  transform: scale(0.96);
}

.voice-player__play-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}

.voice-player.is-playing .voice-player__play-icon {
  width: 12px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background:
    linear-gradient(#fff, #fff) left / 4px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 4px 100% no-repeat;
}

.voice-player__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-player__eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  padding: 0 2px;
}

.voice-player__eq i {
  flex: 1;
  min-width: 2px;
  max-width: 6px;
  height: 18%;
  border-radius: 99px;
  background: linear-gradient(180deg, #F08A35 0%, var(--accent) 70%, var(--accent-dark) 100%);
  opacity: 0.55;
  transform-origin: bottom center;
  transition: height 0.08s linear, opacity 0.15s ease;
}

.voice-player.is-playing .voice-player__eq i {
  opacity: 1;
}

.voice-player__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: #efe8e0;
  outline: none;
  cursor: pointer;
}

.voice-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(224, 106, 31, 0.35);
  cursor: pointer;
}

.voice-player__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(224, 106, 31, 0.35);
  cursor: pointer;
}

.voice-player__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

#coaching-audio {
  display: none;
}

.coaching-card--voice {
  cursor: default;
}

.coaching-card--voice .article-card__body {
  gap: 8px;
}

.coaching-card--voice .voice-player {
  margin-top: 6px;
}

.coaching-card--voice .content-new-badge {
  position: static;
  align-self: flex-start;
  margin-bottom: 2px;
}

.voice-card__more {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.coaching-voice-locked {
  margin-top: 8px;
  padding: 16px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.coach-card--voice .article-card__cover,
.coaching-card--voice > .article-card__cover {
  display: none;
}