/* overflow-x safety (prevents sideways layout break without clipping inner card shadows) */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: visible; } }

/* =========================
   Safe-area / System bars (Mobile app / PWA)
   Prevent UI from going under Android status bar + navigation bar.
   Applied only in standalone contexts (Capacitor in-app or PWA).
   ========================= */

:root{
  --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);
}

/* Push the whole document away from system UI in standalone contexts */
html.cp-standalone body,
body.inapp-shell{
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: calc(var(--safe-bottom) + 14px);
  padding-left: var(--safe-left);
}

/* If there is a sticky footer / bottom bar, give it safe-area padding too */
html.cp-standalone footer,
body.inapp-shell footer,
html.cp-standalone .footer,
body.inapp-shell .footer{
  padding-bottom: calc(var(--safe-bottom) + 12px);
}

/* =========================
   Brand UI – Dark/Light theme
   ========================= */

:root{
  /* Core */
  --bg: #0B0B0D;
  --surface: #141419;
  --surface2: #1B1B22;

  --text: #F2F2F3;
  --text-soft: rgba(242,242,243,0.92);
  --text-85: rgba(242,242,243,0.85);
  --muted: rgba(242,242,243,0.72);
  --placeholder: rgba(242,242,243,0.55);

  /* Brand (dopasowany do koloru w aplikacji) */
  --orange: #E94E1B;
  --orange2: #FF5A1F;
  --brand: var(--orange2);

  /* Progress (training) */
  --progress: #22c55e;
  --progress2: #16a34a;

  /* UI */
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.12);
  --shadow: 0 18px 40px rgba(0,0,0,0.35);
  --shadow-soft: 0 10px 25px rgba(0,0,0,0.22);

  --nav-bg: linear-gradient(180deg, #101014, #0b0b0d);
  --nav-link: rgba(242,242,243,0.82);
  --hover: rgba(230,90,26,0.10);

  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.12);

  --table-head-bg: rgba(10,10,12,0.55);
  --table-row-bg: rgba(18,18,22,0.35);
  --alert-bg: rgba(10,10,12,0.55);

  --badge-muted-bg: rgba(255,255,255,0.06);

  --hero-shadow: 0 18px 50px rgba(0,0,0,0.55);

  /* Dynamic UI metrics (set via base.html JS) */
  --nav-h: 0px;

  /* Charts (Chart.js) – colors are read by JS so they can react to theme changes */
  --chart-weight: rgba(243,103,40,0.95);
  --chart-bmi: rgba(255,180,120,0.95);
  --chart-bf: rgba(80,180,255,0.95);
  --chart-muscle: rgba(140,255,160,0.95);
}

/* =========================
   App: larger section headings (clear hierarchy)
   Scoped to non-public shells (logged-in app) so landing/blog pages stay unchanged.
   ========================= */

body:not(.public-shell) main.container h2{
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 950;
  letter-spacing: -0.012em;
  line-height: 1.12;
}

body:not(.public-shell) main.container h3{
  font-size: clamp(18px, 2.0vw, 24px);
  font-weight: 900;
  letter-spacing: -0.008em;
  line-height: 1.18;
}

body:not(.public-shell) main.container h4{
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 900;
  letter-spacing: -0.006em;
  line-height: 1.22;
}

/* Common in-app section titles (used across cards, live training, calendar, drawers) */
.cp-checklist-title,
.cp-empty-plan-title,
.cp-agenda-title,
.cp-warmup-title,
.cp-volume-title,
.notif-section-title,
.cp-drawer__title{
  font-size: 16.5px;
  line-height: 1.15;
}

@media (min-width: 992px){
  .cp-checklist-title,
  .cp-empty-plan-title,
  .cp-agenda-title,
  .cp-warmup-title,
  .cp-volume-title,
  .notif-section-title,
  .cp-drawer__title{
    font-size: 17.5px;
  }
}

@media (max-width: 576px){
  /* Slightly larger on small screens to improve scanning */
  body:not(.public-shell) main.container h2{ font-size: 26px; }
  body:not(.public-shell) main.container h3{ font-size: 20px; }
  body:not(.public-shell) main.container h4{ font-size: 18px; }
}

/* Anchor navigation should not hide headings under the sticky navbar */
html{ scroll-padding-top: calc(var(--nav-h, 0px) + 12px); }
#add-exercise-card, [id^="ex-"]{ scroll-margin-top: calc(var(--nav-h, 0px) + 12px); }

/* Light theme overrides */
html[data-theme="light"]{
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface2: #F1F3F8;

  --text: #0B0B0D;
  --text-soft: rgba(11,11,13,0.92);
  --text-85: rgba(11,11,13,0.85);
  --muted: rgba(11,11,13,0.66);
  --placeholder: rgba(11,11,13,0.45);

  --border: rgba(11,11,13,0.10);
  --border-strong: rgba(11,11,13,0.14);
  --shadow: 0 18px 40px rgba(11,11,13,0.10);
  --shadow-soft: 0 10px 25px rgba(11,11,13,0.10);

  --nav-bg: linear-gradient(180deg, #FFFFFF, #F6F7FB);
  --nav-link: rgba(11,11,13,0.78);
  --hover: rgba(230,90,26,0.12);

  --input-bg: rgba(11,11,13,0.03);
  --input-border: rgba(11,11,13,0.14);

  --table-head-bg: rgba(11,11,13,0.04);
  --table-row-bg: rgba(11,11,13,0.02);
  --alert-bg: rgba(11,11,13,0.03);

  --badge-muted-bg: rgba(11,11,13,0.04);

  --hero-shadow: 0 18px 44px rgba(11,11,13,0.14);

  /* Charts – slightly more saturated on light background */
  --chart-weight: rgba(230,90,26,0.98);
  --chart-bmi: rgba(255,160,95,0.98);
  --chart-bf: rgba(40,140,240,0.98);
  --chart-muscle: rgba(60,190,95,0.98);
}

/* Let the browser style native controls correctly */
html{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

.bg-brand{ background: var(--bg); color: var(--text); min-height: 100vh; }

/* Footer (legal links) */
.footer-brand{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}
html[data-theme="light"] .footer-brand{ background: rgba(11,11,13,0.01); }
.footer-link{
  color: var(--muted);
  text-decoration: none;
}
.footer-link:hover{
  color: var(--text);
  text-decoration: underline;
}

.footer-links-scroll{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.footer-links-scroll::-webkit-scrollbar{ height: 0; }

.footer-links{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  gap: 12px !important;
  width: max-content;
  padding-bottom: 2px;
}
.footer-links .footer-link{ white-space: nowrap; }

@media (min-width: 768px){
  .footer-links-scroll{ overflow: visible; }
  .footer-links{ width: auto; padding-bottom: 0; }
}


/* Ensure navbar dropdown menus are not clipped by overflow settings. */
.navbar.nav-brand .navbar-collapse{ overflow: visible; }
.navbar.nav-brand .navbar-collapse .dropdown-menu{ margin-top: .4rem; }

/* Navbar */
/* Premium navbar typography */
:root{
  --font-nav: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.navbar.nav-brand{
  font-family: var(--font-nav);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.navbar.nav-brand .navbar-nav .nav-link,
.navbar.nav-brand .navbar-nav .dropdown-toggle,
.navbar.nav-brand .dropdown-menu .dropdown-item,
.navbar.nav-brand .nav-user-email{
  font-weight: 650;
  letter-spacing: .15px;
}
.navbar.nav-brand .badge-wrap{
  font-weight: 700;
  letter-spacing: .08em;
}
.navbar.nav-brand .brand-title{
  font-family: var(--font-nav);
  letter-spacing: 0.06em;
}

.nav-brand{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1200; /* keep account dropdown above cards */
}

/* Standalone (Capacitor/PWA): keep sticky navbar below the status bar */
html.cp-standalone .nav-brand,
body.inapp-shell .nav-brand{
  top: var(--safe-top);
}
/* Nie psujemy collapse — navbar może się łamać */
.navbar.nav-brand { flex-wrap: wrap; }

@media (min-width: 1200px){
  .navbar.nav-brand{ flex-wrap: nowrap; }
  .navbar.nav-brand .navbar-collapse{
    flex-basis: auto;
    width: auto;
  }
  .navbar.nav-brand .navbar-nav{
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: .25rem !important;
  }
}

/* Tablet/iPad: keep navbar in ONE row (no wrapping). If links do not fit, allow horizontal scroll (only when navbar is expanded). */
@media (min-width: 1200px){
html.cp-touch .navbar.nav-brand{ flex-wrap: nowrap; }
html.cp-touch .navbar.nav-brand .navbar-collapse{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html.cp-touch .navbar.nav-brand .navbar-nav{
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: .25rem !important;
}
html.cp-touch .navbar.nav-brand .navbar-nav .nav-item{ flex: 0 0 auto; }
html.cp-touch .navbar.nav-brand .navbar-nav .nav-link{ padding-left: .5rem; padding-right: .5rem; }
}

/* Fallback: if cp-touch class isn't present (older base.html), apply the same UX on coarse pointers */
@media (pointer: coarse) and (min-width: 1200px){
  .navbar.nav-brand{ flex-wrap: nowrap; }
  .navbar.nav-brand .navbar-collapse{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar.nav-brand .navbar-nav{
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: .25rem !important;
  }
  .navbar.nav-brand .navbar-nav .nav-item{ flex: 0 0 auto; }
  .navbar.nav-brand .navbar-nav .nav-link{ padding-left: .5rem; padding-right: .5rem; }
}
/* Long emails can break the layout on tablets; keep them readable with ellipsis */
.navbar.nav-brand .nav-user-email{
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 1200px){
  .navbar.nav-brand .nav-user-email{ max-width: 160px; }
}

/* Premium mobile/iPad collapse menu: centered, readable, separated */
@media (max-width: 1199.98px){
  .navbar.nav-brand .navbar-collapse{
    flex-basis: 100%;
    width: 100%;
  }
  .navbar.nav-brand .navbar-collapse.show,
  .navbar.nav-brand .navbar-collapse.collapsing{
    padding-top: .75rem;
  }

  .navbar.nav-brand .navbar-collapse.show .navbar-nav,
  .navbar.nav-brand .navbar-collapse.collapsing .navbar-nav{
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding: .25rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(20,20,24,.78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
  }
  /* Tablet+ (iPad): full-width mobile menu instead of centered card */
  @media (min-width: 768px) and (max-width: 1199.98px){
    .navbar.nav-brand .navbar-collapse.show .navbar-nav,
    .navbar.nav-brand .navbar-collapse.collapsing .navbar-nav{
      max-width: none;
      width: 100%;
      margin: 0;
      border-radius: 0 0 18px 18px;
    }
  }

  html[data-theme="light"] .navbar.nav-brand .navbar-collapse.show .navbar-nav,
  html[data-theme="light"] .navbar.nav-brand .navbar-collapse.collapsing .navbar-nav{
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
  }

  .navbar.nav-brand .navbar-nav{
    gap: 0 !important;
    align-items: stretch !important;
    text-align: center;
  }
  .navbar.nav-brand .navbar-nav .nav-item{
    width: 100%;
  }
  .navbar.nav-brand .navbar-nav .nav-item + .nav-item{
    border-top: 1px solid rgba(255,255,255,.07);
  }
  html[data-theme="light"] .navbar.nav-brand .navbar-nav .nav-item + .nav-item{
    border-top-color: rgba(0,0,0,.06);
  }

  .navbar.nav-brand .navbar-nav .nav-link{
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: .9rem .9rem;
    border-radius: 14px;
    font-weight: 650;
    letter-spacing: .2px;
  }
  .navbar.nav-brand .navbar-nav .nav-link:hover,
  .navbar.nav-brand .navbar-nav .nav-link:focus{
    background: rgba(255,255,255,.06);
  }
  html[data-theme="light"] .navbar.nav-brand .navbar-nav .nav-link:hover,
  html[data-theme="light"] .navbar.nav-brand .navbar-nav .nav-link:focus{
    background: rgba(0,0,0,.04);
  }
  .navbar.nav-brand .navbar-nav .nav-link:active{
    transform: translateY(1px);
  }

  /* Buttons inside collapse (e.g., "Strona główna") */
  .navbar.nav-brand .navbar-nav .btn{
    width: 100%;
    justify-content: center;
  }

  /* Center pills/badges so they don't look "stuck" to the side */
  .navbar.nav-brand .navbar-nav .badge-wrap{
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }
  .navbar.nav-brand .navbar-nav .dropdown-toggle{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    justify-content: center;
    line-height: 1.1;
  }
  .navbar.nav-brand .navbar-nav .dropdown-toggle::after{
    margin-top: 0;
  }
}

/* Brand w jednej linii, ale może się zwężać */
.navbar.nav-brand .navbar-brand{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;          /* TYLKO tu nowrap */
}

/* Utnij tytuł, żeby nie wchodził na toggler */
.navbar.nav-brand .brand-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;            /* kluczowe: nie rozpycha na mobilu */
}

/* Zmniejsz logo na mobile, bo 72px robi za szeroko */
@media (max-width: 576px){
  .brand-logo{ width: 44px; height: 44px; border-radius: 12px; }
  .navbar.nav-brand .brand-title{ max-width: 48vw; font-size: .88rem; }
}







/* Tablet/iPad: hamburger menu should expand IN-FLOW (push content down), not cover the page */
@media (max-width: 1199.98px){
  .navbar.nav-brand{ overflow: visible; }

  /* Collapse becomes a normal block under the navbar */
  .navbar.nav-brand .navbar-collapse{
    position: static;
    padding: .75rem .75rem 1rem;
    background: var(--nav-bg);
    border-top: 1px solid var(--border);
    box-shadow: none;
    border-radius: 0 0 18px 18px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Bootstrap dropdowns inside the collapsed navbar should expand IN-FLOW.
     Otherwise they get clipped by the scroll container (overflow-y: auto). */
  .navbar.nav-brand .navbar-collapse .dropdown-menu,
  .navbar.nav-brand .navbar-collapse .dropdown-menu[data-bs-popper]{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    margin: .35rem 0 0 !important;
  }

  /* Touch-friendly items (full-width) */
  .navbar.nav-brand .navbar-nav{ align-items: stretch; gap: .25rem !important; }
  .navbar.nav-brand .navbar-nav .nav-item{ width: 100%; }
  .navbar.nav-brand .navbar-nav .nav-link{
    padding: .85rem 1rem;
    border-radius: 14px;
  }

  /* Keep theme toggle compact (do not stretch full width) */
  .navbar.nav-brand .navbar-nav .nav-item-theme{
    width: auto !important;
    align-self: flex-start;
  }
  .navbar.nav-brand .navbar-nav .nav-item-theme .theme-toggle{
    width: 44px;
    min-width: 44px;
    padding: .45rem;
    display: inline-flex;
    justify-content: center;
  }

  /* Prevent touch horizontal-scroll rules from breaking vertical collapse */
  html.cp-touch .navbar.nav-brand .navbar-collapse{ overflow-x: hidden; }
  html.cp-touch .navbar.nav-brand .navbar-nav{ white-space: normal; }

  .navbar.nav-brand .navbar-nav .nav-link:hover{ background: rgba(255,255,255,0.06); }
  html[data-theme='light'] .navbar.nav-brand .navbar-nav .nav-link:hover{ background: rgba(11,11,13,0.06); }
}


.brand-logo{
  /* Bigger & more readable (navbar + mobile). The source image is tightly cropped in static/brand/logo.png */
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 18px rgba(0,0,0,0.35);
}
html[data-theme="light"] .brand-logo{
  box-shadow:
    0 0 0 1px rgba(11,11,13,0.10),
    0 8px 18px rgba(11,11,13,0.12);
}

.brand-title{
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  opacity: .95;
  color: var(--text);
}

.nav-link{ color: var(--nav-link) !important; }
.nav-link:hover{ color: var(--text) !important; }

.theme-toggle{
  padding: 6px 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.theme-toggle .theme-icon{ font-size: 0.95rem; }

/* Navbar right group (desktop) */
.navbar-right{
  flex: 0 0 auto;
  white-space: nowrap;
}
.navbar-right .nav-link{ padding: .35rem .4rem; }
.navbar-right .nav-user-email{ max-width: 260px; }

/* Navbar actions: premium icon buttons (chat / notifications / theme) */
.navbar-actions{ gap: 10px; }
.navbar-actions--mobile{ margin-left: auto; }
.navbar-actions--desktop{ margin-left: 6px; margin-right: 2px; }

.nav-icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--nav-link);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme="light"] .nav-icon-btn{
  background: rgba(11,11,13,0.03);
  box-shadow: 0 10px 22px rgba(11,11,13,0.08);
}

.nav-icon-btn:hover,
.nav-icon-btn:focus{
  background: var(--hover);
  color: var(--text);
  border-color: rgba(230,90,26,0.28);
}
.nav-icon-btn:active{ transform: translateY(1px); }

.nav-icon-btn.is-active{
  background: rgba(230,90,26,0.14);
  border-color: rgba(230,90,26,0.45);
  color: var(--brand);
}

.nav-icon-btn .nav-ico-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon-btn svg.nav-ico,
.nav-icon-btn svg.nav-svg,
.nav-icon-btn svg.ico-sun,
.nav-icon-btn svg.ico-moon{
  width: 18px;
  height: 18px;
}

.nav-ico-badge{
  position: absolute;
  top: -7px;
  right: -8px;
  font-size: .68rem;
  padding: .18em .44em;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

/* Theme icon wrapper */
.theme-toggle .theme-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: keep premium navbar in ONE row without truncating brand (even after changing fonts).
   If there are too many tabs, the center nav becomes horizontally scrollable (no wrapping). */
@media (min-width: 1200px){
  /* slightly tighter links */
  .navbar.nav-brand .navbar-nav .nav-link{
    padding-left: .45rem;
    padding-right: .45rem;
    letter-spacing: .1px;
    font-size: .92rem;
  }

  /* keep brand readable (do not aggressively ellipsis on desktop) */
  .navbar.nav-brand .navbar-brand{ flex-shrink: 0; }
  .navbar.nav-brand .brand-title{ max-width: none; font-size: .92rem; }

  /* allow center tabs to scroll instead of breaking layout */
  .navbar.nav-brand .navbar-collapse{ min-width: 0; }
  .navbar.nav-brand .navbar-nav.nav-primary{
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .navbar.nav-brand .navbar-nav.nav-primary::-webkit-scrollbar{ display:none; }
  .navbar.nav-brand .navbar-nav.nav-primary .nav-item{ flex: 0 0 auto; }

  /* right side (icons/email) should never shrink into the center */
  .navbar.nav-brand .navbar-right{ flex: 0 0 auto; }
}

/*
  FIX: Public navbar dropdown ("Funkcje") was opening but the menu was clipped.
  Reason: on desktop we make the center nav horizontally scrollable using overflow-x:auto,
  which also clips any absolutely-positioned dropdown-menu inside that container.

  On public/marketing pages there are only a few items, so we can safely disable the
  scroll-container behavior and allow dropdown menus to overflow normally.
*/
@media (min-width: 1200px){
  body.public-shell .navbar.nav-brand .navbar-nav.nav-primary{
    overflow: visible;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  }
  body.public-shell .navbar.nav-brand .navbar-nav.nav-primary::-webkit-scrollbar{
    display: initial;
  }
}

/* Navbar toggler visibility in light mode (bootstrap uses a white icon for navbar-dark) */
html[data-theme="light"] .navbar-toggler{
  border-color: rgba(11,11,13,0.18) !important;
}
html[data-theme="light"] .navbar-toggler-icon{
  filter: invert(1) grayscale(1);
  opacity: .9;
}

/* Cards */
.card-brand{
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(230,90,26,0.08), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  color: var(--text);
  /*
    IMPORTANT:
    The exercise picker dropdown (absolute positioned) can overlap the next cards in the right column.
    When cards use transforms on hover, they create a new stacking context and later siblings may paint above
    the dropdown (covering it). We keep each card positioned and raise z-index on hover/focus-within.
  */
  position: relative;
  z-index: 0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Bootstrap-like cards used in some templates (e.g. /guide) */
.card-dark{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--text);
}
.card-dark .card-body{ color: var(--text); }
.card-dark .text-muted{ color: var(--muted) !important; }

/* Guide page shortcuts list: keep contrast in both themes */
.guide-shortcuts .list-group-item{
  border-color: var(--border) !important;
}
.guide-nav-item{
  color: var(--text-soft) !important;
  border-radius: 12px;
  padding: 10px 12px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.guide-nav-item:hover{
  color: var(--text) !important;
  background: var(--hover) !important;
}
.guide-nav-item.active{
  color: var(--text) !important;
  background: var(--hover) !important;
  border: 1px solid rgba(230,90,26,0.26) !important;
}
.guide-nav-item:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,90,26,0.25);
}

/* Guide page – premium components (works in dark + light) */
.guide-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.guide-head .meta{ color: var(--muted); font-size: .95rem; }
.copy-link{ white-space: nowrap; }

.guide-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.28rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--badge-muted-bg);
  color: var(--text-85);
  font-size:.85rem;
}

.guide-tip{
  border:1px solid var(--border);
  background: var(--surface2);
  border-radius: 16px;
  padding:.8rem .95rem;
}
.guide-tip .t{ font-weight: 800; }
.guide-tip .d{ color: var(--text-85); }

.guide-search{
  background: var(--input-bg);
  border:1px solid var(--input-border);
  color: var(--text);
}
.guide-search::placeholder{ color: var(--placeholder); }

.guide-hr{ border-color: var(--border); }

/* Small rhythm improvements for long reading */
.guide-section h3{ font-weight: 900; letter-spacing: -0.01em; }
.guide-section ol, .guide-section ul{ padding-left: 1.15rem; }
.guide-section li{ margin-bottom: .25rem; }
.guide-section a{ text-decoration: none; font-weight: 700; }
.guide-section a:hover{ text-decoration: underline; }

/* Raise the active (focused) card above siblings so dropdown menus are not covered */
.card-brand:focus-within{ z-index: 30; }
/*
  iOS Safari on touch devices can require a "double tap" when :hover styles exist.
  Apply hover-only effects ONLY on devices that actually support hover.
*/
@media (hover: hover) and (pointer: fine){
  .card-brand:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
    border-color: var(--border-strong);
    z-index: 30;
  }
}

/* Landing: na telefonach nie ma hover — daj subtelne "wyróżnienie" sekcji jak na desktopie */
@media (hover: none) and (pointer: coarse){
  .lp-card,
  .lp-feature,
  .lp-step,
  .lp-compare-col{
    border-color: rgba(227,75,24,0.18);
    box-shadow: 0 16px 38px rgba(0,0,0,0.16);
  }
  html[data-theme="light"] .lp-card,
  html[data-theme="light"] .lp-feature,
  html[data-theme="light"] .lp-step,
  html[data-theme="light"] .lp-compare-col{
    border-color: rgba(227,75,24,0.16);
    box-shadow: 0 16px 38px rgba(0,0,0,0.10);
  }

  /* dodatkowa reakcja na dotyk */
  .lp-card:active,
  .lp-feature:active,
  .lp-step:active,
  .lp-compare-col:active{
    transform: translateY(1px);
  }
}

.inner-card{
  padding: 14px;
  background: var(--surface2);
  border-radius: 16px;
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .18s ease, background-color .18s ease;
}

/* Pricing cards: allow multi-line descriptions (no ellipsis) */
.pricing-card .plan-description{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
}

/* Dashboard stats: keep short labels on one line on very small screens */
.inner-card .small{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.inner-card .small.text-muted{ white-space: nowrap; }

/* Dashboard stats labels: show full "W tym ..." text (wrap, no ellipsis) */
.inner-card .stats-label{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.05;
  min-height: 2.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inner-card .stats-label span{ display: block; }

@media (max-width: 420px){
  .inner-card .fs-2{ font-size: 1.75rem !important; }
}

@media (max-width: 360px){
  .inner-card .small{ font-size: 0.78rem; }
}

.item-brand{
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transition: background-color .16s ease, border-color .16s ease;
}
html[data-theme="light"] .item-brand{ background: rgba(11,11,13,0.02) !important; }
@media (hover: hover) and (pointer: fine){
  .item-brand:hover{ background: var(--hover) !important; border-color: rgba(230,90,26,0.28) !important; }
}

/* Inputs */
.input-brand, .form-select.input-brand{
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 14px !important;
  transition: box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.input-brand:focus{
  border-color: rgba(230,90,26,0.70) !important;
  box-shadow: 0 0 0 .2rem rgba(230,90,26,0.18) !important;
}
::placeholder{ color: var(--placeholder) !important; opacity: 1; }
input.input-brand, .form-select.input-brand{ caret-color: var(--text); }

/* Goal switch field (np. "Suplementacja") — wygląda jak input, ale zawiera przełącznik */
.cp-switch-field{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  /* Dopasuj wysokość i padding do Bootstrapowego .form-control */
  padding: .375rem .75rem;
  min-height: calc(1.5em + .75rem + 2px);
}
.cp-switch-field .form-check{ padding-left: 0; min-height: unset; margin: 0; }
.cp-switch-field .form-check-input{ margin-left: 0; }
.cp-switch-state{ font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cp-switch-field.is-on .cp-switch-state{ color: var(--orange2); }

/* Wyrównanie pól celów w panelu trenera (klient -> Dane) gdy etykiety zawijają się w 2 linie */
@media (min-width: 992px){
  .cp-goal-col .form-label{
    min-height: 2.2em; /* miejsce na 2 linie, żeby inputy startowały równo */
    display: flex;
    align-items: flex-end;
    margin-bottom: .35rem;
  }
}

/* Fix unreadable <select> dropdown list in dark mode (PC/Chrome/Windows) */
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) .form-select{
  color: var(--text) !important;
}
html:not([data-theme="light"]) select option,
html:not([data-theme="light"]) .form-select option,
html:not([data-theme="light"]) select optgroup{
  background-color: #0B0B0D !important;
  color: #F2F2F3 !important;
}
html[data-theme="light"] select option,
html[data-theme="light"] .form-select option,
html[data-theme="light"] select optgroup{
  background-color: #FFFFFF !important;
  color: #0B0B0D !important;
}

/* Buttons */
.btn-brand{
  background: linear-gradient(180deg, var(--orange2), var(--orange));
  border: 0;
  border-radius: 14px;
  color: white;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(230,90,26,0.25);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
@media (hover: hover) and (pointer: fine){
  .btn-brand:hover{ filter: brightness(1.05); transform: translateY(-1px); }
}
.btn-brand:active{ transform: translateY(0px); }

/* Dark theme: zawsze biała czcionka na przyciskach brandowych */
html[data-theme="dark"] .btn-brand,
html[data-theme="dark"] .btn-brand:hover,
html[data-theme="dark"] .btn-brand:focus{
  color:#fff !important;
}

.btn-outline-brand{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(230,90,26,0.55);
  color: var(--text);
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
html[data-theme="light"] .btn-outline-brand{
  background: rgba(11,11,13,0.04);
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}
@media (hover: hover) and (pointer: fine){
  .btn-outline-brand:hover{
    background: rgba(230,90,26,0.10);
    border-color: rgba(230,90,26,0.75);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(230,90,26,0.14), 0 10px 25px rgba(0,0,0,0.18);
  }
}
.btn-outline-brand:active{ transform: translateY(0px); }

/* PDF wait progress bar (brand dark orange) */
.cp-progress-brand{
  background: linear-gradient(180deg, var(--orange2), var(--orange)) !important;
}

.btn-outline-brand.active,
.btn-outline-brand[aria-pressed="true"]{
  background: rgba(230,90,26,0.16);
  border-color: rgba(230,90,26,0.90);
  box-shadow: 0 12px 28px rgba(230,90,26,0.14), 0 10px 25px rgba(0,0,0,0.18);
}

.link-brand{ color: var(--brand) !important; text-decoration: underline; }
.link-brand:hover{ opacity: .85; }

.badge-brand{
  background: rgba(230,90,26,0.20);
  color: #ffd9c8;
  border: 1px solid rgba(230,90,26,0.45);
  border-radius: 999px;
  padding: 6px 10px;
}
html[data-theme="light"] .badge-brand{ color: rgba(11,11,13,0.80); }
.badge-muted{
  background: var(--badge-muted-bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Client portal badge (clearly different than TRAINER) */
.badge-client{
  background: rgba(80,170,255,0.18);
  color: rgba(220,240,255,0.92);
  border: 1px solid rgba(80,170,255,0.42);
  border-radius: 999px;
  padding: 6px 10px;
}
html[data-theme="light"] .badge-client{ color: rgba(11,11,13,0.80); }

/* Wrapping helpers (avoid horizontal overflow on mobile) */
.min-w-0{ min-width: 0 !important; }
.wrap-anywhere{ overflow-wrap: anywhere; word-break: break-word; }
.badge-wrap{ white-space: normal; line-height: 1.15; }

/* Mobile plan badge: allow multi-line wrapping (no clipping) */
.plan-badge-line{
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
  display: inline-block;
  overflow-wrap: anywhere;
}

/* Admin users – keep plan select + button visible on mobile */
.user-plan-form{ flex-wrap: wrap; }
.user-plan-form .form-select{ min-width: 150px; flex: 1 1 160px; }
.user-plan-form .btn{ flex: 0 0 auto; }
@media (max-width: 576px){
  .user-plan-form .form-select{ flex: 1 1 100%; }
  .user-plan-form .btn{ width: 100%; }
}

.hr-brand{ border-color: var(--border); }

/* Tables */
.table-brand{
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  border-radius: 14px;
  overflow: hidden;
  border-color: var(--border-strong) !important;
}
.table-brand thead th{
  background: var(--table-head-bg) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border-strong) !important;
}
.table-brand tbody td{
  background: var(--table-row-bg) !important;
  color: var(--text-soft) !important;
  border-top-color: var(--border) !important;
}
.table-brand tbody tr:hover td{
  background: rgba(230,90,26,0.08) !important;
}
html[data-theme="light"] .table-brand tbody tr:hover td{
  background: rgba(230,90,26,0.10) !important;
}

/* Section headers inside tables (e.g., Users -> Trainers / Clients) */
.table-section-row td{
  background: rgba(255,255,255,0.03) !important;
  color: var(--muted) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
  border-top-color: var(--border-strong) !important;
}
html[data-theme="light"] .table-section-row td{
  background: rgba(11,11,13,0.03) !important;
}
.table-brand tbody tr.table-section-row:hover td{
  background: rgba(255,255,255,0.03) !important;
}
html[data-theme="light"] .table-brand tbody tr.table-section-row:hover td{
  background: rgba(11,11,13,0.03) !important;
}


/* Body measurements table (BodyMetric) – keep columns readable, reduce empty gaps */
.measures-table{
  table-layout: fixed;
  width: max-content;
  min-width: 980px;
}
.measures-table th,
.measures-table td{
  white-space: nowrap;
}

/* Column sizing (works for both /me and trainer client_detail; last column may be actions) */
.measures-table th:nth-child(1),
.measures-table td:nth-child(1){ width: 120px; }
.measures-table th:nth-child(2),
.measures-table td:nth-child(2){ width: 80px; }
.measures-table th:nth-child(3),
.measures-table td:nth-child(3){ width: 70px; }
.measures-table th:nth-child(4),
.measures-table td:nth-child(4){ width: 90px; }
.measures-table th:nth-child(5),
.measures-table td:nth-child(5){ width: 90px; }
.measures-table th:nth-child(6),
.measures-table td:nth-child(6){ width: 120px; }
.measures-table th:nth-child(7),
.measures-table td:nth-child(7){ width: 420px; }
.measures-table th:nth-child(8),
.measures-table td:nth-child(8){ width: 220px; }
.measures-table th:nth-child(9),
.measures-table td:nth-child(9){ width: 96px; }

.measures-table .obwody-cell,
.measures-table .note-cell{
  white-space: normal;
}

.measures-table .cell-clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

@media (max-width: 992px){
  .measures-table th:nth-child(7),
  .measures-table td:nth-child(7){ width: 320px; }
  .measures-table th:nth-child(8),
  .measures-table td:nth-child(8){ width: 180px; }
}


/* Exercises table stability (prevents layout breaking when badges/buttons appear) */
.exercises-table{
  width: 100%;
  table-layout: fixed;
}
.exercises-table th:nth-child(1), .exercises-table td:nth-child(1){ width: 62%; }
.exercises-table th:nth-child(2), .exercises-table td:nth-child(2){ width: 28%; }
.exercises-table th:nth-child(3), .exercises-table td:nth-child(3){ width: 10%; }

.ex-name-cell{
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.ex-name-text{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ex-badge{ flex: 0 0 auto; }

.exercises-table td:nth-child(2){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exercises-table td:nth-child(3){
  white-space: nowrap;
}

/* Text helpers */
.text-muted, .text-secondary, .text-body-secondary{ color: var(--muted) !important; }
.form-label{ color: var(--text-85) !important; }
.form-text, .small.text-muted{ color: var(--muted) !important; }
a{ text-decoration: none; }

/* Alerts */
.alert-brand{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--alert-bg);
  color: var(--text);
}

/* Stat cards */
.stat-box{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
}
html[data-theme="light"] .stat-box{ background: rgba(11,11,13,0.03); }
.stat-label{ font-size: 0.78rem; color: var(--muted) !important; }
.stat-value{ font-size: 1.15rem; font-weight: 800; color: var(--text) !important; }

/* Dropdowns */
.dropdown-menu{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  z-index: 2000;
}
.dropdown-item{ color: var(--text); }
.dropdown-item:hover{ background: var(--hover); color: var(--text); }
.dropdown-divider{ border-top-color: var(--border); }

/* Navbar – center user dropdown items (email menu) */
.nav-user-menu{ padding: 8px 10px; }
.nav-user-menu .dropdown-item{ text-align: center; border-radius: 10px; font-weight: 850; }
.nav-user-menu .dropdown-item:active{ background: var(--hover); }
.nav-user-menu .dropdown-divider{ margin: 6px 0; }


/* =========================
   Reports – KPI strip + charts
   (was missing → KPIs showed as plain text)
   ========================= */

.kpi-strip{
  display: grid;
  gap: 12px;
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px){
  .kpi-strip{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1400px){
  .kpi-strip{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.kpi-card{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.kpi-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 260px at 10% 0%, rgba(230,90,26,0.10), transparent 55%);
  pointer-events: none;
  opacity: .9;
}

html[data-theme="light"] .kpi-card::before{
  background: radial-gradient(800px 260px at 10% 0%, rgba(230,90,26,0.12), transparent 58%);
}

.kpi-label{
  position: relative;
  font-size: 0.78rem;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: 4px;
}

.kpi-value{
  position: relative;
  font-size: 1.22rem;
  font-weight: 850;
  line-height: 1.15;
  color: var(--text);
}

.kpi-sub{
  position: relative;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.chart-box{
  height: 220px;
}

/* Smaller charts (client portal / compact cards) */
.chart-box-sm{
  height: 160px;
}

.chart-empty{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 576px){
  .chart-box{ height: 200px; }
  .chart-box-sm{ height: 170px; }
}

.top-muscles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.top-muscles .muscle-row{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
}

html[data-theme="light"] .top-muscles .muscle-row{ background: rgba(11,11,13,0.02); }

.top-muscles .muscle-name{ font-weight: 750; color: var(--text-soft); }
.top-muscles .muscle-val{ color: var(--muted); font-variant-numeric: tabular-nums; }

/* =========================
   Reports – Scrollable trainings list
   ========================= */

.trainings-list{
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.training-row{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.training-open{
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

@media (hover: hover) and (pointer: fine){
  .training-open:hover{
    background: var(--hover);
    border-color: var(--border-strong);
    transform: translateY(-1px);
    color: var(--text);
  }
}

.training-left{
  min-width: 64px;
  font-weight: 850;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.training-mid{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.training-tonnage{
  font-weight: 800;
  line-height: 1.1;
}

.training-meta{
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.training-pill{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 750;
}

/* Client page – a bit taller (more history visible) */
.trainings-list-client{ max-height: 520px; }

/* Status emphasis */
.training-pill.is-active{
  background: rgba(255, 122, 0, 0.22);
  border-color: rgba(255, 122, 0, 0.35);
  color: var(--text-soft);
}

/* Calendar booking statuses */
.training-pill.is-requested{
  background: rgba(251,191,36,0.18);
  border-color: rgba(251,191,36,0.35);
}
.training-pill.is-scheduled{
  background: rgba(96,165,250,0.16);
  border-color: rgba(96,165,250,0.35);
}
.training-pill.is-confirmed{
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.40);
}
.training-pill.is-cancelled{
  background: rgba(148,163,184,0.16);
  border-color: rgba(148,163,184,0.35);
}
.training-pill.is-declined{
  background: rgba(148,163,184,0.16);
  border-color: rgba(148,163,184,0.35);
}

.training-pill.is-finished{
  opacity: 0.92;
}

html[data-theme="light"] .training-pill.is-active{
  background: rgba(255, 122, 0, 0.18);
  border-color: rgba(255, 122, 0, 0.28);
}

html[data-theme="light"] .training-pill{
  background: rgba(11,11,13,0.04);
}

.training-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 576px){
  .trainings-list{ max-height: 300px; }
  .trainings-list-client{ max-height: 360px; }
  .training-open{ padding: 10px 10px; }
  .training-left{ min-width: 58px; }
}

/* Back-compat classes used by JS in reports_client.html */
.top-muscles .mus-row{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 110px 90px;
  gap: 10px;
  align-items: center;
}
html[data-theme="light"] .top-muscles .mus-row{ background: rgba(11,11,13,0.02); }
.top-muscles .mus-name{ font-weight: 750; color: var(--text-soft); }
.top-muscles .mus-val{ color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.top-muscles .mus-bar{
  height: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
html[data-theme="light"] .top-muscles .mus-bar{ background: rgba(11,11,13,0.04); }
.top-muscles .mus-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, rgba(255,106,31,0.90), rgba(230,90,26,0.70));
  border-radius: 999px;
}

@media (max-width: 520px){
  .top-muscles .mus-row{ grid-template-columns: 1fr; }
  .top-muscles .mus-val{ text-align: left; }
}

/* =========================
   FIX: "Najmocniej trenowane partie" (Top muscles)
   =========================
   Na szerokich ekranach .top-muscles był grid-em z kafelkami (min 180px),
   a pojedynczy wiersz (.mus-row) ma wewnętrznie 3 kolumny (nazwa + pasek + wartość).
   Przy wąskich kafelkach powodowało to nachodzenie tekstu i "uciekanie" wartości kg
   poza kartę. Ustawiamy układ listy (pełna szerokość) + elastyczne kolumny.
*/
.top-muscles{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-muscles .mus-row{
  grid-template-columns: minmax(140px, 1fr) 1fr 90px;
}

.top-muscles .mus-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-muscles .mus-val{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-muscles .mus-bar{ width: 100%; }

@media (max-width: 520px){
  .top-muscles .mus-name{ white-space: normal; }
}

/* ---- Exercise DB list ---- */
.exercise-db-list{
  max-height: 280px;
  overflow:auto;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background: rgba(0,0,0,0.12);
}
html[data-theme="light"] .exercise-db-list{ background: rgba(11,11,13,0.02); }
.exercise-db-list .rowline{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.exercise-db-list .rowline:last-child{ border-bottom:none; }
.exercise-db-list .rowline:hover{
  background: rgba(255,255,255,0.07);
}
html[data-theme="light"] .exercise-db-list .rowline:hover{
  background: rgba(11,11,13,0.04);
}
.exercise-db-list .ex-name{ color: var(--text-soft); font-weight:650; }
.exercise-db-list .ex-mg{ color: var(--muted); }

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .card-brand, .inner-card, .item-brand, .btn-brand, .btn-outline-brand, .input-brand { transition: none !important; }
}


/* Demo CTA */
.demo-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,106,31,0.35);
  background: linear-gradient(90deg, rgba(255,106,31,0.12), rgba(0,0,0,0.00));
  box-shadow: var(--shadow-soft);
}
html[data-theme="light"] .demo-cta{
  background: linear-gradient(90deg, rgba(255,106,31,0.10), rgba(255,255,255,0.00));
}
.demo-cta-title{
  font-weight:800;
  letter-spacing:0.4px;
  font-size:0.92rem;
}
.demo-cta-text{
  font-size:0.9rem;
  color: var(--text-85);
}
.demo-form-note{
  font-size:0.85rem;
  color: var(--muted);
}
.demo-form-note a{
  font-weight:700;
}

/* ---------------- Landing / Dashboard HERO (premium) ---------------- */
.hero-shell{position:relative}
.hero-surface{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:28px;
  background: radial-gradient(1200px 400px at 10% 0%, rgba(255,140,0,0.20), transparent 55%),
              radial-gradient(1000px 420px at 90% 100%, rgba(255,60,0,0.16), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--hero-shadow);
}
/* Light theme: hero surfaces shouldn't cast a harsh dark band */
html[data-theme="light"] .hero-surface{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(230,90,26,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74));
  border: 1px solid rgba(11,11,13,0.10);
}
html[data-theme="light"] .dash-hero-surface{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(230,90,26,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74));
  border: 1px solid rgba(11,11,13,0.10);
}

.hero-surface::before,
.hero-surface::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: conic-gradient(from 180deg, rgba(255,140,0,0.0), rgba(255,140,0,0.22), rgba(255,60,0,0.0));
  filter: blur(22px);
  opacity:0.55;
  animation: heroSpin 10s linear infinite;
  pointer-events:none;
}
.hero-surface::after{animation-duration:16s; opacity:0.35; filter: blur(30px)}
@keyframes heroSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.hero-eyebrow{letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color: var(--muted); font-size:12px}
.hero-title{font-size: clamp(28px, 3.6vw, 44px); font-weight:800; line-height:1.08; margin:6px 0 10px}
.hero-subtitle{font-size: 16px; color: var(--muted); margin:0}
.hero-bullets{display:flex; flex-wrap:wrap; gap:10px}
.hero-bullet{font-size:13px; color: var(--text-85); padding:6px 10px; border-radius:999px; background: rgba(0,0,0,0.18); border:1px solid var(--border)}

.hero-visual{position:relative}
.hero-visual-card{
  border-radius:20px;
  overflow:hidden;
  background: rgba(10,10,12,0.72);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 45px rgba(0,0,0,0.60);
}
.hero-visual-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.08)}
.hero-visual-head .dot{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,0.18)}
.hero-visual-title{margin-left:auto; font-size:12px; color: rgba(255,255,255,0.65)}
.hero-svg{width:100%; height:auto; display:block}

/* Landing animations + micro-graphics */
.fade-in-up{animation: fadeUp .85s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeUp{from{opacity:0; transform:translate3d(0,12px,0)}to{opacity:1; transform:translate3d(0,0,0)}}
.floaty{animation: landingFloat 8s ease-in-out infinite}
@keyframes landingFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
.hero-line{stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine 1.4s ease forwards .25s}
@keyframes drawLine{to{stroke-dashoffset: 0}}


/* Landing section spacing (consistent vertical rhythm) */
.landing-page > section{margin-top:1.5rem}
.landing-page > section:first-child{margin-top:0}
.landing-page{}
@media (min-width: 992px){.landing-page > section{margin-top:2rem}}
.landing-kpis{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px}
.landing-kpi{background: rgba(0,0,0,0.18); border:1px solid var(--border); border-radius:16px; padding:10px 12px}
.landing-kpi-label{font-size:12px; color: var(--muted)}
.landing-kpi-value{font-size:14px; font-weight:800}
@media (max-width: 520px){.landing-kpis{grid-template-columns:1fr}}

/* Landing hero: trust strip + product preview */
.trust-strip{display:flex; flex-wrap:wrap; gap:10px}
.trust-item{font-size:13px; font-weight:800; color: var(--text-85); padding:8px 12px; border-radius:999px; background: rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.10)}
html[data-theme="light"] .trust-item{background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10)}

.hero-product{position:relative; display:grid; place-items:center; min-height: 520px}
.hero-product-stack{position:relative; width: min(560px, 100%); display:grid; place-items:center}
.hero-phone{position:relative; z-index: 3}

.hero-mini-card{
  position:absolute;
  bottom: 10px;
  right: 10px;
  z-index: 4;
  max-width: 330px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .hero-mini-card{
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 16px 42px rgba(10,10,20,0.12);
}
.hero-mini-title{font-weight: 900; font-size: 14px}
.hero-mini-sub{margin-top:6px; color: var(--muted); font-size: 12px; line-height:1.25}
.hero-mini-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.mini-chip{font-size:12px; padding:5px 10px; border-radius:999px; background: rgba(255,140,0,0.14); border:1px solid rgba(255,140,0,0.18); font-weight:900}
html[data-theme="light"] .mini-chip{background: rgba(230,90,26,0.10); border-color: rgba(230,90,26,0.18)}

.hero-product .landing-float-badge{left: 6px; bottom: 12px}
.hero-product .landing-float-badge.badge-2{left:auto; right: 10px; top: 18px; bottom: auto}

@media (max-width: 991px){
  .hero-product{min-height: 460px; margin-top: 6px}
}
@media (max-width: 576px){
  .hero-product{min-height: 0}
  .hero-mini-card{position:relative; bottom:auto; right:auto; margin-top: 12px; width: 100%; max-width: 520px}
  .hero-product .landing-float-badge{display:none}
}

.landing-float-badge{position:absolute; left:-10px; bottom:14px; padding:8px 12px; border-radius:999px; background: rgba(0,0,0,0.55); border:1px solid rgba(255,140,0,0.28); color: rgba(255,255,255,0.92); font-size:12px; font-weight:800; box-shadow: 0 12px 30px rgba(0,0,0,0.55)}
.landing-float-badge.badge-2{left:auto; right:-10px; bottom:62px; border-color: rgba(255,255,255,0.12); font-weight:700; color: rgba(255,255,255,0.84)}
.pulse{animation: pulseGlow 2.0s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{transform:translate3d(0,0,0); box-shadow: 0 12px 30px rgba(0,0,0,0.55)}50%{transform:translate3d(0,-2px,0); box-shadow: 0 14px 34px rgba(0,0,0,0.62)}}

.step-card .step-num{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background: rgba(255,140,0,0.14); border:1px solid rgba(255,140,0,0.20); font-weight:900}

.cta-card{position:relative; overflow:hidden}
.cta-card::before{content:""; position:absolute; inset:-2px; background: radial-gradient(420px 180px at 15% 20%, rgba(255,140,0,0.22), transparent 60%), radial-gradient(520px 240px at 90% 90%, rgba(255,60,0,0.18), transparent 60%); filter: blur(18px); opacity:0.85; pointer-events:none}
.cta-card > *{position:relative}

/* Landing compare section */
.compare-card{position:relative; overflow:hidden}
.compare-card::before{content:""; position:absolute; inset:-2px; background: radial-gradient(520px 240px at 15% 20%, rgba(255,140,0,0.18), transparent 60%), radial-gradient(520px 240px at 90% 80%, rgba(255,60,0,0.14), transparent 60%); filter: blur(18px); opacity:0.70; pointer-events:none}
.compare-card > *{position:relative}

.compare-grid{display:grid; grid-template-columns: 1fr; gap:12px}
@media (min-width: 992px){.compare-grid{grid-template-columns: 1fr 1fr; gap:16px}}
.compare-col{border-radius:18px; border:1px solid var(--border); padding:14px 14px; background: rgba(0,0,0,0.14)}
html[data-theme="light"] .compare-col{background: rgba(0,0,0,0.02)}
.compare-title{font-weight:900; margin:0 0 8px}
.compare-col--bad{background: rgba(255,255,255,0.03)}
html[data-theme="light"] .compare-col--bad{background: rgba(11,11,13,0.02)}
.compare-col--good{background: linear-gradient(180deg, rgba(255,140,0,0.10), rgba(0,0,0,0.10)); border-color: rgba(255,140,0,0.20)}
html[data-theme="light"] .compare-col--good{background: linear-gradient(180deg, rgba(230,90,26,0.12), rgba(0,0,0,0.01)); border-color: rgba(230,90,26,0.22)}

@media (prefers-reduced-motion: reduce){
  .fade-in-up,.floaty,.pulse,.hero-line{animation:none !important}
}

.feature-grid{margin-top:18px}
.feature-card{height:100%}
.feature-icon{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background: rgba(255,140,0,0.14); border:1px solid rgba(255,140,0,0.18); margin-bottom:10px}
.feature-title{font-weight:800; margin:0 0 4px}
.feature-text{color: var(--muted); margin:0; font-size:14px}

/* Landing testimonials */
.testimonials-card{ position:relative; overflow:hidden; }
.testimonials-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 15% 20%, rgba(255,140,0,0.18), transparent 60%),
    radial-gradient(520px 240px at 90% 80%, rgba(255,60,0,0.14), transparent 60%);
  filter: blur(18px);
  opacity:0.65;
  pointer-events:none;
}
.testimonials-card > *{ position:relative; }

.testimonial-card{
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.14);
  padding:14px 14px;
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:10px;
}
html[data-theme="light"] .testimonial-card{
  background: rgba(0,0,0,0.02);
  border-color: rgba(11,11,13,0.10);
  box-shadow: 0 14px 34px rgba(10,10,20,0.10);
}
.t-top{ display:flex; align-items:center; gap:10px; }
.t-avatar{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  font-weight:900;
  background: rgba(255,140,0,0.16);
  border:1px solid rgba(255,140,0,0.22);
}
html[data-theme="light"] .t-avatar{
  background: rgba(230,90,26,0.10);
  border-color: rgba(230,90,26,0.20);
}
.t-meta{ line-height:1.1; }
.t-name{ font-weight:900; }
.t-role{ font-size:12px; color: var(--muted); margin-top:2px; }
.t-stars{
  margin-left:auto;
  font-size:12px;
  letter-spacing:1px;
  color: var(--brand);
  opacity:0.95;
  white-space:nowrap;
}
.t-quote{
  color: var(--text-85);
  font-size:14px;
  line-height:1.45;
}
.t-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.t-tag{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  background: rgba(255,140,0,0.12);
  border:1px solid rgba(255,140,0,0.18);
  font-weight:800;
  color: var(--text-85);
}
html[data-theme="light"] .t-tag{
  background: rgba(230,90,26,0.10);
  border-color: rgba(230,90,26,0.18);
  color: rgba(11,11,13,0.80);
}



/* Testimonials carousel */
.testimonials-carousel{ position:relative; margin-top:14px; }
.testimonials-track{
  --t-gap: 14px;
  display:flex;
  gap: var(--t-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px 12px;
  scrollbar-width: none;
  align-items: stretch;
}
.testimonials-track::-webkit-scrollbar{ display:none; }
.testimonials-track:focus{
  outline:none;
  box-shadow: 0 0 0 .25rem rgba(255,140,0,0.18);
  border-radius:18px;
}

.testimonials-track .testimonial-card{
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 992px){
  .testimonials-track .testimonial-card{
    flex-basis: calc((100% - 2*var(--t-gap)) / 3);
  }
}

.carousel-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,140,0,0.25);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-85);
  display:grid;
  place-items:center;
  box-shadow: var(--shadow-soft);
  z-index:3;
}
.carousel-nav:hover{ background: rgba(0,0,0,0.55); }
.carousel-nav:disabled{ opacity:0.35; cursor: default; }
.carousel-prev{ left:10px; }
.carousel-next{ right:10px; }

@media (max-width: 991.98px){
  .carousel-nav{ display:none; }
  .testimonials-track{ padding: 6px 2px 12px; }
}

html[data-theme="light"] .carousel-nav{
  background: rgba(255,255,255,0.75);
  border-color: rgba(230,90,26,0.30);
  color: rgba(11,11,13,0.80);
}
html[data-theme="light"] .carousel-nav:hover{ background: rgba(255,255,255,0.95); }
/* Dashboard hero */
.dash-hero{position:relative}
.dash-hero-surface{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:22px;
  background: radial-gradient(900px 320px at 15% 0%, rgba(255,140,0,0.18), transparent 55%),
              radial-gradient(900px 320px at 85% 100%, rgba(255,60,0,0.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 45px rgba(0,0,0,0.55);
}
.dash-hero-surface::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 20%, rgba(255,140,0,0.16), transparent 60%),
              radial-gradient(circle at 70% 80%, rgba(255,60,0,0.12), transparent 60%);
  filter: blur(18px);
  opacity:0.9;
  animation: heroFloat 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
.dash-hero-eyebrow{letter-spacing:0.12em; text-transform:uppercase; font-weight:800; color: var(--muted); font-size:12px}
.dash-hero-title{font-size: clamp(22px, 2.4vw, 30px); font-weight:900; margin:6px 0 6px}
.dash-hero-sub{color: var(--muted)}

.dash-hero-kpi{display:grid; gap:10px}
.kpi{display:flex; align-items:center; justify-content: flex-start; gap:10px; padding:12px 14px; border-radius:18px; background: rgba(0,0,0,0.20); border:1px solid rgba(255,255,255,0.08)}
.kpi-label{font-size:12px; color: var(--muted)}

/* Light theme readability fixes for dashboard hero */
html[data-theme="light"] .dash-hero-surface{
  background: radial-gradient(900px 320px at 15% 0%, rgba(255,140,0,0.12), transparent 55%),
              radial-gradient(900px 320px at 85% 100%, rgba(255,60,0,0.10), transparent 55%),
              linear-gradient(180deg, rgba(11,11,13,0.03), rgba(11,11,13,0.01));
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(11,11,13,0.10);
}
html[data-theme="light"] .kpi{
  background: rgba(11,11,13,0.03);
  border-color: var(--border);
}
.kpi-value{margin-left:auto; font-weight:900; font-size:22px}

@media (max-width: 576px){
  .hero-surface{padding:18px}
  .dash-hero-surface{padding:16px}
  /* Make hero CTA buttons align perfectly on mobile (premium, consistent edges) */
  .dash-hero-actions{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
  /* Secondary row: 2 buttons in one line (Plans + Reports) */
  .dash-hero-actions .dash-hero-secondary{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  .dash-hero-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* Tablet/iPad: dashboard hero CTAs should fill the row (3 buttons in one line, full width) */
@media (min-width: 768px) and (max-width: 1199.98px){
  .dash-hero-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px !important;
    width: 100%;
    align-items: stretch;
  }
  /* Let the 2 secondary buttons become grid items (columns 2 and 3) */
  .dash-hero-actions .dash-hero-secondary{ display: contents; }
  .dash-hero-actions .btn{
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
}

/* =========================
   Landing: DEMO + How it works (premium tiles)
   ========================= */

.demo-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 992px){
  .demo-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  .demo-cards{ grid-template-columns: 1fr; }
}

.demo-mini{
  position: relative;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.demo-mini::before{
  content:"";
  position:absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,106,31,0.20), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(230,90,26,0.12), transparent 60%);
  filter: blur(18px);
  opacity: 0.55;
  pointer-events: none;
}
.demo-mini-title{
  position: relative;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.demo-mini-sub{
  position: relative;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}
.demo-mini:hover{
  transform: translateY(-2px);
  border-color: rgba(255,106,31,0.22);
}

.landing-steps{
  display: grid;
  gap: 12px;
}

.landing-steps .step{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, border-color .15s ease;
}

.landing-steps .step-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--text);
  background: rgba(255,106,31,0.16);
  border: 1px solid rgba(255,106,31,0.24);
  flex: 0 0 auto;
}

.landing-steps .step-body{ min-width: 0; }

.landing-steps .step-title{
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-top: 1px;
}

.landing-steps .step-sub{
  color: var(--muted);
  font-size: 12.8px;
  line-height: 1.35;
  margin-top: 2px;
}

.landing-steps .step:hover{
  transform: translateY(-2px);
  border-color: rgba(255,106,31,0.22);
}

/* Light theme: keep contrast */
html[data-theme="light"] .demo-mini,
html[data-theme="light"] .landing-steps .step{
  background: rgba(11,11,13,0.02);
}

/* =========================
   Reports – Top filter toolbar (premium, compact)
   ========================= */
.report-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.report-title{ min-width: 240px; }

.report-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}

.report-toolbar .rt-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  flex-wrap:nowrap; /* prevent huge height on desktop */
}

.report-toolbar .rt-group.is-active{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.22);
}

.report-toolbar .rt-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:14px;
  font-weight:650;
  white-space:nowrap;
  line-height:1;
}

.report-toolbar .rt-actions .btn-brand.rt-pill{ padding:0 14px !important; }

.report-toolbar .rt-range-label{
  font-size:12px;
  opacity:0.75;
  margin-right:4px;
  white-space:nowrap;
}

.report-toolbar .rt-arrow{
  opacity:0.55;
  font-size:12px;
}

.report-toolbar .rt-date{
  height:34px;
  width: 170px !important;   /* override .form-control{width:100%} so it won't stack */
  min-width: 170px;
  border-radius:12px;
  padding: 0 10px;
  flex: 0 0 auto;
}

.report-toolbar form.rt-group{ margin:0; }

/* Slightly tighter on smaller desktop */
@media (max-width: 1200px){
  .report-toolbar{ justify-content:flex-start; }
  .report-toolbar .rt-date{ width: 155px !important; min-width: 155px; }
}

/* Mobile: groups stack nicely, dates go full width */
@media (max-width: 768px){
  .report-toolbar .rt-group{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .report-toolbar .rt-date{
    width: auto !important;
    min-width: 0;
    flex: 1 1 160px;
  }
}


/* ---------------- Beta tests (/testy) ---------------- */
.beta-hero{
  padding: 18px;
}
.beta-badge{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(230,90,26,0.14);
  border: 1px solid rgba(230,90,26,0.28);
  color: var(--text);
}
.beta-perks{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
}
.beta-perk{
  padding: .35rem .6rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: .9rem;
  color: var(--text);
}
.beta-form .form-control,
.beta-form .form-select{
  border-radius: 14px;
}
.beta-form textarea{
  min-height: 92px;
}
.hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 768px){
  .beta-perks{
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .beta-perk{
    font-size: .85rem;
  }
}


/* --- Exercises table: stable layout + nice truncation --- */
.table-fixed{ table-layout: fixed; width: 100%; }
.table-fixed th, .table-fixed td{ overflow: hidden; }
.ex-name-text{ min-width: 0; display: inline-block; max-width: 100%; }

/* --- Custom exercise muscle distribution sliders --- */
.dist-grid{ display: flex; flex-direction: column; gap: 10px; }
.dist-row{
  display: grid;
  grid-template-columns: 150px 1fr 64px;
  gap: 12px;
  align-items: center;
}
.dist-row .dist-name{ opacity: 0.92; }
.dist-row .dist-val{ text-align: right; }
.dist-row.is-primary .dist-name{ font-weight: 700; }
.dist-row.is-primary .dist-slider{ opacity: 0.75; }
@media (max-width: 576px){
  .dist-row{ grid-template-columns: 120px 1fr 56px; gap: 10px; }
}

/* --- Range sliders: brand orange everywhere (Chrome/Safari/Firefox) --- */
input[type="range"],
.form-range{
  accent-color: var(--orange2);
}

/* WebKit */
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--orange2) !important;
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 0 0 4px rgba(255,106,31,0.18);
}

/* Firefox */
input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}
input[type="range"]::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,106,31,0.35);
}
input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--orange2);
  border: 2px solid rgba(0,0,0,0.35);
}

/* --- Exercises list scroll (prevents very long pages) --- */
.ex-list-scroll{
  max-height: 70vh;
  overflow: auto;
}
@media (max-width: 768px){
  .ex-list-scroll{ max-height: 60vh; }
}

/* Exercises list – readable in dark theme */
.card-brand .ex-list-scroll .list-group-item{
  color: var(--text-soft);
}
.card-brand .ex-list-scroll .list-group-item .text-muted{
  color: var(--muted) !important;
}
.card-brand .ex-list-scroll .list-group-item.border-bottom{
  border-color: var(--border-strong) !important;
}

/* --- Exercise picker (searchable dropdown) --- */
.exercise-suggest.dropdown-menu{
  max-height: 320px;
  overflow: auto;
  /* Stay above sticky action bars and iOS UI */
  z-index: 10500;
}
.exercise-suggest .dropdown-item{
  white-space: normal;
  line-height: 1.2;
}

.exercise-suggest-overlay{
  position: fixed;
  z-index: 10500;
  max-height: min(60dvh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   Mobile exercise picker modal (LIVE + plan forms)
   ========================= */
.exercise-picker-modal{
  position: fixed;
  inset: 0;
  z-index: 10600;
  display: none;
}
.exercise-picker-modal.is-open{ display: block; }
.exercise-picker-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.exercise-picker-sheet{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(80dvh, 720px);
  background: rgba(18,18,22,0.98);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -18px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  /* Keep the sheet above the Android navigation bar / iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-theme="light"] .exercise-picker-sheet{
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.10);
}
.exercise-picker-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  margin: 10px auto 6px;
  background: rgba(255,255,255,0.22);
}
html[data-theme="light"] .exercise-picker-handle{ background: rgba(0,0,0,0.18); }
.exercise-picker-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 6px;
}
.exercise-picker-title{
  flex: 1;
  font-weight: 700;
  letter-spacing: .2px;
}
.exercise-picker-close{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: inherit;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
html[data-theme="light"] .exercise-picker-close{ border-color: rgba(0,0,0,0.14); }
.exercise-picker-search{ padding: 8px 14px 10px; }
.exercise-picker-list{
  padding: 0 6px 10px;
  overflow: auto;
  max-height: calc(min(80dvh, 720px) - 112px);
  -webkit-overflow-scrolling: touch;
}
.exercise-picker-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.exercise-picker-row + .exercise-picker-row{ margin-top: 8px; }
html[data-theme="light"] .exercise-picker-row{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

.exercise-picker-select{
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  text-align: left;
  font: inherit;
}
.exercise-picker-select:active{ transform: none; }
.exercise-picker-name{ font-weight: 600; line-height: 1.2; }

.exercise-picker-right{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.exercise-picker-badge{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
}
.exercise-picker-del{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: inherit;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
}
html[data-theme="light"] .exercise-picker-del{ border-color: rgba(0,0,0,0.14); }
.exercise-picker-del:disabled{ opacity: .6; }
.exercise-picker-item{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.exercise-picker-item + .exercise-picker-item{ margin-top: 8px; }
html[data-theme="light"] .exercise-picker-item{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}
.exercise-picker-empty{
  padding: 14px 12px;
  opacity: .75;
}

body.modal-open{ overflow: hidden; }



/* =========================
   Public SEO pages (landing + SEO routes)
   ========================= */
.badge-brand-soft{
  background: rgba(230,90,26,0.14);
  border: 1px solid rgba(230,90,26,0.25);
  color: rgba(255,255,255,0.88);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Light theme: keep the same accent but with readable text */
html[data-theme="light"] .badge-brand-soft{
  background: rgba(230,90,26,0.10);
  border-color: rgba(230,90,26,0.35);
  color: rgba(11,11,13,0.78);
}

.link-card{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.link-card:hover{
  transform: translateY(-2px);
  border-color: rgba(230,90,26,0.28);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.pdf-preview-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 992px){
  .pdf-preview-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.pdf-preview img{
  border: 1px solid var(--border);
}

.seo-faq{
  max-width: 880px;
  margin-inline: auto;
}
.seo-accordion .accordion-item{
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}
.seo-accordion .accordion-button{
  background: transparent;
  color: var(--text);
  padding: 14px 16px;
  box-shadow: none;
}
.seo-accordion .accordion-button::after{
  filter: invert(1);
  opacity: .70;
}
.seo-accordion .accordion-button:not(.collapsed){
  background: rgba(255,255,255,0.05);
}
.seo-accordion .accordion-body{
  background: transparent;
  color: var(--text-soft);
  padding: 14px 16px 16px;
}

/* Light theme: improve readability of SEO accordion (avoid white-on-white) */
html[data-theme="light"] .seo-accordion .accordion-item{
  background: rgba(0,0,0,0.015);
}
html[data-theme="light"] .seo-accordion .accordion-button:not(.collapsed){
  background: rgba(0,0,0,0.02);
}
html[data-theme="light"] .seo-accordion .accordion-button::after{
  filter: none;
  opacity: .55;
}


/* --- Public report previews (no PDF download) --- */
.report-shot-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px){
  .report-shot-grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.report-shot{
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.report-shot:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Light theme: keep report shots crisp (avoid washed-out borders) */
html[data-theme="light"] .report-shot{
  background: rgba(0,0,0,0.01);
}
html[data-theme="light"] .report-shot:hover{
  border-color: rgba(230,90,26,0.26);
  box-shadow: 0 12px 28px rgba(10,10,20,0.12);
}
.report-shot img{
  width: 100%;
  height: auto;
  display: block;
}


/* Landing: keep report thumbnails consistent (mixed aspect ratios) */
.landing-page .report-shot{
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-page .report-shot img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.report-figure{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  margin: 0;
}
.report-caption{
  margin-top: 8px;
  color: var(--text-soft);
  font-size: .92rem;
}

/* =========================
   Mobile preview (premium)
========================= */
/* Theme swap for mobile screenshots:
   - In LIGHT site theme show DARK UI screenshots (black set)
   - In DARK site theme show LIGHT UI screenshots (white set)
*/
.theme-swap--light,
.theme-swap--dark{ display:none !important; }

html[data-theme="light"] .theme-swap--light{ display:block !important; }
html[data-theme="light"] .theme-swap--dark{ display:none !important; }

html[data-theme="dark"] .theme-swap--light{ display:none !important; }
html[data-theme="dark"] .theme-swap--dark{ display:block !important; }

/* Extra safety: split preview carousels by theme (prevents iOS showing both sets) */
html[data-theme="light"] .theme-show--dark{ display:none !important; }
html[data-theme="dark"] .theme-show--light{ display:none !important; }


.mobile-preview-premium{
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  /* subtle parallax-like depth without JS (fixed background) */
  background: radial-gradient(600px 260px at 15% 10%, rgba(255,140,0,0.16), transparent 60%),
              radial-gradient(700px 320px at 90% 90%, rgba(255,60,0,0.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  background-attachment: fixed;
  border-radius: 22px;
}
html[data-theme="light"] .mobile-preview-premium{
  background: radial-gradient(600px 260px at 15% 10%, rgba(230,90,26,0.16), transparent 60%),
              radial-gradient(700px 320px at 90% 90%, rgba(230,90,26,0.10), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.00));
}

.mobile-preview-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 992px){
  .mobile-preview-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
  }
  .mobile-preview-sticky{
    position: sticky;
    top: 92px;
  }
}

.mobile-preview-points{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.mobile-preview-point{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
  border: 1px solid var(--border);
}
html[data-theme="light"] .mobile-preview-point{
  background: rgba(0,0,0,0.02);
}
.mobile-preview-point .tick{
  width: 26px;
  height: 26px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,140,0,0.14);
  border: 1px solid rgba(255,140,0,0.18);
  font-weight: 900;
  flex: 0 0 auto;
}
.mobile-preview-point .text{
  color: var(--text-85);
  font-size: 14px;
  line-height: 1.35;
}
.mobile-preview-point .text strong{color: var(--text); font-weight: 800}

/* iPhone frame */
.phone-stack{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
}
@media (max-width: 991px){
  .phone-stack{min-height: 480px;}
}

/* Mobile: keep the phone preview from becoming overly tall */
@media (max-width: 576px){
  /* Mobile: pixel-perfect — bez szarego paska i bez “nachodzenia” na napis */
  .phone-stack{ min-height: 0 !important; }

  /* Skaluje się po szerokości; wysokość wynika z aspect-ratio (393/812) */
  .phone{
    width: min(88vw, calc(78vh * 393 / 812)) !important;
    height: auto !important;
    max-width: 88vw !important;
    padding: 0 !important; /* WAŻNE: padding na małym ekranie psuje proporcje “ekranu” i robi szary pasek */
    --phone-radius: 42px !important;
  }

  .phone::before{ inset: 8px !important; }
  .phone-notch{ height: 18px !important; }

  /* Ekran musi wypełniać całą makietę */
  .phone-screen{
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;    background: #ffffff !important;

    border-radius: calc(var(--phone-radius) - 10px) !important;
  }

  html[data-theme="light"] .phone-screen{ background: #0b0b0e !important; }
    html[data-theme="dark"] .phone-screen{ background: #ffffff !important; }
.phone-snap{ height: 100% !important; }

  .phone-screen > img,
  .phone-snap img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    background: transparent !important;
  }

  /* Podpowiedź zawsze czytelna */
  .phone-hint{ position: relative; z-index: 4; margin-top: 14px !important; }

  /* Landing: CTA buttons — full-width, and 2-up rows are 50/50 */
  .landing-page .landing-btn-row{
    width: 100% !important;
    /* keep existing flex classes, just ensure it can fill container */
  }

  .landing-page .landing-btn-row > .btn{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
    /* center text (also when it wraps) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15;
    /* better thumb reach */
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Demo CTA button (outside landing-btn-row) -> full width on mobile */
  .landing-page .demo-cta-btn{
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Exactly 2 buttons in row -> 50/50 */
  .landing-page .landing-btn-row > .btn:first-child:nth-last-child(2),
  .landing-page .landing-btn-row > .btn:first-child:nth-last-child(2) ~ .btn{
    flex: 1 1 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }

  /* Exactly 3 buttons -> first two 50/50, third full width */
  .landing-page .landing-btn-row > .btn:first-child:nth-last-child(3),
  .landing-page .landing-btn-row > .btn:first-child:nth-last-child(3) ~ .btn:nth-child(2){
    flex: 1 1 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }
  .landing-page .landing-btn-row > .btn:nth-child(3):last-child{
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Force stacking even if there are 2 buttons */
  .landing-page .landing-btn-row--stack > .btn{
    flex: 1 1 100% !important;
    width: 100% !important;
  }

}

.phone{
  --phone-radius: 46px;
  width: min(360px, 92vw);
  aspect-ratio: 393 / 812;/* dopasowane do nowych screenów bez paska statusu */
  border-radius: var(--phone-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 22px 60px rgba(0,0,0,0.65);
  padding: 10px;
  position: relative;
}
html[data-theme="light"] .phone{
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01));
  border-color: rgba(0,0,0,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 16px 42px rgba(10,10,20,0.14);
}

.phone::before{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: calc(var(--phone-radius) - 10px);
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

.phone-notch{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 20px;
  border-radius: 0 0 18px 18px;
  background: rgba(0,0,0,0.70);
  border: 1px solid rgba(255,255,255,0.10);
  z-index: 3;
}
html[data-theme="light"] .phone-notch{
  background: rgba(0,0,0,0.18);
  border-color: rgba(0,0,0,0.10);
}

.phone-screen{
  height: 100%;
  width: 100%;
  border-radius: calc(var(--phone-radius) - 12px);
  overflow: hidden;
  background: #ffffff;
  position: relative;
}
html[data-theme="light"] .phone-screen{ background: #0b0b0e; }
.phone-screen > img{width:100%; height:100%; object-fit:contain; object-position:top center; display:block; background: transparent;}

/* Swipeable preview inside phone (no JS) */
.phone-snap{
  height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.phone-snap::-webkit-scrollbar{ display:none; }
.phone-snap{ scrollbar-width: none; }
.phone-snap img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  background: transparent;
  scroll-snap-align: start;
}

.phone-hint{
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}

/* Background phones for depth (desktop only) */
.phone--back{
  position: absolute;
  width: min(300px, 78vw);
  opacity: 0.80;
  filter: saturate(0.95) brightness(0.92);
}
.phone--back-left{
  left: -36px;
  top: 74px;
  transform: rotate(-6deg) scale(0.86);
  z-index: 1;
}
.phone--back-right{
  right: -38px;
  top: 140px;
  transform: rotate(5deg) scale(0.82);
  z-index: 1;
}
@media (max-width: 991px){
  .phone--back{ display:none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mobile-preview-premium{ background-attachment: scroll; }
  .phone-snap{ scroll-behavior: auto; }
}

.report-figure{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  margin: 0;
}
.report-caption{
  margin-top: 8px;
  color: var(--text-soft);
  font-size: .92rem;
}



@media (min-width: 1400px){
  .mobile-preview-premium{background-attachment:fixed;}
}

/* =========================
   Public pages (SEO/Blog) – premium visuals
   ========================= */

/* Only enable reveal hide when JS is present (SEO-safe) */
html.js .reveal{
  opacity:0;
  transform: translate3d(0,12px,0);
}
html.js .reveal.reveal--visible{
  opacity:1;
  transform: translate3d(0,0,0);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal{ will-change: opacity, transform; }

/* Public shell background helpers */
.public-shell .public-hero-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.public-shell .public-hero-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(550px 260px at 20% 0%, rgba(255,106,31,0.22), transparent 55%),
    radial-gradient(520px 260px at 80% 10%, rgba(230,90,26,0.18), transparent 55%),
    radial-gradient(520px 280px at 50% 120%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events:none;
}
.public-shell .public-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.08;
  pointer-events:none;
  mask-image: radial-gradient(closest-side at 50% 35%, black, transparent 70%);
}


html[data-theme="light"] .public-shell .public-hero-card::after{opacity:0.06;}
/* Animated orbs (subtle) */
.public-shell .orb{
  position:absolute;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  filter: blur(28px);
  opacity: 0.32;
  pointer-events:none;
  mix-blend-mode: screen;
  animation: orbFloat 10s ease-in-out infinite;
}
.public-shell .orb.orb-a{ left:-140px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(255,106,31,0.55), transparent 60%); }
.public-shell .orb.orb-b{ right:-160px; top:-140px; animation-delay: -3s; background: radial-gradient(circle at 30% 30%, rgba(230,90,26,0.45), transparent 60%); }
html[data-theme="light"] .public-shell .orb{mix-blend-mode: multiply; opacity: 0.16;}

.public-shell .orb.orb-c{ left:20%; bottom:-220px; width: 380px; height: 380px; animation-delay: -6s; opacity:0.22;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.22), transparent 62%);
}

/* Premium feature tiles */
.public-shell .feature-tile{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  box-shadow: 0 10px 35px rgba(0,0,0,0.22);
  padding: 14px 14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-theme="light"] .public-shell .feature-tile{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
  box-shadow: 0 10px 28px rgba(10,10,20,0.10);
}
.public-shell .feature-tile:hover{
  transform: translate3d(0,-2px,0);
  border-color: rgba(255,106,31,0.28);
  box-shadow: 0 18px 46px rgba(0,0,0,0.28);
}
.public-shell .feature-icon{
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,106,31,0.14);
  border: 1px solid rgba(255,106,31,0.20);
  color: var(--text);
  flex: 0 0 auto;
}
html[data-theme="light"] .public-shell .feature-icon{
  color: #0B0B0D;
}

/* Lightweight UI mockup */
.public-shell .ui-mock{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  overflow:hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
html[data-theme="light"] .public-shell .ui-mock{
  background: rgba(0,0,0,0.015);
  box-shadow: 0 14px 36px rgba(10,10,20,0.12);
}
.public-shell .ui-mock .ui-mock-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.public-shell .ui-mock .dots{display:flex; gap:6px;}
.public-shell .ui-mock .dot{width:10px;height:10px;border-radius:99px;background: rgba(255,255,255,0.16);}
html[data-theme="light"] .public-shell .ui-mock .dot{background: rgba(0,0,0,0.12);}
.public-shell .ui-mock .ui-mock-body{ padding: 10px; }
.public-shell .ui-mock .kpis{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;
}
.public-shell .ui-mock .kpi{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,0.02);
}
.public-shell .ui-mock .spark{
  height: 34px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255,106,31,0.15), rgba(255,106,31,0.02)),
    repeating-linear-gradient(to right, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 14px);
  position: relative;
  overflow:hidden;
}
.public-shell .ui-mock .spark::after{
  content:"";
  position:absolute;
  inset:-20px -40px -20px -40px;
  background: radial-gradient(120px 60px at 25% 55%, rgba(255,106,31,0.55), transparent 60%);
  opacity: .30;
  animation: mockGlow 4.2s ease-in-out infinite;
}
@keyframes mockGlow{0%,100%{transform:translate3d(-10px,0,0)}50%{transform:translate3d(18px,0,0)}}

/* Section separators for public pages */
.public-shell .section-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,31,0.35), transparent);
  opacity: .55;
  margin: 18px 0;
}

@media (max-width: 576px){
  .public-shell .ui-mock .kpis{grid-template-columns: 1fr; }
  .public-shell .orb{ width: 260px; height: 260px; opacity: 0.24; }
}



/* Cookie notice (essential cookies info) */
.cookie-notice{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 1060;
  pointer-events: none;
}
.cookie-notice.is-hidden{ display:none; }
.cookie-notice__inner{
  pointer-events: auto;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
:root[data-theme="light"] .cookie-notice__inner{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.cookie-notice a{ text-decoration: none; }
.cookie-notice a:hover{ text-decoration: underline; }


/* --- Footer / Social buttons --- */
.footer-divider{
  display:inline-block;
  width:1px;
  height:18px;
  background:rgba(255,255,255,.18);
  margin:0 .25rem;
  align-self:center;
}
html[data-theme="light"] .footer-divider{
  background:rgba(0,0,0,.12);
}
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  padding:.20rem .55rem;
  line-height:1.1;
}
.social-ico{
  width:16px;
  height:16px;
}
.footer-social-btn{
  opacity:.92;
}
.footer-social-btn:hover{
  opacity:1;
  transform:translateY(-1px);
}
.social-nav .social-btn{
  padding:.18rem .5rem;
}



/* --- Floating UI helpers (premium) --- */
.fab-scroll-top{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 1058;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fab-scroll-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab-scroll-top:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
/* When side drawers (chat/notifications) are open, hide the scroll-to-top FAB so it never overlaps the drawer */
body.cp-drawer-open .fab-scroll-top{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

:root[data-theme="light"] .fab-scroll-top{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  color: #0b0b0d;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

/* --- Sesja LIVE: sticky bottom action bar (mobile-first) --- */
.live-action-bar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 1055;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.live-action-actions{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

/* Dokładnie pół na pół na mobile (anchor + form) */
.live-action-actions > *{ flex: 1 1 50%; }

/* Równa wysokość i wyśrodkowanie treści (różne warianty btn-outline vs btn-brand) */
.live-action-actions .btn,
.live-action-actions a.btn{
  width: 100%;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}

@media (min-width: 768px){
  .live-action-bar{ left: 50%; right: auto; width: min(980px, calc(100% - 24px)); transform: translateX(-50%); }
}


@media (max-width: 420px){
  .live-progress-label{ display:none; }
  .live-progress-sub{ font-size: 10px; }
}

.live-progress{ display:flex; flex-direction:column; gap: 4px; }
.live-progress-top{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.live-progress-label{ font-size: 11px; opacity: .78; }
.live-progress-value{ font-size: 11px; font-weight: 950; letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.live-progress-sub{ display:flex; justify-content:space-between; align-items:center; gap: 10px; font-size: 11px; opacity: .78; }
.live-progress-next{ color: var(--brand); text-decoration: none; font-weight: 950; white-space: nowrap; }
.live-progress-next:active{ transform: translateY(1px); }

.progress.progress-brand{
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
}
.progress.progress-brand .progress-bar{
  border-radius: 999px;
  background: linear-gradient(90deg, var(--progress), var(--progress2));
}
:root[data-theme="light"] .progress.progress-brand{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.08);
}

/* Desktop: sticky progress card (right column) */
.session-progress-inline{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
:root[data-theme="light"] .session-progress-inline{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.session-progress-card{ position: sticky; top: 92px; }

/* --- LIVE: Rest timer (between sets) --- */
.rest-timer-pill{
  position: fixed;
  left: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 1062;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rest-timer-pill.is-ready{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Place above the LIVE action bar when present */
.has-action-bar .rest-timer-pill{ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 18px); }

/* Compact when action bar is visible */
.has-action-bar .rest-timer-pill{ padding: 6px 8px; gap: 6px; }
.has-action-bar .rest-timer-sub{ display:none; }
.has-action-bar .rest-timer-toggle{ padding: 4px 10px; }


/* Desktop (mouse/trackpad): keep timer on the right.
   Leave it on the left for touch tablets (iPad) to avoid clashing with the scroll-to-top button. */
@media (min-width: 992px) and (pointer: fine){
  body:not(.has-action-bar) .rest-timer-pill{
    left: auto;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); /* sits above the scroll-to-top FAB */
  }
  body.has-action-bar .rest-timer-pill{
    left: auto;
    right: 16px;
  }
}

body.set-sheet-open .rest-timer-pill,
body.timer-sheet-open .rest-timer-pill{ opacity: 0; pointer-events:none; transform: translateY(10px); }

.rest-timer-open{
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  text-align: left;
}
.rest-timer-ic{ font-size: 16px; opacity: .9; }
.rest-timer-time{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.rest-timer-sub{ font-size: 12px; opacity: .72; white-space: nowrap; }
.rest-timer-pill .btn.rest-timer-toggle{
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight: 900;
  min-height: 32px;
}

:root[data-theme="light"] .rest-timer-pill{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  color: #0b0b0d;
}

/* Bottom-sheet for timer (mobile-first) */
.timer-sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 1063;
  opacity: 0;
  transition: opacity .18s ease;
}
.timer-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 1064;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 10px;
  max-height: calc(100svh - env(safe-area-inset-bottom, 0px) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(12px);
  transition: transform .18s ease, opacity .18s ease;
}
.timer-sheet[hidden],
.timer-sheet-backdrop[hidden]{ display: none !important; }
.timer-sheet.is-open{ opacity: 1; transform: translateY(0); }
.timer-sheet-backdrop.is-open{ opacity: 1; }

body.timer-sheet-open .live-action-bar{ opacity: 0; pointer-events: none; transform: translateY(10px); }

:root[data-theme="light"] .timer-sheet{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}

.timer-sheet-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 2px auto 10px;
}
:root[data-theme="light"] .timer-sheet-handle{ background: rgba(0,0,0,.12); }

.timer-sheet-header{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.timer-sheet-heading{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.timer-sheet-title{ font-weight: 950; font-size: 18px; line-height: 1.15; }
.timer-sheet-sub{ font-size: 12px; opacity: .78; }

.timer-big{
  font-size: 44px;
  font-weight: 950;
  letter-spacing: .5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 6px;
}

.timer-quick{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.timer-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 992px){
  /* On desktop, timer is still useful but avoid the bottom-sheet; keep it functional (sheet will still work) */
}

/* --- LIVE: bottom-sheet control panel for adding sets (premium mobile UX) --- */
.set-sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 1065;
  opacity: 0;
  transition: opacity .18s ease;
}
.set-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  /* When open, the action bar is hidden, so the sheet can sit near the bottom safely */
  /* var(--cp-kb) is dynamically set (visualViewport) to lift the sheet above the on-screen keyboard */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + var(--cp-kb, 0px));
  z-index: 1066;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 10px;
  /* Use dynamic viewport units for iOS Safari toolbars.
     svh is a safer fallback when the keyboard/toolbars are involved. */
  max-height: calc(100svh - env(safe-area-inset-bottom, 0px) - 24px - var(--cp-kb, 0px));
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 24px - var(--cp-kb, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: transform .18s ease, opacity .18s ease;
}

/* Scroll only inside the sheet body, keep actions visible */
.set-sheet-form{ display:flex; flex-direction:column; gap: 0; min-height: 0; }
.set-sheet-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Avoid artificial empty space; the footer is sticky so we only need a small pad. */
  padding-bottom: 12px;
  scroll-padding-bottom: 120px; /* helps focused inputs scroll above sticky actions */
}
.set-sheet-actions{
  position: sticky;
  bottom: 0;
  /* iOS: keep actions always visible above the home indicator */
  padding-top: 10px;
  /* Sheet itself is lifted by --cp-kb, so don't add keyboard padding here (prevents big empty gaps). */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px);
}

/* While the sheet is open, hide the fixed action bar to avoid overlap on short viewports (tablet/landscape) */
body.set-sheet-open .live-action-bar{ opacity: 0; pointer-events: none; transform: translateY(10px); }

/* Landscape/tablet: slightly tighter margins */
@media (orientation: landscape) and (max-height: 520px){
  .set-sheet{ left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px + var(--cp-kb, 0px)); max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 16px - var(--cp-kb, 0px)); }
}

/* Open state (we still toggle the [hidden] attribute in JS for accessibility) */
.set-sheet.is-open{ opacity: 1; transform: translateY(0); }
.set-sheet-backdrop.is-open{ opacity: 1; }

/* Ensure hidden truly hides (some browsers keep transitions alive otherwise) */
.set-sheet[hidden],
.set-sheet-backdrop[hidden]{ display: none !important; }
:root[data-theme="light"] .set-sheet{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
:root[data-theme="light"] .set-sheet-actions{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
:root[data-theme="light"] .set-sheet-actions{ background: rgba(255,255,255,.96); }
.set-sheet-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 2px auto 10px;
}
:root[data-theme="light"] .set-sheet-handle{ background: rgba(0,0,0,.12); }

.set-sheet-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.set-sheet-heading{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

.set-sheet-close{ margin-left: auto; }
.set-sheet-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.set-sheet-sub{
  font-size: 12px;
  opacity: .78;
  white-space: nowrap;
}

/* LIVE: bottom-sheet set entry (mobile) - 3-column steppers with stacked fields */
.set-sheet-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.set-sheet-row{
  display: grid;
  /* Wider steppers so labels like +2,5 / +1 stay readable (mobile-first) */
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 10px;
  align-items: end;
}
.set-sheet-mid{
  min-width: 0;
}
.set-sheet-row .set-sheet-input{
  width: 100%;
}
.set-sheet-row .btn-stepper{
  /* Bigger tap targets for a more "native" feel */
  min-height: 66px;
  border-radius: 18px;
  padding: 12px 0;
  font-size: 18px;
  letter-spacing: .01em;
  touch-action: manipulation;
}

/* Premium press/hold feedback */
.btn-stepper.cp-holding{
  transform: translateY(1px) scale(.985);
  filter: brightness(1.06);
}

.set-sheet-hint{
  font-size: 12px;
  opacity: .72;
  text-align: center;
  margin-top: 8px;
}
@media (max-width: 360px){
  .set-sheet-row{ grid-template-columns: 64px minmax(0,1fr) 64px; }
}

.set-sheet-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.set-sheet-col{ min-width: 0; }
.set-sheet-label{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}
.set-sheet-input{
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  border-radius: 16px;
}
.set-sheet-tip{
  opacity: .72;
  line-height: 1.25;
}
.set-sheet-stepper{ display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.set-sheet-stepper .btn-stepper{ min-height: 44px; }

.set-sheet-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.set-sheet-actions .btn{ border-radius: 18px; }

.set-sheet.is-open{ opacity: 1; transform: translateY(0); }

/* Desktop inline steppers */
.desktop-stepper{
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-stepper-lg{
  flex: 1;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
}
@media (min-width: 1200px){
  .btn-stepper-lg{ font-size: 16px; }
}

/* extra small screens: 2 columns to keep it tight */
@media (max-width: 360px){
  .set-sheet-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hide sheet on larger desktop only (allow tablets/iPad to use the more ergonomic bottom-sheet) */
@media (min-width: 1200px){
  html:not(.cp-touch) .set-sheet, html:not(.cp-touch) .set-sheet-backdrop{ display:none !important; }
}

/* Fallback for touch devices: keep bottom-sheet even if cp-touch class isn't present */
@media (min-width: 992px) and (pointer: coarse){
  .set-sheet, .set-sheet-backdrop{ display: block !important; }
}

/* Touch devices (iPad/tablet) should keep the bottom-sheet controls even on wide viewports */
@media (min-width: 1200px){
  html.cp-touch .cp-touch-show-xl{ display: grid !important; }
  html.cp-touch .cp-touch-hide-xl{ display: none !important; }
}

.live-action-actions form{flex:1; margin:0;}
.live-action-actions .btn{
  flex: 1;
  border-radius: 999px;
  padding: .55rem .9rem;
}

/* LIVE bottom action bar (mobile): keep both buttons perfectly equal */
.live-action-actions .btn,
.live-action-actions a.btn{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
:root[data-theme="light"] .live-action-bar{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
@media (min-width: 1200px){
  html:not(.cp-touch) .live-action-bar{ display:none; }
}

/* Fallback for touch devices: keep LIVE action bar visible even if cp-touch class isn't present */
@media (min-width: 992px) and (pointer: coarse){
  .live-action-bar{ display: flex !important; }
}

/* Fallback for touch devices: always show LIVE bottom bar on tablets/iPad */
@media (min-width: 992px) and (pointer: coarse){
  .live-action-bar{ display: flex !important; }
}

/* Prevent background scroll when modals/bottom-sheets are open */
body.no-scroll{ overflow: hidden; }

/* Make room for sticky bar (only when present) */
.has-action-bar main.container{
  /* Make room for sticky LIVE bar (exact height is measured in JS and stored in --actionbar-h) */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 26px) !important;
}

/* Keep cookie notice above action bar when both are visible */
.has-action-bar .cookie-notice{
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 18px);
}

/* Scroll button sits above action bar on LIVE pages */
.has-action-bar .fab-scroll-top{
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 18px);
}

/* --- LIVE: mobile cards + szybkie uzupełnianie serii z planu --- */
.set-log-card{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  margin-bottom: 10px;
}
:root[data-theme="light"] .set-log-card{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.set-log-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 420px){
  .set-log-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


.set-log-row .badge{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 10px;
}

/* LIVE: compact one-badge set summary (premium, less clutter on mobile) */
.set-log-line{
  display: block;
}
.set-log-badge{
  display: block;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* LIVE: mobile table for completed sets (compact + readable) */
.table-mobile-sets th,
.table-mobile-sets td{
  padding: 10px 10px;
  white-space: nowrap;
}
.table-mobile-sets thead th{
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.table-mobile-sets tbody td{
  font-size: .92rem;
}
.table-mobile-sets .col-set{ width: 40px; }
.table-mobile-sets .col-mode{ width: 62px; }
.table-mobile-sets .col-reps{ width: 90px; }
.table-mobile-sets .col-kg{ width: 84px; }
.table-mobile-sets .col-rir{ width: 58px; }
.table-mobile-sets .col-vol{ width: 70px; }
.table-mobile-sets .col-act{ width: 44px; }

/* Small “X” button for table rows */
.btn-xs{
  padding: 2px 8px;
  font-size: .80rem;
  line-height: 1.35;
  border-radius: 10px;
}

/* Light theme: make table headers/body readable */
:root[data-theme="light"] .table-mobile-sets thead th{
  color: rgba(0,0,0,.62);
}
:root[data-theme="light"] .table-mobile-sets tbody td{
  color: rgba(0,0,0,.88);
}

/* LIVE: prevent “stuck pressed” look on iOS buttons (focus/active) */
.js-step,
.js-open-set-sheet,
.set-sheet button{
  -webkit-tap-highlight-color: transparent;
}
.js-step:focus,
.js-step:active,
.js-open-set-sheet:focus,
.js-open-set-sheet:active,
.set-sheet button:focus,
.set-sheet button:active{
  outline: none !important;
  box-shadow: none !important;
}

/* Short press feedback that always resets (used by JS to avoid iOS stuck :active) */
.cp-pressed{
  transform: translateY(1px);
  filter: brightness(1.08);
}

.set-log-badge::-webkit-scrollbar{ display:none; }

/* Light theme: keep set summaries readable */
:root[data-theme="light"] .set-log-badge{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.86);
}

/* Desktop inline add-set form (LIVE) */
.desktop-set-form .desktop-mode-time{ display:none; }
.desktop-set-form.mode-time .desktop-mode-time{ display:block; }
.desktop-set-form.mode-time .desktop-mode-reps{ display:none; }

/* LIVE: keep the desktop inline "Dodaj serię" form out of the way on smaller screens.
   Mobile uses the bottom-sheet controls; if CSS fails to load, the form remains as a functional fallback. */
@media (max-width: 991.98px){
  .desktop-set-form-wrap{ display:none; }
}

/* LIVE: premium steppers (mobile-first) */
.live-stepper{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.btn-stepper{
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.btn-stepper:focus,
.btn-stepper:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.btn-stepper:active{
  transform: translateY(1px);
}

/* If a browser keeps a persistent active/focus look, the JS toggles this class briefly. */
.btn-stepper.cp-pressed{
  transform: translateY(1px);
  filter: brightness(1.08);
}

/* Long-press feedback (auto-repeat steppers) */
.btn-stepper.cp-holding{
  transform: translateY(1px) scale(.99);
  filter: brightness(1.12);
}

@media (hover: none){
  /* iOS Safari potrafi "przyklejać" :active – na dotykowych wyłączamy i zostawiamy feedback z JS (.cp-pressed) */
  .btn-stepper:active{ transform: none !important; }
}


.btn-stepper-plus{
  border-color: rgba(255,123,0,.55);
  background: linear-gradient(180deg, rgba(255,123,0,.26), rgba(255,123,0,.14));
  color: #fff;
}
.btn-stepper-minus{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
}


/* Stepper label colors (theme-aware)
   Light theme: black text for readability on bright buttons.
   Dark theme: white text for consistent contrast.
*/
.btn-stepper,
.btn-stepper-plus,
.btn-stepper-minus{
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
html[data-theme="light"] .btn-stepper,
html[data-theme="light"] .btn-stepper-plus,
html[data-theme="light"] .btn-stepper-minus{
  color: #0B0B0D !important;
}
html[data-theme="dark"] .btn-stepper,
html[data-theme="dark"] .btn-stepper-plus,
html[data-theme="dark"] .btn-stepper-minus{
  color: rgba(255,255,255,.92) !important;
}

/* LIVE: compact labels & tighter vertical rhythm inside quick-add panel */
.js-set-form .form-label-compact{
  margin-bottom: 4px;
}
.js-set-form .form-control,
.js-set-form .form-select{
  min-height: 44px;
}

/* Very small screens: avoid cramped 3-up; fall back to 2-up */
@media (max-width: 360px){
  .js-set-form .live-col{ flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 420px){
  .btn-stepper{ font-size: 18px; }
}
.bulk-sets{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}
:root[data-theme="light"] .bulk-sets{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.01);
}
.bulk-sets-summary{
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}
.bulk-sets-summary::-webkit-details-marker{ display:none; }

.bulk-tools{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .bulk-tools{ grid-template-columns: 1fr 1fr; }
}

.bulk-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .bulk-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px){
  .bulk-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.set-entry-card{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
:root[data-theme="light"] .set-entry-card{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
}

.set-entry-head{ display:flex; align-items:center; justify-content:space-between; }
.set-entry-title{ display:flex; flex-wrap:wrap; align-items:center; }

.set-entry-inputs{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.set-entry-inputs[data-mode="time"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }

.input-compact{
  min-height: 44px;
  padding: .55rem .75rem;
  border-radius: 14px;
}

.set-entry-note summary{ cursor: pointer; list-style: none; }
.set-entry-note summary::-webkit-details-marker{ display:none; }

/* --- Plan item form: mobile-friendly segmented controls --- */
.plan-item-form .btn-group{ width: 100%; }
.plan-item-form .btn-group .btn{ flex: 1; }

/* --- Accordion brand (dark/light) --- */
.accordion-brand{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
:root[data-theme="light"] .accordion-brand{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.01);
}
.accordion-brand .accordion-button{
  background: transparent;
  color: inherit;
  font-weight: 800;
  border-radius: 16px;
}
.accordion-brand .accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(255,106,31,.18);
  border-color: rgba(255,106,31,.35);
}
.accordion-brand .accordion-body{ padding-top: 10px; }

/* FAQ (accordion) - premium readable styling */
.accordion-brand .accordion-item{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
}
.accordion-brand .accordion-item:last-child{ margin-bottom: 0; }
.accordion-brand .accordion-button{
  padding: 16px 18px;
  background: transparent;
}
.accordion-brand .accordion-button:not(.collapsed){
  background: rgba(255,140,0,.10);
  color: inherit;
}
.accordion-brand .accordion-collapse{
  background: rgba(0,0,0,.10);
}
.accordion-brand .accordion-body{
  color: var(--text-85);
}
.accordion-brand .accordion-button::after{
  filter: invert(1);
  opacity: .85;
}
:root[data-theme="light"] .accordion-brand .accordion-item{
  background: rgba(255,255,255,.86);
  border-color: rgba(0,0,0,.10);
}
:root[data-theme="light"] .accordion-brand .accordion-collapse{
  background: rgba(255,255,255,.92);
}
:root[data-theme="light"] .accordion-brand .accordion-button::after{
  filter: none;
}


/* Dark theme: FAQ readability (force contrast in accordion) */
:root[data-theme="dark"] .accordion-brand .accordion-item{
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.12);
}
:root[data-theme="dark"] .accordion-brand .accordion-button{
  color: rgba(255,255,255,.92) !important;
}
:root[data-theme="dark"] .accordion-brand .accordion-button.collapsed{
  background: rgba(255,255,255,.02);
}
:root[data-theme="dark"] .accordion-brand .accordion-button:hover{
  background: rgba(255,255,255,.04);
}
:root[data-theme="dark"] .accordion-brand .accordion-button:not(.collapsed){
  background: rgba(255,106,31,.16);
  color: rgba(255,255,255,.96) !important;
}
:root[data-theme="dark"] .accordion-brand .accordion-collapse{
  background: rgba(0,0,0,.20);
}
:root[data-theme="dark"] .accordion-brand .accordion-body{
  color: rgba(255,255,255,.80);
}



/* =========================
   Switches (Bootstrap form-switch)
   ========================= */

/* Make all ON states use brand orange instead of bootstrap blue */
.form-switch .form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Focus ring in brand orange (avoid blue glow on mobile) */
.form-switch .form-check-input:focus{
  border-color: rgba(255,106,31,.75);
  box-shadow: 0 0 0 .25rem rgba(255,106,31,.25);
}

/* Keep a subtle ring also when checked + focused */
.form-switch .form-check-input:checked:focus{
  box-shadow: 0 0 0 .25rem rgba(255,106,31,.28);
}

/* =========================
   Report ready (PDF) – mobile friendly actions
   ========================= */

.report-ready-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-top: .25rem;
}

@media (min-width: 420px){
  .report-ready-actions{
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px){
  .report-ready-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

.report-ready-actions .btn{
  width: 100%;
}

/* =========================
   Small toast notifications
   ========================= */

.coachpro-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(14, 14, 16, .92);
  color: #fff;
  font-size: 14px;
  max-width: 92vw;
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
  z-index: 3000;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.coachpro-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.has-action-bar .coachpro-toast{
  bottom: 104px;
}

/* =========================
   PDF preview modal (mobile/PWA)
   ========================= */

.report-ready-page{max-width:760px;margin:0 auto;}
.report-ready-card{padding:18px;}

/* Lock background scroll when preview open */
.pdf-preview-open{overflow:hidden;}

.pdf-preview-modal{
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0,0,0,.58);
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pdf-preview-sheet{
  width: 100%;
  max-width: 980px;
  height: calc(100vh - 24px);
  background: rgba(18, 18, 22, .98);
  color: rgba(242,242,243,0.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

.pdf-preview-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}


.pdf-preview-sheet .text-muted{ color: var(--muted) !important; }
.pdf-preview-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.pdf-preview-close{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  width: 40px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Light theme: make the sheet clearly visible (white surface + dark text) */
html[data-theme="light"] .pdf-preview-sheet{
  background: rgba(255,255,255,0.98);
  color: rgba(11,11,13,0.92);
  border: 1px solid rgba(11,11,13,0.10);
  box-shadow: 0 24px 70px rgba(11,11,13,0.20);
}
html[data-theme="light"] .pdf-preview-header{
  border-bottom: 1px solid rgba(11,11,13,0.10);
  background: linear-gradient(180deg, rgba(11,11,13,.03), rgba(11,11,13,0));
}
html[data-theme="light"] .pdf-preview-close{
  background: rgba(11,11,13,.06);
  border: 1px solid rgba(11,11,13,.12);
  color: rgba(11,11,13,0.90);
}

.pdf-preview-close:active{
  transform: translateY(1px);
}

.pdf-preview-frame{
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

@media (min-width: 992px){
  .pdf-preview-modal{align-items: center;}
  .pdf-preview-sheet{height: calc(100vh - 60px);}
}


/* Wider desktop containers (restored Bootstrap defaults) */

/* Client detail: don't reserve empty space under the list when it is short.
   Enable scroll only when the list is long (template adds .is-scroll). */
#client-history-card .trainings-list-client{
  max-height: none;
  overflow: visible;
}

#client-history-card .trainings-list-client.is-scroll{
  overflow: auto;
  max-height: 520px;
}

@media (min-width: 992px){
  #client-history-card .trainings-list-client.is-scroll{
    /* scale with viewport, but never explode the layout */
    max-height: clamp(280px, 45vh, 520px);
  }
}

@media (max-width: 576px){
  #client-history-card .trainings-list-client.is-scroll{ max-height: 360px; }
}


/* Mobile preview - brand mark under CTA */
.mobile-preview-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.mobile-preview-brand .brandmark{
  display:block;
  height:34px;
  width:auto;
  max-width:360px;
  opacity:.92;
}
html[data-theme="dark"] .mobile-preview-brand .brandmark-light{ display:none; }
html[data-theme="light"] .mobile-preview-brand .brandmark-dark{ display:none; }

@media (max-width: 576px){
  .mobile-preview-brand .brandmark{
    height:30px;
    max-width:280px;
  }
}


/* =========================
   /me – premium header (hero)
   ========================= */
.me-hero{
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
}
@media (min-width: 768px){
  .me-hero{ padding: 18px 20px; }
}
.me-hero::before{
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(800px 260px at 0% 0%, rgba(255,106,31,0.26), transparent 62%),
    radial-gradient(700px 240px at 100% 0%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}
html[data-theme="light"] .me-hero::before{
  background:
    radial-gradient(800px 260px at 0% 0%, rgba(255,106,31,0.18), transparent 62%),
    radial-gradient(700px 240px at 100% 0%, rgba(11,11,13,0.06), transparent 60%);
}
.me-hero > *{ position: relative; z-index: 1; }
.me-hero-title{ font-weight: 900; letter-spacing: 0.2px; }
.me-hero-logo-wrap{
  /* Premium brand badge (trainer logo) */
  --logo-size: 88px;
  width: var(--logo-size);
  height: var(--logo-size);
  aspect-ratio: 1 / 1;      /* safety: never stretch into a "pill" on mobile */
  flex: 0 0 auto;           /* prevent flex stretching */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,106,31,0.92), rgba(255,255,255,0.16));
  box-shadow: 0 16px 34px rgba(0,0,0,0.18);
  transition: transform 140ms ease, box-shadow 140ms ease;
  overflow: hidden;
}
.me-hero-logo-wrap:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.22);
}

.me-hero-logo{
  width: 100%;
  height: 100%;
  display: block;           /* avoid iOS inline-image baseline quirks */
  object-fit: contain;      /* keep trainer logo readable */
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  padding: 8px;            /* less padding so logo isn't tiny */
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .me-hero-logo-wrap{
  background: linear-gradient(135deg, rgba(255,106,31,0.86), rgba(11,11,13,0.08));
  box-shadow: 0 14px 30px rgba(11,11,13,0.14);
}
html[data-theme="light"] .me-hero-logo{
  background: rgba(11,11,13,.04);
  border: 1px solid rgba(11,11,13,.12);
}

/* Mobile: cleaner, less "heavy", always square */
@media (max-width: 576px){
  .me-hero-logo-wrap{
    --logo-size: 86px;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  }
  .me-hero-logo{
    border-radius: 16px;
    padding: 8px;
  }
}

@media (min-width: 768px){
  .me-hero-logo-wrap{ --logo-size: 112px; border-radius: 26px; }
  .me-hero-logo{ border-radius: 24px; padding: 10px; }
}



/* ===== /me (panel klienta) layout – premium & czytelny (desktop + mobile) ===== */
.me-dashboard-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ===== /me (panel klienta) – podsumowanie + KPI ===== */
.me-atglance{
  position: relative;
  overflow: hidden;
}
.me-atglance::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(255,106,31,0.18), transparent 60%),
    radial-gradient(700px 240px at 100% 0%, rgba(255,255,255,0.07), transparent 60%);
  pointer-events:none;
  filter: blur(0.2px);
}

.me-kpi-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 576px){
  .me-kpi-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px){
  .me-kpi-grid{ grid-template-columns: repeat(4, 1fr); }
}

.me-kpi-tile{
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
html[data-theme="light"] .me-kpi-tile{
  background: rgba(11,11,13,0.03);
}

.me-kpi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}

.me-kpi-label{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.me-kpi-chip{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  white-space: nowrap;
}

.me-kpi-value{
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
}

.me-kpi-sub{
  font-size: 12px;
  margin-top: 6px;
}

.me-delta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  vertical-align: middle;
}
.me-delta.is-up{
  border-color: rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.10);
}
.me-delta.is-down{
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.10);
}

.me-quickactions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.me-quickactions .btn{
  border-radius: 14px;
}

.me-activity{
  display:flex;
  gap: 6px;
  margin-top: 10px;
}
.me-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  opacity: 0.55;
}
.me-dot.is-on{
  opacity: 1;
  border-color: rgba(255,106,31,0.55);
  background: rgba(255,106,31,0.25);
}





/* Light theme: make /me weekly activity dots more readable (premium contrast) */
html[data-theme="light"] .me-dot{
  background: rgba(11,11,13,0.12);
  border-color: rgba(11,11,13,0.22);
  opacity: 0.75;
}
html[data-theme="light"] .me-dot.is-on{
  border-color: rgba(255,106,31,0.85);
  background: rgba(255,106,31,0.45);
  box-shadow: 0 0 0 2px rgba(255,106,31,0.18);
}
.me-inner-panel{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

html[data-theme="light"] .me-inner-panel{
  background: rgba(11,11,13,0.03);
}

/* ===== /me (panel klienta) – premium calendar ===== */
.me-cal-header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Trainer calendar – toolbar layout (month controls LEFT, actions RIGHT) */
.tr-cal-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tr-cal-toolbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.tr-cal-toolbar-right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}

/* Override /me behaviour (it pushes nav to the right). In trainer calendar we keep it on the left. */
.tr-cal-nav{
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

/* allow title block to take space so controls can sit flush right */
.me-cal-header .min-w-0{ flex: 1 1 auto; }

.me-cal-nav{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}

@media (min-width: 992px){
  .me-cal-nav{ flex-wrap: nowrap; }
}

.me-cal-month{
  font-weight: 850;
  letter-spacing: 0.2px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
}
html[data-theme="light"] .me-cal-month{
  background: rgba(11,11,13,0.03);
}

.me-cal-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 992px){
  .me-cal-wrap{ grid-template-columns: 1fr 0.55fr; }
}

.me-cal{
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
html[data-theme="light"] .me-cal{
  background: rgba(11,11,13,0.02);
}

.me-cal-weekdays{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.me-cal-weekdays > div{ min-width:0; overflow:hidden; text-overflow: ellipsis; }
html[data-theme="light"] .me-cal-weekdays{
  background: rgba(11,11,13,0.02);
}

.me-cal-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 10px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.me-cal-cell{
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 16px;
  padding: 10px 8px;
  min-height: 60px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  min-width: 0;

  /* New layout: keep number + markers aligned (no confusing corner numbers) */
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}

.me-cal-topline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 6px;
}
.me-cal-cell.is-empty{
  border-color: transparent;
  background: transparent;
  cursor: default;
  min-height: 56px;
}

.me-cal-cell:hover{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
html[data-theme="light"] .me-cal-cell:hover{
  background: rgba(11,11,13,0.04);
  border-color: rgba(11,11,13,0.08);
}

/* Make training days obvious (not only tiny dots) */
.me-cal-cell.has-sessions{
  background: rgba(255,106,31,0.06);
  border-color: rgba(255,106,31,0.18);
}
html[data-theme="light"] .me-cal-cell.has-sessions{
  background: rgba(255,106,31,0.07);
  border-color: rgba(11,11,13,0.10);
}

/* If a day has an active (LIVE) session, tint it in a distinct iOS-like blue */
.me-cal-cell.has-active:not(.has-finished){
  background: rgba(96,165,250,0.06);
  border-color: rgba(96,165,250,0.18);
}
html[data-theme="light"] .me-cal-cell.has-active:not(.has-finished){
  background: rgba(96,165,250,0.07);
  border-color: rgba(11,11,13,0.10);
}

/* If both finished + active exist, use a subtle mixed tint */
.me-cal-cell.has-active.has-finished{
  background: linear-gradient(135deg, rgba(255,106,31,0.07), rgba(96,165,250,0.05));
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="light"] .me-cal-cell.has-active.has-finished{
  background: linear-gradient(135deg, rgba(255,106,31,0.08), rgba(96,165,250,0.06));
  border-color: rgba(11,11,13,0.10);
}

.me-cal-daynum{
  font-weight: 850;
  font-size: 13px;
  line-height: 1;
}

.me-cal-badge{
  /* Not in the corner anymore -> easier to spot training days */
  position: static;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .me-cal-badge{
  background: rgba(11,11,13,0.04);
}

/* Native-like month view: compact "event chips" inside a day cell (similar to iOS/Android) */
.me-cal-chips{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.me-cal-chip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 6px;
  font-size: 10px;
  font-weight: 850;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="light"] .me-cal-chip{
  background: rgba(11,11,13,0.04);
}
.me-cal-chip.is-finished{ border-color: rgba(255,106,31,0.55); background: rgba(255,106,31,0.14); color: rgba(255,106,31,0.95); }
.me-cal-chip.is-active{ border-color: rgba(96,165,250,0.70); background: rgba(96,165,250,0.12); color: rgba(96,165,250,0.98); }
.me-cal-chip.is-requested{ border-color: rgba(251,191,36,0.70); background: rgba(251,191,36,0.12); color: rgba(251,191,36,0.98); }
.me-cal-chip.is-scheduled{ border-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.12); color: rgba(168, 85, 247, 0.98); }
.me-cal-chip.is-confirmed{ border-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.14); color: rgba(168, 85, 247, 0.98); }
.me-cal-chip.is-cancelled{ border-color: rgba(148,163,184,0.70); background: rgba(148,163,184,0.10); color: rgba(148,163,184,0.98); }
.me-cal-chip.is-availability{ border-color: rgba(45,212,191,0.75); background: rgba(45,212,191,0.12); color: rgba(45,212,191,0.98); }
.me-cal-chip.is-unavailable{ border-color: rgba(239,68,68,0.65); background: rgba(239,68,68,0.12); color: rgba(239,68,68,0.98); }
.me-cal-chip.is-more{ border-style: dashed; opacity: 0.9; }

.me-cal-dots{
  position: static;
  display:flex;
  gap: 6px;
  align-items: center;
}

.me-cal-more{
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  line-height: 1;
}

.me-cal-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
}
.me-cal-dot.is-finished{
  border-color: rgba(255,106,31,0.60);
  background: rgba(255,106,31,0.32);
}
.me-cal-dot.is-active{
  border-color: rgba(96,165,250,0.70);
  background: rgba(96,165,250,0.18);
}

/* Calendar planning statuses (TrainingEvent) */
.me-cal-dot.is-requested{
  border-color: rgba(251,191,36,0.70);
  background: rgba(251,191,36,0.22);
}
.me-cal-dot.is-scheduled{
  border-color: rgba(168, 85, 247, 0.60);
  background: rgba(168, 85, 247, 0.22);
}
.me-cal-dot.is-confirmed{
  border-color: rgba(168, 85, 247, 0.60);
  background: rgba(168, 85, 247, 0.22);
}
.me-cal-dot.is-cancelled{
  border-color: rgba(148,163,184,0.70);
  background: rgba(148,163,184,0.18);
}
.me-cal-dot.is-declined{
  border-color: rgba(148,163,184,0.70);
  background: rgba(148,163,184,0.18);
}

/* Availability marker (calendar cells) */
.me-cal-dot.is-availability{
  border-color: rgba(45, 212, 191, 0.75);
  background: rgba(45, 212, 191, 0.22);
}
.me-cal-dot.is-unavailable{
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.22);
}
.me-cal-dot.is-availability-ghost{ opacity: 0.35; }

.me-cal-cell.is-today{
  border-color: rgba(255,106,31,0.45);
  background: rgba(255,106,31,0.10);
}
.me-cal-cell.is-today .me-cal-daynum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,106,31,0.92);
  color: rgba(255,255,255,0.98);
}
.me-cal-cell.is-selected{
  border-color: rgba(255,106,31,0.70);
  box-shadow: 0 0 0 2px rgba(255,106,31,0.12);
  background: rgba(255,106,31,0.12);
}

/* Show neighbor month days (iPhone-like month grid) */
.me-cal-cell.is-outside{
  opacity: 0.45;
}
.me-cal-cell.is-outside:hover{
  opacity: 0.7;
}

/* Compact status indicator (replaces cluttered dots when badges are visible) */
.me-cal-cell::after{
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 4px;
  border-radius: 999px;
  opacity: 0;
  background: rgba(148,163,184,0.24);
  pointer-events: none;
}
.me-cal-cell.is-status-finished::after{ opacity: 1; background: rgba(255,106,31,0.45); }
.me-cal-cell.is-status-active::after{ opacity: 1; background: rgba(96,165,250,0.42); }
.me-cal-cell.is-status-requested::after{ opacity: 1; background: rgba(251,191,36,0.42); }
.me-cal-cell.is-status-scheduled::after{ opacity: 1; background: rgba(168, 85, 247, 0.42); }
.me-cal-cell.is-status-confirmed::after{ opacity: 1; background: rgba(168, 85, 247, 0.42); }
.me-cal-cell.is-status-cancelled::after{ opacity: 1; background: rgba(148,163,184,0.34); }
.me-cal-cell.is-status-availability::after{ opacity: 1; background: rgba(45,212,191,0.40); }
.me-cal-cell.is-status-unavailable::after{ opacity: 1; background: rgba(239,68,68,0.40); }

/* Desktop month view already shows badges inside cells -> hide underline strips */
@media (min-width: 992px){
  .me-cal-cell::after{ content: none !important; }
}

/* Phones: month cells should not look like stacked "lines".
   We rely on the dot indicators + the selected-day panel instead. */
@media (max-width: 520px){
  .me-cal-cell::after{ content: none !important; }
  .me-cal-chips{ display:none !important; }
  /* Re-enable dots on phones (a broader @media (max-width:576px) rule hides them). */
  .me-cal-dots{ display:flex !important; gap: 5px; }
  .me-cal-dot{ width: 8px; height: 8px; }
  .me-cal-more{ font-size: 10px; font-weight: 900; opacity: 0.9; }
}


.me-cal-side{
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}
html[data-theme="light"] .me-cal-side{
  background: rgba(11,11,13,0.02);
}

.me-cal-legend{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.me-cal-legend-item{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}

.me-cal-side-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}
@media (min-width: 992px){
  .me-cal-side-list{ max-height: 520px; }
}

/* Client: request training panel (inline) */
.me-cal-request{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 122, 26, 0.35);
  background: rgba(255, 122, 26, 0.08);
}
html[data-theme="light"] .me-cal-request{
  background: rgba(255, 122, 26, 0.06);
  border-color: rgba(255, 122, 26, 0.32);
}
.me-cal-slots{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

.me-cal-item{
  display:flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
html[data-theme="light"] .me-cal-item{
  background: rgba(11,11,13,0.03);
}

.me-cal-item.me-cal-item-availability{
  border-style: dashed;
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.05);
}
html[data-theme="light"] .me-cal-item.me-cal-item-availability{
  border-color: rgba(45, 212, 191, 0.24);
  background: rgba(45, 212, 191, 0.04);
}

.me-cal-item-title{
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-cal-item-meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

/* Make the main block grow so action buttons sit flush to the right edge */
.me-cal-item-main{
  flex: 1 1 auto;
  min-width: 0;
}
.me-cal-item-actions{
  display:flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.me-cal-action-row{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 576px){
  .me-cal-grid{ gap: 5px; padding: 8px; }
  .me-cal-weekdays{ padding: 9px 8px; }
  .me-cal-cell,
  .me-cal-cell.is-empty{ min-height: 48px; padding: 8px 6px; border-radius: 14px; }
  /* Avoid visual "2×3" merge (badge + day number) on narrow screens */
  .me-cal-topline{ justify-content: space-between; gap: 8px; }
  .me-cal-daynum{ font-size: 14px; }
  .me-cal-badge{ font-size: 10px; padding: 2px 6px; }
  /* Phone-like month view: show chips as slim color bars (labels would clutter on small screens) */
  .me-cal-chips{ gap: 3px; }
  .me-cal-chip{ padding: 0; height: 6px; border-radius: 6px; font-size: 0; border-width: 0; }
  .me-cal-chip.is-more{ height: auto; font-size: 10px; padding: 2px 6px; border-width: 1px; }
  .me-cal-dots{ display:none; }
  .me-cal-cell::after{ left: 8px; right: 8px; bottom: 8px; height: 3px; }
  .me-cal-item{ flex-direction: column; align-items: flex-start; }
  .me-cal-item-actions{ width: 100%; align-items: stretch; }
  .me-cal-action-row{ justify-content: flex-start; }
  .me-cal-item-actions .btn{ flex: 1 1 auto; }
}



/* /me – training history list */
.me-history-filters{
  display:flex;
  align-items:center;
  gap: 10px;
}
@media (max-width: 768px){
  .me-history-filters{ width: 100%; }
  .me-history-filters .btn-group{ width: 100%; }
  .me-history-filters .btn{ flex: 1; }
  .me-history-filters select{ width: 100%; }
}

.me-history-scroll{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  overflow: auto;
  max-height: 52vh;
  -webkit-overflow-scrolling: touch;
}
html[data-theme="light"] .me-history-scroll{
  background: rgba(11,11,13,0.02);
}
@media (max-width: 768px){
  .me-history-scroll{ max-height: 56vh; }
}

.me-history-scroll .list-group-item{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-soft);
  padding: 12px 14px;
}
.me-history-scroll .list-group-item:hover{
  background: var(--hover) !important;
}
.me-history-scroll .list-group-item .text-muted{
  color: var(--muted) !important;
}

.me-history-scroll .btn{ white-space: nowrap; }

@media (max-width: 576px){
  .me-history-scroll .list-group-item{
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .me-history-scroll .list-group-item .d-flex.gap-2{
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
/* ===== /me (panel klienta) – CTA czat z trenerem ===== */

/* ===== Push CTA banner (dashboard + /me) ===== */

.push-cta{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(255,106,31,0.18), transparent 60%),
    radial-gradient(420px 160px at 100% 0%, rgba(255,255,255,0.08), transparent 55%),
    rgba(255,255,255,0.02);
}
html[data-theme="light"] .push-cta{
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(255,106,31,0.12), transparent 60%),
    radial-gradient(420px 160px at 100% 0%, rgba(11,11,13,0.05), transparent 55%),
    rgba(11,11,13,0.02);
}
.push-cta > *{ position: relative; z-index: 1; }
.push-cta::after{
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(700px 240px at 35% 0%, rgba(255,106,31,0.10), transparent 60%);
  pointer-events: none;
  opacity: 0.85;
}
html[data-theme="light"] .push-cta::after{
  background: radial-gradient(700px 240px at 35% 0%, rgba(255,106,31,0.08), transparent 60%);
}

.push-cta-inner{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 16px;
  flex-wrap: wrap;
}

.push-cta-left{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-width: 240px;
  flex: 1 1 auto;
}

.push-cta-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,106,31,0.16);
  border: 1px solid rgba(255,106,31,0.25);
  flex: 0 0 auto;
  font-size: 18px;
}

.push-cta-title{
  font-weight: 850;
  letter-spacing: 0.2px;
}

.push-cta-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.push-cta-status,
.push-cta-hint{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.push-cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.push-cta-actions .btn{ border-radius: 999px; }

.push-cta.is-enabled .push-cta-ico{
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.25);
}

.push-cta.is-hidden{ display:none !important; }

@media (max-width: 576px){
  .push-cta-actions{ width: 100%; }
  .push-cta-actions .btn{ width: 100%; }
}

.me-card-chatcta{
  position: relative;
  overflow: hidden;
}
.me-card-chatcta::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 180px at 10% 20%, rgba(255,106,31,0.22), transparent 60%),
    radial-gradient(420px 160px at 90% 0%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}
html[data-theme="light"] .me-card-chatcta::before{
  background:
    radial-gradient(520px 180px at 10% 20%, rgba(255,106,31,0.16), transparent 60%),
    radial-gradient(420px 160px at 90% 0%, rgba(11,11,13,0.06), transparent 55%);
}
.me-card-chatcta > *{ position: relative; z-index: 1; }
.me-chatcta-btn{ white-space: nowrap; }

@media (max-width: 576px){
  .me-chatcta-btn{ width: 100%; }
}


/* Desktop: układ 2-kolumnowy + raporty i wykresy na pełną szerokość */
@media (min-width: 992px){
  .me-dashboard-grid{
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
      "data measures"
      "plan measures"
      "live measures"
      "history history"
      "progress progress"
      "chatcta chatcta";
    align-items: start;
  }
  .me-card-data{ grid-area: data; }
  .me-card-live{ grid-area: live; }
  .me-card-plan{ grid-area: plan; }
  .me-card-history{ grid-area: history; }
  .me-card-measures{ grid-area: measures; }
  .me-card-progress{ grid-area: progress; }
  .me-card-chatcta{ grid-area: chatcta; }

  /* Dłuższa historia treningów i stabilny scroll w karcie */
  #me-history-card .trainings-list-client{ max-height: 620px; }
  #me-history-card .trainings-list-fill{
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Czytelniejsze tabele obwodów – zawijanie i maks. 2 linie */
.obwody-cell{
  white-space: normal !important;
  max-width: 320px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Delikatnie większe „kafelki” raportów na desktopie */
@media (min-width: 992px){
  .training-open{ padding: 12px 14px; border-radius: 18px; }
  .training-left{ min-width: 72px; }
  .training-meta{ font-size: 0.82rem; }
}

/* ===== /me (panel klienta) mobile tweaks ===== */
@media (max-width: 576px){
  /* On mobile we hide the separate 'Waga' subsection – weight is entered inside body measurements */
  .me-weight-block{ display:none !important; }
}

/* ===== BOOTSTRAP MODALS (stacking + mobile) ===== */
body.modal-open{ overflow:hidden!important; }
/* When a modal is open, let the backdrop cover the sticky navbar too */
body.modal-open .nav-brand{ z-index: 1040 !important; }
/* Ensure correct stacking between modal and backdrop */
.modal{ z-index: 2005; }
.modal-backdrop{ z-index: 2000; }

/* Inputs in light theme */
body.light input{ background:#f6f6f6; color:#111; }




/* --- LIVE mobile UX: prevent iOS double-tap zoom + sticky pressed states --- */
.cp-no-zoom .btn,
.cp-no-zoom button,
.cp-no-zoom .btn-stepper{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

@media (hover: none) and (pointer: coarse){
  /* iOS Safari potrafi zostawiać "sticky hover" po tapnięciu (wygląda jak wciśnięty przycisk).
     Dla stepperów neutralizujemy :hover/:active/:focus i trzymamy stały wygląd. */
  .btn-stepper:hover,
  .btn-stepper:active,
  .btn-stepper:focus,
  .btn-stepper:focus-visible{
    background: rgba(255,255,255,.06) !important;
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
  }
  .btn-stepper-plus:hover,
  .btn-stepper-plus:active,
  .btn-stepper-plus:focus,
  .btn-stepper-plus:focus-visible{
    background: linear-gradient(180deg, rgba(255,123,0,.26), rgba(255,123,0,.14)) !important;
    background-color: transparent !important;
    border-color: rgba(255,123,0,.55) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;
  }
  .btn-stepper-minus:hover,
  .btn-stepper-minus:active,
  .btn-stepper-minus:focus,
  .btn-stepper-minus:focus-visible{
    background: rgba(0,0,0,.18) !important;
    background-color: rgba(0,0,0,.18) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.88) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;
  }
}


/* --- Chat attachments --- */
.chat-image{
  margin-top:.35rem;
  max-width:100%;
  max-height:320px;
  border-radius:.75rem;
  display:block;
}
.chat-attachment-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* --- Chat bubbles --- */
.chat-card{ overflow:hidden; }
.chat-messages{
  max-height: 70vh;
  overflow-y:auto;
  padding: 1rem;
  background: rgba(0,0,0,.10);
}
.chat-row{ display:flex; margin-bottom:.6rem; }
.chat-row.mine{ justify-content:flex-end; }
.chat-row.theirs{ justify-content:flex-start; }

.chat-bubble{
  max-width: min(680px, 92%);
  padding: .65rem .8rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.chat-row.mine .chat-bubble{
  background: rgba(255,125,0,.16);
  border-color: rgba(255,125,0,.25);
}

.chat-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  font-size:.78rem;
  opacity:.88;
  margin-bottom:.25rem;
}
.chat-meta-right{ display:inline-flex; gap:.5rem; align-items:center; }

.chat-text{ white-space:pre-wrap; word-break:break-word; }

/* --- Chat input (pro) --- */
.chat-input{
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.chat-input form{ margin:0; }
.chat-textarea{
  resize: none;
  min-height: 42px;
  max-height: 160px;
  overflow-y: hidden;
  line-height: 1.25;
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}
.chat-input .btn{
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .55rem .85rem;
}
@media (max-width: 420px){
  .chat-input{ padding: .65rem .75rem; }
  .chat-input .btn{ padding: .5rem .75rem; }
  .chat-textarea{ min-height: 40px; }
}


.chat-delete{
  border:0;
  background:transparent;
  padding:0;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease;
  color: rgba(255,255,255,.75);
}
.chat-row:hover .chat-delete{ opacity:1; }

.chat-deleted{
  font-style: italic;
  color: rgba(255,255,255,.65);
}

.chat-image{
  margin-top:.35rem;
  max-width:100%;
  max-height:320px;
  border-radius:.75rem;
  display:block;
}

/* =========================
   Notifications Center
   ========================= */
.notif-page{
  padding-top: 4px;
  padding-bottom: 8px;
}

.notif-subtitle{
  line-height: 1.25;
  max-width: 64ch;
}

.notif-header{
  margin-bottom: 14px;
}

.notif-top-actions .btn{ white-space: nowrap; }

/* Filter chips: horizontal scroll (premium + iPad-friendly) */
.notif-filters{
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.notif-filters::-webkit-scrollbar{ height: 0; }

.notif-chip{
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-weight: 800;
  line-height: 1;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
  user-select: none;
  -webkit-user-select: none;
}
html[data-theme="light"] .notif-chip{
  background: rgba(11,11,13,0.04);
}
.notif-chip:active{ transform: translateY(1px); }

.notif-chip.active{
  border-color: rgba(230,90,26,0.65);
  background: rgba(230,90,26,0.10);
}

.notif-chip-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(230,90,26,0.35);
  background: rgba(230,90,26,0.14);
  color: rgba(255,255,255,0.90);
}
html[data-theme="light"] .notif-chip-count{
  color: rgba(11,11,13,0.82);
}

/* List */
.notif-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-section-title{
  margin-top: 10px;
  margin-bottom: 2px;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .78rem;
}

.notif-item{
  padding: 14px;
}

.notif-item.is-unread{
  border-color: rgba(230,90,26,0.35);
}

.notif-item-inner{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
}

.notif-ico{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(230,90,26,0.14);
  border: 1px solid rgba(230,90,26,0.22);
}

.notif-toprow{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.notif-title{
  font-weight: 900;
  letter-spacing: .01em;
}

.notif-badge{
  padding: 4px 9px;
  font-size: .70rem;
  font-weight: 900;
}

.notif-body{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.notif-meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}

.notif-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(230,90,26,0.12);
}

.notif-actions{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Mobile / iPad portrait: stack actions under content */
@media (max-width: 680px){
  .notif-item-inner{
    grid-template-columns: 40px 1fr;
  }
  .notif-actions{
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 4px;
  }
}

/* Loading skeleton */
.notif-loading{ display:flex; flex-direction:column; gap:12px; }
.notif-skeleton{
  min-height: 86px;
  position: relative;
  overflow: hidden;
}
.notif-skeleton::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  transform: translateX(-100%);
  animation: cp_shimmer 1.05s infinite;
}
html[data-theme="light"] .notif-skeleton::before{
  background: linear-gradient(90deg, rgba(11,11,13,0.00), rgba(11,11,13,0.06), rgba(11,11,13,0.00));
}
@keyframes cp_shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}


/* Guide role toggle (Trainer/Client) – clearer active state */
.guide-role-toggle{
  display: inline-flex;
  padding: 5px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow-soft);
}
html[data-theme="light"] .guide-role-toggle{
  background: rgba(11,11,13,0.04);
  box-shadow: var(--shadow-soft);
}
.guide-role-toggle .btn{
  border-radius: 14px !important;
}
.guide-role-toggle .btn-outline-brand{
  box-shadow: none;
  border-color: transparent;
  background: transparent;
  color: var(--text-85);
  padding: 10px 14px;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine){
  .guide-role-toggle .btn-outline-brand:hover{
    background: rgba(230,90,26,0.10);
    transform: translateY(-1px);
  }
}
.guide-role-toggle .btn-outline-brand.active,
.guide-role-toggle .btn-outline-brand[aria-current="page"]{
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 28px rgba(230,90,26,0.20), 0 10px 25px rgba(0,0,0,0.12);
  transform: none;
  position: relative;
}
.guide-role-toggle .btn-outline-brand.active::after,
.guide-role-toggle .btn-outline-brand[aria-current="page"]::after{
  content: "✓";
  font-weight: 900;
  margin-left: 8px;
  opacity: 0.95;
}
.guide-role-toggle .btn-outline-brand:focus-visible{
  outline: 3px solid rgba(230,90,26,0.35);
  outline-offset: 2px;
}


/* =========================
   Form micro-UX (info icon + collapsible macros)
   ========================= */

.info-details{ position: relative; }
.info-details > summary{ list-style: none; }
.info-details > summary::-webkit-details-marker{ display:none; }
.info-icon{
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--badge-muted-bg);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.info-details[open] .info-icon{
  color: var(--text);
  border-color: rgba(230,90,26,0.45);
  background: var(--hover);
}
.info-popover{
  position: absolute;
  right: 0;
  top: 28px;
  width: min(380px, 90vw);
  max-height: 340px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: var(--shadow-soft);
  z-index: 60;
}

.macro-details{
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--input-bg);
  padding: 10px 12px;
}
.macro-details > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.macro-details > summary::-webkit-details-marker{ display:none; }
.macro-details .macro-chevron{
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: 4px;
  opacity: .9;
}
.macro-details[open] .macro-chevron{ transform: rotate(-135deg); }
.macro-details .macro-body{ margin-top: 10px; }

.macro-pill{
  background: var(--badge-muted-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
}
.macro-pill.is-set{
  color: var(--text);
  border-color: rgba(230,90,26,0.45);
  background: var(--hover);
}

/* =========================
   Quick Start / Onboarding
   ========================= */
.cp-modal-content{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)), var(--surface2);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.cp-modal-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .20rem .55rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .72rem;
  background: rgba(255,122,26,.16);
  border: 1px solid rgba(255,122,26,.35);
  color: var(--brand, #ff7a1a);
}
.cp-step-card{
  display:flex;
  gap: .85rem;
  padding: .9rem .95rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  min-height: 120px;
}
.cp-step-num{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,122,26,.18);
  border: 1px solid rgba(255,122,26,.35);
  color: var(--brand, #ff7a1a);
  flex: 0 0 auto;
}
.cp-step-title{ font-weight: 800; }
.cp-step-desc{ color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.cp-help-fab{
  position: fixed;
  right: auto;
  left: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(20,20,25,.86);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  z-index: 1050; /* above cards, below modal (1055) */
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}

/* Light theme: keep the help FAB consistent (avoid "dark blob" look) */
html[data-theme="light"] .cp-help-fab{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,20,25,.14);
  color: rgba(10,10,12,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.cp-help-fab:hover{ transform: translateY(-1px); }
.cp-onboard-strip{
  border-style: dashed;
  border-color: rgba(255,122,26,.30);
  background: linear-gradient(180deg, rgba(255,122,26,.10), rgba(0,0,0,.10));
}
@media (max-width: 575.98px){
  .cp-help-fab{ left: 12px; right: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: 42px; height: 42px; }
  .fab-scroll-top{ right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: 42px; height: 42px; }
  .cp-step-card{ min-height: auto; }
}

/* Tip bar (LIVE training hint) */
.cp-tipbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: .75rem;
  padding: .85rem .95rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

/* Compact, premium-friendly variant used in Trening LIVE header */
.cp-tipbar.cp-tipbar-compact{ padding: .55rem .75rem; border-radius: 14px; }

/* Use native <details> so the tip can be collapsed (saves vertical space during LIVE) */
.cp-tipbar-details{ width: 100%; }
.cp-tipbar-summary{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  user-select:none;

  min-width:0;
}
.cp-tipbar-summary::-webkit-details-marker{ display:none; }

.cp-tipbar-title{ font-weight: 900; min-width:0; }
.cp-tipbar-meta{
  font-size: .78rem;
  color: var(--muted);
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  white-space: nowrap;
  flex: 0 0 auto;
}

.cp-tipbar-details[open] .cp-tipbar-meta{ color: rgba(255,255,255,.82); border-color: rgba(255,122,26,.35); }

.cp-tipbar-desc{ color: var(--muted); font-size: .90rem; line-height: 1.35; margin-top: .35rem; }

/* Light theme: keep the hint bar subtle (no heavy dark slab) */
html[data-theme="light"] .cp-tipbar{
  background: rgba(0,0,0,.03);
  border-color: rgba(11,11,13,.14);
}

/* Light theme: keep meta pill readable when expanded */
html[data-theme="light"] .cp-tipbar-meta{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.60);
}
html[data-theme="light"] .cp-tipbar-details[open] .cp-tipbar-meta{
  color: rgba(0,0,0,.72);
  border-color: rgba(255,122,26,.45);
  background: rgba(255,122,26,.10);
}
html[data-theme="light"] .cp-tipbar-meta{
  background: rgba(255,255,255,.65);
  border-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.55);
}

/* LIVE header compact meta form (date + note) */
.session-meta-compact .form-label{ margin-bottom: .25rem; }
.session-meta-compact .session-meta-hint{
  margin-top: .15rem;
  font-size: .78rem;
  line-height: 1.2;
}
.session-note-save{
  height: 38px;
  padding: .45rem .9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.cp-tipbar-actions{ display:flex; align-items:center; }
.cp-tipbar-actions .btn{ white-space: nowrap; }

@media (max-width: 575.98px){
  .cp-tipbar{ flex-direction:column; align-items:stretch; }
  .cp-tipbar-actions{ justify-content:flex-end; }
  .cp-tipbar-desc{ font-size: .88rem; }
  /* Keep summary in one row: title truncates, button stays visible */
  .cp-tipbar-summary{ flex-wrap:nowrap; }
  .cp-tipbar-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cp-tipbar-meta{ white-space:nowrap; }
}

/* LIVE training: compact "Objętość na partie" on mobile (placed before exercises) */
.cp-volume-compact{ padding: 12px 14px; }
.cp-volume-details{ width: 100%; }

.cp-volume-summary{
  list-style: none;
  cursor: pointer;
  user-select:none;
  display:flex;
  flex-direction:column;
  gap: .55rem;
}
.cp-volume-summary::-webkit-details-marker{ display:none; }

.cp-volume-summary-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  min-width:0;
}
.cp-volume-title{ font-weight: 900; min-width:0; }

.cp-volume-meta{
  font-size: .78rem;
  color: var(--muted);
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-volume-details[open] .cp-volume-meta{
  color: rgba(255,255,255,.82);
  border-color: rgba(255,122,26,.35);
  background: rgba(255,122,26,.08);
}

/* Small preview pills shown even when collapsed */
.cp-volume-peek{
  display:flex;
  gap: .35rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
}
.cp-volume-peek::-webkit-scrollbar{ height: 6px; }
.cp-volume-peek::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.cp-volume-peek::-webkit-scrollbar-track{ background: transparent; }
.cp-volume-peek-pill{
  font-size: .74rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  color: rgba(255,255,255,.84);
  white-space:nowrap;
  flex: 0 0 auto;
}

.cp-volume-body{
  margin-top: .25rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.10);
}
.cp-volume-chips{ display:flex; flex-direction:column; gap: .5rem; }
.cp-volume-chip{
  padding: .55rem .65rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.cp-volume-chip-name{ font-weight: 800; font-size: .92rem; }
.cp-volume-chip-meta{ margin-top: .1rem; color: var(--muted); font-size: .78rem; line-height: 1.25; }

/* Light theme: keep it subtle and readable */
html[data-theme="light"] .cp-volume-meta{
  background: rgba(255,255,255,.65);
  border-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.55);
}
html[data-theme="light"] .cp-volume-details[open] .cp-volume-meta{
  color: rgba(0,0,0,.72);
  border-color: rgba(255,122,26,.45);
  background: rgba(255,122,26,.10);
}
html[data-theme="light"] .cp-volume-peek-pill{
  background: rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.68);
}
html[data-theme="light"] .cp-volume-chip{
  background: rgba(0,0,0,.03);
  border-color: rgba(11,11,13,.14);
}

/* =========================
   LIVE training: big reorder arrows
   ========================= */
.live-move-col{
  display:flex;
  flex-direction:column;
  gap: .35rem;
  margin-right: .1rem;
}
.live-move-btn{
  width: 46px;
  height: 46px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 1.12rem;
  line-height: 1;
  border-radius: 14px;
}
.live-move-btn[disabled]{
  opacity: .35;
  cursor: not-allowed;
}
@media (min-width: 992px){
  .live-move-btn{ width: 42px; height: 42px; border-radius: 12px; }
}

/* === CoachPro UI System: Tabs (internal, no reload) === */
.cp-tabs-scope{ margin-bottom: 1rem; }
.cp-center-wrap{ max-width: 1200px; margin: 0 auto; }
.cp-tabbar{
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding:.65rem; border-radius: 18px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
}

/* Hide horizontal scrollbar for tab bars (keep scroll). */
.cp-tabbar{
  scrollbar-width: none;
}
.cp-tabbar::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}


/* Sticky tabbar: keep tabs visible and above page content (under the sticky navbar). */
.cp-tabbar.cp-tabbar-sticky{
  position: sticky;
  top: 86px;
  z-index: 1180;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
@media (max-width: 576px){
  .cp-tabbar.cp-tabbar-sticky{ top: 72px; }
}

/* Mobile hint that tabs are horizontally scrollable */
.cp-tabbar-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top: .35rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  user-select:none;
}
.cp-tabbar-hint .chev{ opacity: .85; font-weight: 800; }

.cp-client-context{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;padding:.25rem .25rem;margin-top:-.25rem;}
.cp-client-context .badge{font-weight:600;}

/* Client detail: subtle "back to clients" button on the right */
.cp-back-to-clients{
  padding: .28rem .70rem;
  border-radius: 999px;
  box-shadow: none !important;
  background: rgba(255,255,255,0.01) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
  font-weight: 650;
  opacity: .92;
  white-space: nowrap;
}
html[data-theme="light"] .cp-back-to-clients{
  background: rgba(11,11,13,0.03) !important;
  border-color: rgba(11,11,13,0.12) !important;
}
@media (hover: hover) and (pointer: fine){
  .cp-back-to-clients:hover{
    background: rgba(230,90,26,0.08) !important;
    border-color: rgba(230,90,26,0.55) !important;
    opacity: 1;
  }
}
html[data-theme="light"] .cp-tabbar-hint{ color: rgba(11,11,13,.55); }
/* Light theme: tabs must remain readable (dark text + subtle backgrounds) */
html[data-theme="light"] .cp-tabbar{
  background: rgba(11,11,13,0.03);
  border-color: rgba(11,11,13,0.08);
  box-shadow: 0 8px 18px rgba(11,11,13,0.06);
}
html[data-theme="light"] .cp-tab{
  background: rgba(11,11,13,0.05);
  border-color: rgba(11,11,13,0.10);
  color: rgba(11,11,13,0.86);
}
html[data-theme="light"] .cp-tab:hover{
  background: rgba(11,11,13,0.08);
}
html[data-theme="light"] .cp-tab.is-active{
  background: linear-gradient(180deg, rgba(255,106,31,0.22), rgba(255,106,31,0.08));
  border-color: rgba(255,106,31,0.45);
  color: rgba(11,11,13,0.92);
  box-shadow: 0 10px 22px rgba(11,11,13,0.12);
}

/* /me: consistent vertical rhythm between sections (cards + tabbar) */
.cp-tabs-scope[data-cp-tabs="me"] .card.card-brand{
  margin-bottom: 14px !important;
}
.cp-tabs-scope[data-cp-tabs="me"] .cp-tabbar{
  margin-bottom: 12px;
}
.cp-tabs-scope[data-cp-tabs="me"] .cp-tabbar-hint{
  margin-bottom: 12px;
}
.cp-tabs-scope[data-cp-tabs="me"] .card.card-brand:last-child{
  margin-bottom: 0 !important;
}
.cp-tab{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  font-weight:600;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.cp-tab:hover{ transform: translateY(-1px); }
.cp-tab.is-active{
  background: linear-gradient(180deg, rgba(255,115,0,.38), rgba(255,115,0,.12));
  border-color: rgba(255,115,0,.45);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.cp-tabs--enhanced [data-cp-panel]{ display:none; }
.cp-tabs--enhanced [data-cp-panel].is-active{ display:block; animation: cpFadeUp .22s ease both; }

@keyframes cpFadeUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
/* Tablets + phones: keep the tabbar in ONE line (horizontally scrollable).
   On iPad portrait the old wrap caused 2 lines and looked messy. */
@media (max-width: 1200px){
  .cp-tabbar{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling: touch; }
  .cp-tab{ white-space:nowrap; }
  /* On smaller screens do not push "Czat/Ustawienia" to the far right with ms-auto,
     because it creates huge gaps and encourages wrapping. */
  .cp-tabbar .ms-auto{ margin-left: 0 !important; }
}

/* === CoachPro UI: Collapsible blocks (premium focus mode) === */
.cp-collapse-body{
  overflow:hidden;
  max-height:none;
  opacity:1;
  transition: max-height .22s ease, opacity .18s ease;
}
.cp-collapse-body.is-collapsed{
  max-height:0;
  opacity:0;
}
.cp-collapse-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
}
.cp-collapse-toggle .chev{
  display:inline-block;
  width: 1.1rem; height:1.1rem;
  transition: transform .18s ease;
}
.cp-collapse-body.is-collapsed ~ .cp-collapse-footer .chev,
.cp-collapse-toggle[aria-expanded="false"] .chev{
  transform: rotate(-90deg);
}

/* --- Premium insights (reports + report_ready) --- */
.kpi-mini{
  border: 1px solid var(--brand-border, rgba(255,255,255,0.10));
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--card-bg, rgba(255,255,255,0.02));
}
.kpi-mini-label{
  font-size: 11px;
  color: var(--muted, rgba(242,242,243,0.72));
  letter-spacing: .2px;
}
.kpi-mini-value{
  font-weight: 700;
  margin-top: 2px;
}
.insights-list{
  margin: 8px 0 0 0;
  padding-left: 18px;
}
.insights-list li{
  margin: 6px 0;
  line-height: 1.25rem;
}



/* Report ready: make insights panel framed (especially visible in light theme) */
.report-insights{
  margin-top: .75rem;
  padding: .85rem .9rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
html[data-theme="light"] .report-insights{
  border-color: rgba(11,11,13,0.16);
  background: rgba(11,11,13,0.02);
}
/* Make brand alert look premium in dark mode (avoid white flash blocks) */
html[data-theme="dark"] .alert.alert-brand{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(242,242,243,0.92);
}

/* Live workout hint chip */
.live-hint{
  border: 1px solid var(--brand-border, rgba(255,255,255,0.10));
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.live-hint-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-top: 4px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.live-hint.is-good .live-hint-dot{ background: rgba(34,197,94,0.92); box-shadow: 0 0 0 3px rgba(34,197,94,0.14); }
.live-hint.is-warn .live-hint-dot{ background: rgba(255,122,26,0.95); box-shadow: 0 0 0 3px rgba(255,122,26,0.16); }
.live-hint.is-bad  .live-hint-dot{ background: rgba(239,68,68,0.95); box-shadow: 0 0 0 3px rgba(239,68,68,0.14); }

.live-hint-icon{ line-height: 1; }
.live-hint-text{ font-size: 12.5px; color: var(--text, #f2f2f3); white-space: pre-line; line-height: 1.25; }

/* Ensure hint stays dark in light mode too */
body.light .live-hint{
  background: rgba(0,0,0,0.03);
  border-color: rgba(11,11,13,0.16);
}
html[data-theme="light"] .live-hint{
  background: rgba(0,0,0,0.03);
  border-color: rgba(11,11,13,0.16);
}
body.light .live-hint-text{ color: #1b1b1d; }


/* Calendar system polish */

.me-cal-btn{ border-radius: 12px; font-weight: 800; letter-spacing: .01em; }
.me-cal-slot-btn{ border-radius: 999px; padding: .28rem .65rem; font-weight: 800; }
.me-cal-slot-btn.active,
.me-cal-slot-btn[aria-pressed='true']{
  background: rgba(255,122,26,.18);
  border-color: rgba(255,122,26,.55);
  color: var(--text);
}
html[data-theme="light"] .me-cal-slot-btn.active,
html[data-theme="light"] .me-cal-slot-btn[aria-pressed='true']{
  background: rgba(230,90,26,.12);
  border-color: rgba(230,90,26,.45);
}
.training-pill.is-availability{ background: var(--hover); border-color: var(--border); color: var(--text); }

/* Availability ranges as badges (calendar cells + day details) */
.me-cal-av-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top: 2px; }
.me-cal-av-badge{
  display:inline-flex;
  align-items:center;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .me-cal-av-badge{ background: rgba(11,11,13,0.04); }
.me-cal-av-badge.is-available{ border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14); }
.me-cal-av-badge.is-unavailable{ border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.12); }
.me-cal-av-badge.is-more{ color: var(--muted); }

.cp-av-badge-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 4px; }
.cp-av-badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .cp-av-badge{ background: rgba(11,11,13,0.04); }
.cp-av-badge.is-available{ border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14); }
.cp-av-badge.is-unavailable{ border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.12); }
.cp-av-badge.is-none{ color: var(--muted); }

.cp-pill-del{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius: 999px; text-decoration:none; margin-left:6px; color: var(--muted); border:1px solid var(--border); }
.cp-pill-del:hover{ color: var(--danger); border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.08); }

/* --- Session LIVE: premium, predictable exercise action buttons (Delete / Video / Expand) --- */
.cp-ex-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.cp-ex-actions form{margin:0}
.cp-ex-actions .btn{white-space:nowrap}
.cp-action-btn{border-radius:12px; padding-left:.55rem; padding-right:.55rem; height:34px; display:inline-flex; align-items:center; gap:.4rem; justify-content:center}
@media (min-width:577px){
  /* Keep a consistent width so the stack looks tidy on desktop/tablet */
  .cp-ex-actions .cp-action-btn{min-width:116px}
  .cp-ex-actions form{width:100%}
}
@media (max-width:576px){
  /* Mobile: icon-only buttons, compact vertical stack */
  .cp-ex-actions{gap:.35rem}
  .cp-ex-actions .btn{padding-left:.55rem;padding-right:.55rem}
  .cp-ex-actions .cp-action-btn{min-width:38px; height:32px}
  .cp-ex-actions .cp-action-btn .chev{margin-right:0}
  .cp-ex-actions form{width:auto}
}

/* --- Billing: plan limits (quota) progress bars --- */
.progress.progress-quota{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.08);
}
html[data-theme="light"] .progress.progress-quota{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.06);
}
.progress-bar.progress-bar-quota{
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange2), var(--orange));
  box-shadow: 0 10px 25px rgba(230,90,26,0.18);
}
.progress-bar.progress-bar-quota-full{
  background: linear-gradient(180deg, #ff4d4d, #d11a2a);
  box-shadow: 0 10px 25px rgba(255,77,77,0.16);
}


/* -------------------------------------------------------------------------
   Daily goals (client /me) + trainer log
   NOTE: This must live in /static/app.css (templates load this file).
--------------------------------------------------------------------------- */

/* --- Daily goals (premium switches) --- */
.cp-goals-card{
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(244,140,22,.06), rgba(0,0,0,0));
}
.cp-goals-list{ 
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:.55rem;
}
@media (max-width: 680px){
  .cp-goals-list{ grid-template-columns: 1fr; }
}
.cp-goal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem .65rem;
  border-radius:.85rem;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
html[data-theme="light"] .cp-goal-row{ background: rgba(0,0,0,.02); }
.cp-goal-row .min-w-0{ min-width:0; }
.cp-goal-left{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  min-width:0;
}
.cp-goal-ico{
  width:1.9rem;
  height:1.9rem;
  display:grid;
  place-items:center;
  border-radius:.75rem;
  flex:0 0 auto;
  font-size:1.05rem;
  background: rgba(244,140,22,.12);
  border:1px solid rgba(244,140,22,.28);
}
html[data-theme="light"] .cp-goal-ico{ background: rgba(244,140,22,.14); }

.cp-goal-row.is-done{
  background: rgba(244,140,22,.08);
  border-color: rgba(244,140,22,.35);
}
html[data-theme="light"] .cp-goal-row.is-done{ background: rgba(244,140,22,.11); }
.cp-goal-row.is-pending{ opacity:.75; }
.cp-goal-row.is-pop{ animation: cpGoalPop .38s ease; }
.cp-goal-row.is-pop::after{
  content:"";
  position:absolute;
  inset:-60% -40%;
  background: radial-gradient(circle, rgba(244,140,22,.35), transparent 60%);
  opacity:0;
  animation: cpGoalGlow .60s ease;
  pointer-events:none;
}
@keyframes cpGoalPop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}
@keyframes cpGoalGlow{
  0%{ opacity:0; transform: translateX(-18%) rotate(0deg); }
  40%{ opacity:.55; }
  100%{ opacity:0; transform: translateX(18%) rotate(10deg); }
}

.cp-goals-progress .progress-bar{ transition: width .35s ease; }
.cp-goals-progress{ height:.55rem; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.08); }
html[data-theme="light"] .cp-goals-progress{ background: rgba(0,0,0,.08); }
.cp-goals-progress .progress-bar{ background: var(--brand); }

/* Make Bootstrap switches feel more premium */
.cp-switch .form-check-input{
  width: 2.85rem;
  height: 1.45rem;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.18) inset;
}
html[data-theme="light"] .cp-switch .form-check-input{
  border: 1px solid rgba(0,0,0,.18);
  background-color: rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.12) inset;
}
.cp-switch .form-check-input:checked{
  background-color: var(--brand);
  border-color: rgba(244,140,22,.8);
}
.cp-switch .form-check-input:focus{
  box-shadow: 0 0 0 .2rem rgba(244,140,22,.25);
  border-color: rgba(244,140,22,.85);
}
.cp-switch .form-check-input:disabled{ opacity:.6; cursor:not-allowed; }

@media (max-width: 420px){
  .cp-goal-row{ padding:.6rem .65rem; gap:.75rem; }
  .cp-switch .form-check-input{ width: 3.0rem; }
}

/* --- Trainer daily goals log --- */
.cp-goals-log-card{
  border: 1px solid var(--card-border);
}
.cp-goals-log-controls .form-select{ border-radius:.85rem; }
.cp-goals-log-body{ min-height: 2rem; }
.cp-goals-log-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap:.55rem;
}
@media (max-width: 820px){
  .cp-goals-log-grid{ grid-template-columns: 1fr; }
}
.cp-goals-log-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem .65rem;
  border-radius:.85rem;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.03);
}
html[data-theme="light"] .cp-goals-log-row{ background: rgba(0,0,0,.02); }
.cp-goals-log-left{ display:flex; align-items:baseline; gap:.65rem; }
.cp-goals-log-date{ font-weight:600; letter-spacing:.2px; }
.cp-goals-log-badges{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-end; }
.cp-goals-badge{
  width:1.95rem;
  height:1.95rem;
  display:grid;
  place-items:center;
  border-radius:.75rem;
  border:1px solid var(--card-border);
  background: rgba(255,255,255,.03);
  opacity:.55;
  transition: transform .16s ease, opacity .16s ease, background .16s ease, border-color .16s ease;
  user-select:none;
}
html[data-theme="light"] .cp-goals-badge{ background: rgba(0,0,0,.02); }
.cp-goals-badge.is-on{
  opacity:1;
  background: rgba(244,140,22,.12);
  border-color: rgba(244,140,22,.35);
}
.cp-goals-log-row:hover .cp-goals-badge.is-on{ transform: translateY(-1px); }
@media (max-width: 420px){
  .cp-goals-log-row{ padding:.6rem .65rem; }
  .cp-goals-badge{ width:1.95rem; height:1.95rem; border-radius:.7rem; }
}


/* Availability modal – calendar-like (mobile friendly)
   (UI inspired by iOS/Google Calendar; uses CoachPRO theme variables, not Bootstrap defaults) */
.cp-av-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;}
@media (max-width: 991.98px){.cp-av-layout{grid-template-columns:1fr;} }

.cp-av-mini{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow-soft);}
.cp-mini-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:12px;color:var(--muted);margin-bottom:6px;text-align:center;}
.cp-mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cp-mini-day{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;cursor:pointer;}
.cp-mini-day.is-empty{border:0;background:transparent;cursor:default;}
.cp-mini-day:hover{background:var(--hover);border-color:var(--border);}
.cp-mini-day.is-selected{background:rgba(230,90,26,0.14);border-color:rgba(230,90,26,0.35);}
.cp-mini-day .num{font-weight:700;font-size:13px;line-height:1;}
.cp-mini-day .dotbar{display:flex;justify-content:center;gap:3px;margin-top:6px;height:6px;}
.cp-mini-day .dot{width:18px;height:4px;border-radius:999px;opacity:0;margin-top:6px;}
.cp-mini-day .dot.avail{opacity:1;background:var(--progress);}
.cp-mini-day .dot.block{opacity:1;background:#ef4444;}
.cp-mini-day .dot.mix{opacity:1;background:#f59e0b;}

.cp-agenda-list .list-group-item{border-radius:16px;margin-bottom:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);}
.cp-agenda-item{position:relative;overflow:hidden;}
.cp-agenda-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(242,242,243,0.35);opacity:0.9;}
html[data-theme="light"] .cp-agenda-item::before{background:rgba(11,11,13,0.22);}
.cp-agenda-item.is-avail::before{background:var(--progress);}
.cp-agenda-item.is-block::before{background:#ef4444;}
.cp-agenda-main{display:flex;flex-direction:column;gap:2px;padding-left:8px;}
.cp-agenda-title{font-weight:700;}
.cp-agenda-sub{font-size:12px;color:var(--muted);}
.cp-agenda-meta{padding-left:8px;}
.cp-agenda-actions{padding-left:8px;}

.cp-av-agenda .dropdown-menu{background:var(--surface);border:1px solid var(--border);}
.cp-av-agenda .dropdown-item{color:var(--text);}
.cp-av-agenda .dropdown-item:hover{background:var(--hover);}

.cp-av-editor.offcanvas{background:var(--surface);color:var(--text);border-top-left-radius:20px;border-top-right-radius:20px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-top:1px solid var(--border);box-shadow:var(--shadow);height:min(72vh,520px);padding-bottom:env(safe-area-inset-bottom);}
@media (max-width: 520px){.cp-av-editor.offcanvas{height:min(85vh,680px);} }
.cp-av-editor.offcanvas-end{
  /* Desktop drawer: avoid bottom-sheet look */
  height: 100% !important;
  max-height: 100% !important;
  width: min(420px, 92vw);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-bottom: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-right: 0;
}
.cp-av-editor .offcanvas-header{border-bottom:1px solid var(--border);} 
.cp-av-editor .btn-close{opacity:.9;}
html[data-theme="dark"] .btn-close{filter:invert(1);}
html[data-theme="light"] .btn-close{filter:none;}
html[data-theme="light"] .cp-av-editor .btn-close{filter:none;}
.cp-av-editor .form-label{color:var(--muted);}
.cp-av-editor .form-control,.cp-av-editor .form-select{background:var(--input-bg);border-color:var(--input-border);color:var(--text);}
.cp-av-editor .form-control::placeholder{color:var(--placeholder);}

/* ---------------- Premium UX: onboarding checklist + empty plan alert + plan item basic/pro ---------------- */

.cp-onboarding-card{position:relative;overflow:hidden;}
.cp-onboarding-card::before{content:'';position:absolute;inset:-1px;pointer-events:none;background:radial-gradient(900px 220px at 12% -20%, rgba(245,158,11,0.22), transparent 60%);}
html[data-theme="light"] .cp-onboarding-card::before{background:radial-gradient(900px 220px at 12% -20%, rgba(245,158,11,0.18), transparent 60%);} 

.cp-progress{height:10px;border-radius:999px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);}
.cp-progress .progress-bar{background:var(--brand);}

.cp-checklist{display:flex;flex-direction:column;gap:10px;}
.cp-checklist-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 12px;border:1px solid var(--border);border-radius:18px;background:var(--surface2);box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset;}
html[data-theme="light"] .cp-checklist-item{box-shadow:0 0 0 1px rgba(0,0,0,0.03) inset;}
.cp-checklist-left{display:flex;gap:10px;min-width:0;}
.cp-checklist-title{font-weight:800;letter-spacing:.2px;}
.cp-checklist-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35;}
.cp-checklist-right{flex:0 0 auto;display:flex;align-items:center;gap:10px;}

.cp-checkmark{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--muted);background:rgba(255,255,255,0.02);font-weight:900;flex:0 0 auto;}
html[data-theme="light"] .cp-checkmark{background:rgba(0,0,0,0.02);} 
.cp-checklist-item.is-done .cp-checkmark{border-color:rgba(34,197,94,0.45);color:rgba(34,197,94,0.95);background:rgba(34,197,94,0.12);} 

@media (max-width: 520px){
  .cp-checklist-item{flex-direction:column;align-items:stretch;}
  .cp-checklist-right{justify-content:flex-start;}
}

/* Empty active plan alert (client page) */
.cp-empty-plan-alert{border:1px solid rgba(245,158,11,0.35);background:linear-gradient(135deg, rgba(245,158,11,0.12), transparent 60%);}
html[data-theme="light"] .cp-empty-plan-alert{border-color:rgba(245,158,11,0.30);background:linear-gradient(135deg, rgba(245,158,11,0.10), transparent 60%);} 
.cp-empty-plan-alert .cp-empty-plan-top{display:flex;gap:12px;align-items:flex-start;}
.cp-empty-plan-ico{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(245,158,11,0.18);border:1px solid rgba(245,158,11,0.25);font-size:18px;flex:0 0 auto;}
.cp-empty-plan-title{font-weight:900;letter-spacing:.2px;}
.cp-empty-plan-sub{color:var(--muted);font-size:12px;line-height:1.35;margin-top:2px;}

/* Plan item: basic/pro mode */
.cp-planitem-wrap{position:relative;}
.cp-planitem-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.cp-planitem-hint{font-size:12px;color:var(--muted);}
.cp-pro-switch{display:flex;align-items:center;gap:8px;}
.cp-pro-switch .form-check-input{cursor:pointer;}

.cp-planitem-wrap.is-basic .cp-advanced{display:none !important;}
.cp-planitem-wrap.is-basic .cp-pro-badge{display:none !important;}

.cp-mode-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);font-size:12px;color:var(--muted);}
.cp-mode-pill .dot{width:8px;height:8px;border-radius:999px;background:var(--brand);}

/* LIVE: supersets (make them hard to miss) */
.superset-pill{letter-spacing:0.2px;font-weight:900;}
.superset-hint{margin-top:2px;opacity:.9;}

.superset-group-header{
  margin-top:14px;
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(245,158,11,0.35);
  background:linear-gradient(135deg, rgba(245,158,11,0.14), transparent 60%);
}
html[data-theme="light"] .superset-group-header{
  border-color:rgba(245,158,11,0.30);
  background:linear-gradient(135deg, rgba(245,158,11,0.10), transparent 60%);
}
.superset-group-sub{color:var(--muted);font-size:12px;}
.superset-group-tip{color:var(--muted);font-size:12px;}

/* Visual link: a subtle left rail across exercises in the same superset */
.live-exercise-card.is-superset{
  border-left:4px solid rgba(245,158,11,0.65);
}
.live-exercise-card.is-superset-first{margin-top:8px;}
.live-exercise-card.is-superset-last{margin-bottom:2px;}

@media (max-width: 520px){
  .superset-group-header{border-radius:18px;padding:10px 12px;}
  .superset-group-tip{display:none;}
}


/* ---------- Warmup box (live session) ---------- */
.cp-warmup-card{
  padding: 14px 16px;
  border-left: 3px solid rgba(230,90,26,0.55);
}

.cp-warmup-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cp-warmup-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(230,90,26,0.18);
  border: 1px solid rgba(230,90,26,0.35);
  box-shadow: 0 8px 24px rgba(230,90,26,0.08);
}

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

.cp-warmup-title-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-warmup-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.cp-warmup-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.cp-warmup-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 576px){
  .cp-warmup-card{ padding: 12px 12px; }
  .cp-warmup-icon{ width: 34px; height: 34px; border-radius: 12px; font-size: 17px; }
  .cp-warmup-note{ padding: 10px 10px; }
}


/* =========================
   Premium navbar drawers (notifications / chat)
   ========================= */

.cp-drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1050;
}
.cp-drawer-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

body.cp-drawer-open{ overflow: hidden; }

/* Navbar in this app is sticky with a high z-index (1200).
   When the drawer is open we lower the navbar stacking context so
   the drawer header isn't hidden behind it (desktop + mobile). */
body.cp-drawer-open .nav-brand{ z-index: 1040 !important; }

/* Client/Trainer pages may have a sticky tabbar (cp-tabs) with a high z-index.
   Ensure the drawer is always on top when open. */
body.cp-drawer-open .cp-tabbar.cp-tabbar-sticky{ z-index: 1030 !important; }

.cp-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh; /* mobile browsers with dynamic viewport */
  max-height: 100dvh;
  width: min(420px, 92vw);
  background: linear-gradient(180deg, rgba(20,20,25,0.98), rgba(12,12,16,0.98));
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateX(103%);
  transition: transform .22s ease;
  z-index: 1060;
  display: flex;
  flex-direction: column;
}
html[data-theme="light"] .cp-drawer{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,251,0.98));
}
.cp-drawer.is-open{ transform: translateX(0); }

.cp-drawer__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
}
.cp-drawer__title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.cp-drawer__close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.cp-drawer__close:hover{ background: rgba(255,255,255,0.06); }

.cp-drawer__body{
  padding: 14px 14px 12px;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cp-drawer__hint{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.cp-drawer__loading{
  font-size: 13px;
  color: var(--muted);
  padding: 10px 2px;
}
.cp-drawer__empty{
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 13px;
}
.cp-drawer__list{ display: flex; flex-direction: column; gap: 10px; }
.cp-drawer-section-title{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 10px 6px -2px;
}

.cp-drawer-item.is-read{
  background: rgba(255,255,255,0.02);
}
.cp-drawer-item__dot.is-read{
  background: rgba(255,255,255,0.18);
  box-shadow: none;
}
html[data-theme="light"] .cp-drawer-item__dot.is-read{
  background: rgba(11,11,13,0.14);
}


.cp-drawer__footer{
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: rgba(255,255,255,0.02);
}

/*
  Light theme fix:
  The drawer footer uses a Bootstrap .btn-outline-light for "Zamknij".
  On white theme it becomes almost invisible, so we restyle it only inside the drawer.
*/
html[data-theme="light"] .cp-drawer__footer .btn-outline-light{
  color: #0B0B0D !important;
  border-color: rgba(11,11,13,0.18) !important;
  background: rgba(11,11,13,0.04) !important;
}
html[data-theme="light"] .cp-drawer__footer .btn-outline-light:hover{
  background: rgba(11,11,13,0.08) !important;
  border-color: rgba(11,11,13,0.26) !important;
}

.cp-drawer-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cp-drawer-item:hover{
  transform: translateY(-1px);
  border-color: rgba(230,90,26,0.35);
  background: rgba(230,90,26,0.08);
}

.cp-drawer-item__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(230,90,26,0.14);
}

.cp-drawer-item__avatar{
  width: 32px;
  height: 32px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(230,90,26,0.18);
  border: 1px solid rgba(230,90,26,0.35);
  color: var(--text);
}

.cp-drawer-item__main{ min-width: 0; }
.cp-drawer-item__title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cp-drawer-item__sub{
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cp-drawer-item__meta{
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  margin-left: 6px;
}

.cp-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(230,90,26,0.18);
  border: 1px solid rgba(230,90,26,0.35);
  font-size: 12px;
  font-weight: 800;
}

/* Mobile: zostaw "pas" po lewej stronie (łatwiejsze zamykanie kciukiem / gestem)
   zamiast zasłaniania praktycznie całego ekranu. */
@media (max-width: 576px){
  .cp-drawer{
    /* zostawiamy większy pas po lewej (łatwiejszy chwyt kciukiem) i ograniczamy szerokość panelu */
    width: clamp(280px, calc(100vw - 56px), 360px);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .cp-drawer__footer{ justify-content: space-between; }
}


/* =========================
   Unified section headings + clear click targets (APP ONLY)
   ========================= */
body:not(.public-shell){
  --cp-h1: clamp(1.35rem, 1.10rem + 1.0vw, 1.85rem);
  --cp-h2: clamp(1.15rem, 1.00rem + 0.9vw, 1.55rem);
  --cp-h3: clamp(1.00rem, 0.92rem + 0.6vw, 1.25rem);
  --cp-h4: clamp(0.95rem, 0.90rem + 0.3vw, 1.10rem);

  --cp-head-fw: 800;
  --cp-subhead-fw: 750;

  --cp-accent: var(--brand);
  --cp-focus: rgba(255, 122, 0, .22);
}

/* Headings: make hierarchy consistent regardless of Bootstrap utility classes */
body:not(.public-shell) h1,
body:not(.public-shell) .h1{ font-size: var(--cp-h1) !important; font-weight: var(--cp-head-fw) !important; letter-spacing: -0.02em; }
body:not(.public-shell) h2,
body:not(.public-shell) .h2{ font-size: var(--cp-h2) !important; font-weight: var(--cp-head-fw) !important; letter-spacing: -0.015em; }
body:not(.public-shell) h3,
body:not(.public-shell) .h3{ font-size: var(--cp-h3) !important; font-weight: var(--cp-subhead-fw) !important; letter-spacing: -0.01em; }
body:not(.public-shell) h4,
body:not(.public-shell) .h4{ font-size: var(--cp-h4) !important; font-weight: 700 !important; }

/* Section title helper (useful in templates, but also we auto-style common headings) */
body:not(.public-shell) .cp-section-title,
body:not(.public-shell) h2.mb-0,
body:not(.public-shell) h2.mb-1,
body:not(.public-shell) h2.mb-2{
  position: relative;
  padding-bottom: .35rem;
  margin-bottom: .65rem;
}

/* Subtle orange underline to guide the eye (disabled for accordion headers) */
body:not(.public-shell) .cp-section-title::after,
body:not(.public-shell) h2.mb-0::after,
body:not(.public-shell) h2.mb-1::after,
body:not(.public-shell) h2.mb-2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 99px;
  background: var(--cp-accent);
  opacity: .9;
}
body:not(.public-shell) h2.accordion-header{ padding-bottom: 0; margin-bottom: 0; }
body:not(.public-shell) h2.accordion-header::after{ display:none !important; }

/* Clickable rows/cards (data-href is used in several places) */
body:not(.public-shell) [data-href]{
  cursor: pointer;
  border-radius: 14px;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
body:not(.public-shell) [data-href]:hover{
  background: rgba(255,255,255,.04);
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
  transform: translateY(-1px);
}
body:not(.public-shell) [data-href]:active{ transform: translateY(0px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* Buttons: primary actions pop a bit more (without neon) */
body:not(.public-shell) .btn{
  font-weight: 700;
}
body:not(.public-shell) .btn-primary,
body:not(.public-shell) .btn-success,
body:not(.public-shell) .btn-warning{
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
body:not(.public-shell) .btn-primary:focus,
body:not(.public-shell) .btn-success:focus,
body:not(.public-shell) .btn-warning:focus,
body:not(.public-shell) .btn:focus{
  box-shadow: 0 0 0 .22rem var(--cp-focus), 0 10px 22px rgba(0,0,0,.22) !important;
}

/* Bigger tap targets for list items in side drawers (messages/notifications) */
body:not(.public-shell) .cp-drawer a,
body:not(.public-shell) .cp-drawer button,
body:not(.public-shell) .cp-drawer .list-group-item{
  min-height: 44px;
}

/* Small “hint” style for secondary text under section headers */
body:not(.public-shell) .cp-section-hint{
  color: var(--text-dim);
  font-size: .95rem;
  margin-top: -.35rem;
  margin-bottom: .75rem;
}


/* === Mobile: Trainer calendar action buttons aligned in one row === */
.tr-cal-toolbar-right{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
@media (max-width: 576px){
  .tr-cal-toolbar-right{flex-direction:column; align-items:stretch;}
  .tr-cal-toolbar-right select{width:100%;}
  .tr-cal-actions{width:100%;}
  .tr-cal-actions .btn{padding-left:10px; padding-right:10px;}
}

/* === Trainer calendar: visually separated agenda sections (requests / planned / done) === */
.me-cal-agenda-section{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
}
.me-cal-agenda-section > .d-flex{gap:10px;}
.me-cal-agenda-section .fw-semibold{letter-spacing:.2px;}
.me-cal-agenda-section.is-requests{border-left:4px solid var(--brand); background: linear-gradient(90deg, rgba(255,106,31,0.12), rgba(255,255,255,0.03) 35%);}
.me-cal-agenda-section.is-planned{border-left:4px solid rgba(59,130,246,0.95); background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(255,255,255,0.03) 35%);}
.me-cal-agenda-section.is-live{border-left:4px solid rgba(14,165,233,0.95); background: linear-gradient(90deg, rgba(14,165,233,0.12), rgba(255,255,255,0.03) 35%);}
.me-cal-agenda-section.is-done{border-left:4px solid var(--progress); background: linear-gradient(90deg, rgba(34,197,94,0.12), rgba(255,255,255,0.03) 35%);}
.me-cal-agenda-section.is-cancelled{border-left:4px solid rgba(239,68,68,0.95); background: linear-gradient(90deg, rgba(239,68,68,0.10), rgba(255,255,255,0.03) 35%);}

/* === Client detail: keep "Klient:" and back button on one line on mobile === */
.client-context{min-width:0;}
.cp-back-to-clients{white-space:nowrap;}

/* === Availability modal: buffer selector (readable on all devices) === */
.cp-buffer-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.cp-buffer-label{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.cp-buffer-select{
  width:140px;
}
@media (max-width: 576px){
  .cp-buffer-wrap{flex-direction:column; align-items:stretch; gap:6px;}
  .cp-buffer-select{width:100%;}
}

/* Availability modal header: avoid cutting the buffer label/select on tablets */
.cp-av-modal-header .cp-av-header-actions{row-gap:8px;}
@media (max-width: 1024px){
  .cp-av-modal-header .cp-av-header-actions{width:100%;}
  .cp-av-modal-header .cp-buffer-wrap{width:100%; justify-content:space-between;}
  .cp-av-modal-header .cp-buffer-label{min-width:190px;}
  .cp-av-modal-header .cp-buffer-select{min-width:150px;}
}



/* =========================================================
   Landing Premium (scoped) – .lp
   ========================================================= */
.lp{
  --lp-max: 1120px;
  --lp-pad: 18px;
  --lp-r: 22px;
  --lp-bg-0: rgba(0,0,0,0.12);
  --lp-bg-1: rgba(0,0,0,0.18);
  --lp-bd: rgba(255,255,255,0.10);
  --lp-bd2: rgba(255,255,255,0.14);
  --lp-soft: rgba(255,140,0,0.14);
  --lp-soft-bd: rgba(255,140,0,0.22);
}
html[data-theme="light"] .lp{
  --lp-bg-0: rgba(0,0,0,0.03);
  --lp-bg-1: rgba(0,0,0,0.04);
  --lp-bd: rgba(0,0,0,0.10);
  --lp-bd2: rgba(0,0,0,0.12);
  --lp-soft: rgba(230,90,26,0.10);
  --lp-soft-bd: rgba(230,90,26,0.18);
}

.lp-container{max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-pad)}

/*
  Landing renderuje się wewnątrz <main class="container"> w base.html.
  Żeby uniknąć „ucięć” tła/cieni (subpiksele + 100vw + scrollbar),
  landing nie używa sztuczek z 100vw i ujemnymi marginesami.
  Szerokość i padding ogarniamy przez reset kontenera w landing.html.
*/
.lp{width:100%; margin:0; background: var(--bg); overflow-x:hidden; position:relative; isolation:isolate;}
html[data-theme="light"] .lp{ background: var(--bg); }

/*
  Globalny „miękki” gradient dla całego landingu.
  Zamiast kilku pseudo-tła per sekcja (które potrafią kończyć się ostrą linią),
  trzymamy jedno tło w tle całej strony – dzięki temu nie ma „przycięć”
  i wrażenia sklejonych bloków.
*/
.lp::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 520px at 50% 22%, rgba(255,140,0,0.12), transparent 62%),
    radial-gradient(1100px 640px at 18% 58%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1100px 680px at 82% 68%, rgba(255,106,31,0.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.10), transparent 55%);
}
html[data-theme="light"] .lp::before{
  background:
    radial-gradient(900px 520px at 50% 22%, rgba(255,106,31,0.16), transparent 62%),
    radial-gradient(1100px 640px at 18% 58%, rgba(0,0,0,0.03), transparent 60%),
    radial-gradient(1100px 680px at 82% 68%, rgba(255,140,0,0.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.03), transparent 55%);
}

/* Wszystko na landingu ma być nad globalnym tłem */
.lp > *{position:relative; z-index:1;}

.lp-section{padding: 56px 0; position:relative}
@media (min-width: 992px){.lp-section{padding: 86px 0}}
.lp-section > .lp-container{position:relative; z-index: 1;}

/* Subtelne oddzielenie sekcji (premium, bez "sklejki") */
.lp-section::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: 1px;
  /* miękka linia – bez "pasków" na ciemnym tle */
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.10), transparent);
  opacity: .55;
  pointer-events:none;
}
.lp-section::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: 24px;
  /* delikatny fade, który nie wygląda jak odcięta belka */
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  opacity: .35;
  pointer-events:none;
}
html[data-theme="dark"] .lp-section::before{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  opacity: .50;
}
html[data-theme="dark"] .lp-section::after{
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0));
  opacity: .55;
}
.lp-hero + .lp-section::before,
.lp-hero + .lp-section::after{display:none;}

/* Delikatne pasy tła dla wybranych sekcji (spójne, bez losowych cięć) */
.lp-section-alt{background: rgba(255,255,255,0.06);}
.lp-section-compare{background: rgba(255,255,255,0.08);}
html[data-theme="dark"] .lp-section-alt{background: rgba(255,255,255,0.02);}
html[data-theme="dark"] .lp-section-compare{background: rgba(255,255,255,0.03);}

/* HERO "badge" -> bardziej jak kiedyś: niska, gruba typografia (bez pigułki) */
.lp-eyebrow{
  display:inline-block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-weight: 950;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.lp-h1{font-weight: 950; letter-spacing:-0.8px; line-height:1.05; font-size: clamp(30px, 3.4vw, 54px); margin: 14px 0 0}
.lp-h2{font-weight: 950; letter-spacing:-0.5px; line-height:1.08; font-size: clamp(22px, 2.2vw, 34px); margin: 0}
.lp-lead{margin: 0; color: var(--muted); font-size: 15px; line-height:1.55; max-width: none; width: 100%; text-align: justify; text-justify: inter-word; hyphens: auto;}
@media (min-width: 992px){.lp-lead{font-size: 16px}}
.lp-leadwrap{margin-top: 12px; width: 100%;}
.lp-lead2{margin-top: 8px;}
.lp-sub{margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height:1.55; max-width: 70ch}

.lp-hero{padding: 10px 0 18px}
@media (min-width: 992px){.lp-hero{padding: 34px 0 30px}}

/* Mobile Safari: landing HERO starts under a sticky navbar.
   We removed main.container padding for landing (to avoid the "odd strip"),
   so we must re-introduce safe top spacing INSIDE the hero.
   Using padding (not margin) keeps the background consistent (no different shade strip). */
@media (max-width: 991.98px){
  .lp-hero{padding-top: calc(var(--nav-h, 0px) + 10px) !important;}
}
.lp-hero-grid{display:grid; gap: 22px; align-items:center}
@media (min-width: 992px){.lp-hero-grid{grid-template-columns: 1.05fr .95fr; gap: 28px}}

/* Hero benefit strip placement:
   - desktop: sits under CTA (inside the left column)
   - mobile: duplicated block is rendered under the mockup
*/
.lp-hero-under{width: 100%; margin-top: 14px;}
.lp-hero-under--mobile{display:none;}
@media (max-width: 991.98px){
  .lp-hero-under--desktop{display:none;}
  .lp-hero-under--mobile{display:block; grid-column: 1 / -1;}
}

/* HERO CTA: 2 równe kolumny + login pod spodem na pełną szerokość
   (wszystkie przyciski mają wspólną prawą krawędź jak na zrzucie) */
.lp-cta{display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; max-width: 520px}
@media (min-width: 520px){.lp-cta{grid-template-columns: 1fr 1fr}}


/* Tablet/iPad: let hero copy + CTA use more width (avoid “tiny” buttons/lines on 768px screens) */
@media (min-width: 768px) and (max-width: 991.98px){
  /* Tablet: let copy + CTA use full available width (no narrow column feel) */
  .lp-cta{ max-width: none; }
  .lp-lead{ max-width: none; }
}
.lp-cta .lp-btn{width:100%; justify-content:center; text-align:center}
.lp-btn{border-radius: 14px !important; padding: 10px 14px !important; font-weight: 900 !important}
.lp-btn.ghost{border-color: rgba(255,255,255,0.18) !important}
html[data-theme="light"] .lp-btn.ghost{border-color: rgba(0,0,0,0.16) !important}

/* Landing: login CTA jako 3. przycisk pod dwoma głównymi, na pełną szerokość */
.lp-btn-login{grid-column: 1 / -1}

/* Trust strip pod CTA - równe "badge" na jedną linię (desktop), bez rozjeżdżania */
.trust-strip{display:grid; grid-template-columns: 1fr; gap: 10px; align-items:stretch; width:100%; max-width:none}
@media (min-width: 520px){.trust-strip{grid-template-columns: repeat(3, minmax(0, 1fr))}}
.trust-strip .trust-item{display:flex; align-items:center; justify-content:flex-start; text-align:left; padding: 10px 12px}

.lp-btn.light{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.14);
  color: #111;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
.lp-btn.light:hover{transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,0.08);}
html[data-theme="dark"] .lp-btn.light{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}
.lp-btn-em{font-weight: 950;}
.lp-link{color: var(--muted); font-weight: 800; font-size: 13px; text-decoration:none; padding: 8px 6px}
.lp-link:hover{color: var(--text)}

.lp-chips{display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px}
.lp-chip{display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px;
  background: var(--lp-bg-0); border: 1px solid var(--lp-bd); color: var(--text-85); font-weight: 850; font-size: 12px}

.lp-kpis{display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px}
@media (min-width: 680px){.lp-kpis{grid-template-columns: repeat(3, minmax(0,1fr))}}
.lp-kpi{border-radius: var(--lp-r); background: var(--lp-bg-1); border:1px solid var(--lp-bd); padding: 12px 12px}
.kpi-top{font-size: 12px; color: var(--muted); font-weight: 800}
.kpi-main{font-size: 15px; font-weight: 950; margin-top: 2px}
.kpi-sub{font-size: 12px; color: var(--muted); margin-top: 4px}

.lp-hero-media{display:grid; place-items:center}
.lp-phone-wrap{position:relative; width: min(420px, 100%); padding: 14px; border-radius: calc(var(--lp-r) + 6px);
  background: radial-gradient(1200px 500px at 20% 10%, rgba(255,140,0,0.18), transparent 60%),
              radial-gradient(900px 420px at 80% 20%, rgba(255,255,255,0.08), transparent 55%),
              var(--lp-bg-1);
  border: 1px solid var(--lp-bd);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
}
html[data-theme="light"] .lp-phone-wrap{box-shadow: 0 18px 55px rgba(10,10,20,0.12)}
.lp-spotlight{position:absolute; inset:-30px; background: radial-gradient(520px 520px at 50% 20%, rgba(255,140,0,0.22), transparent 60%); filter: blur(6px); opacity: .9; pointer-events:none}

@media (min-width: 992px){
  .lp-phone-wrap{width: min(380px, 100%);}
}
.lp-phone{position:relative; border-radius: 28px; overflow:hidden; border:1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.25)}
html[data-theme="light"] .lp-phone{border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.72)}
.lp-phone-img{display:block; width:100%; height:auto}

.lp-float{position:absolute; z-index:3; width: min(280px, 78%); padding: 10px 11px; border-radius: 16px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0,0,0,0.55)}
html[data-theme="light"] .lp-float{background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.10); box-shadow: 0 14px 42px rgba(10,10,20,0.12)}
.lp-float-title{font-weight: 950; font-size: 13px}
.lp-float-sub{margin-top: 4px; color: var(--muted); font-size: 12px; line-height:1.25}
.lp-float-a{left: 18px; bottom: -10px}
.lp-float-b{right: 18px; top: -10px}
@media (min-width: 992px){
  /* Na większych ekranach nie zasłaniamy zrzutów: pigułki wychodzą lekko poza mockup */
  .lp-float{width: min(250px, 74%)}
  .lp-float-a{left: -26px; bottom: 12px}
  .lp-float-b{right: -28px; top: 12px}
}
@media (max-width: 768px){
  /* Na telefonach nie zasłaniamy mockupów */
  .lp-float{display:none !important}
}

/* Pigułki nad mockupem (desktop) */
.lp-floats-top{display:none; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin: 0 0 12px 0;}
.lp-pill{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid rgba(0,0,0,.06); box-shadow:0 14px 36px rgba(0,0,0,.18);}
.lp-pill-title{font-weight:900; font-size:13px; letter-spacing:.2px;}
.lp-pill-sub{font-size:12px; opacity:.78;}

html[data-theme="dark"] .lp-pill{background: rgba(24,24,26,.72); border-color: rgba(255,255,255,.12); box-shadow: 0 18px 44px rgba(0,0,0,.42);}
html[data-theme="dark"] .lp-pill-sub{opacity:.86;}

@media (min-width: 992px){
  .lp-floats-top{display:flex;}
}

.lp-section-head{display:flex; flex-direction:column; gap: 8px; align-items:flex-start; margin-bottom: 16px}
@media (min-width: 992px){.lp-section-head{margin-bottom: 22px}}

.lp-cards3{display:grid; grid-template-columns: 1fr; gap: 12px}
@media (min-width: 860px){.lp-cards3{grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px}}
.lp-card{border-radius: var(--lp-r); padding: 14px; background: var(--lp-bg-1); border:1px solid var(--lp-bd)}
.lp-card-ico{width: 42px; height: 42px; display:grid; place-items:center; border-radius: 14px;
  background: var(--lp-soft); border:1px solid var(--lp-soft-bd); font-size: 18px}
.lp-card-title{margin-top: 10px; font-weight: 950; font-size: 15px}
.lp-card-text{margin-top: 6px; color: var(--muted); font-size: 13px; line-height:1.5}

.lp-grid8{display:grid; grid-template-columns: 1fr; gap: 10px}
@media (min-width: 740px){.lp-grid8{grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px}}
@media (min-width: 1100px){.lp-grid8{grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px}}
.lp-feature{border-radius: var(--lp-r); padding: 14px; background: rgba(0,0,0,0.14); border:1px solid var(--lp-bd)}
html[data-theme="light"] .lp-feature{background: rgba(255,255,255,0.70)}
.lp-feature-title{font-weight: 950; font-size: 14px; line-height:1.2}
.lp-feature-text{margin-top: 8px; color: var(--muted); font-size: 13px; line-height:1.5}

.lp-center{display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; margin-top: 18px}

.lp-demo{display:grid; gap: 14px; align-items:start}
@media (min-width: 992px){.lp-demo{grid-template-columns: .95fr 1.05fr; gap: 22px}}
.lp-demo-phone{position:relative}
@media (min-width: 992px){.lp-demo-phone{position:sticky; top: 88px}}
.lp-demo-frame{
  position: relative;
  /* mniejszy mockup (bardziej proporcjonalny do treści) */
  max-width: 340px;
  margin-inline: auto;
  border-radius: calc(var(--lp-r) + 6px);
  padding: 0;
  background: var(--lp-bg-1);
  border: 1px solid var(--lp-bd);
  overflow: hidden;
  /* Stabilny rozmiar niezależnie od motywu/ekranu (zapobiega "rozjeżdżaniu" w dół) */
  aspect-ratio: 9 / 19.5;
}

@media (min-width: 992px){
  .lp-demo-frame{max-width: 320px;}
}
/* iPhone mockup (subtelny bezel + notch) */
.lp-demo-frame::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  pointer-events:none;
  z-index: 1;
}
html[data-theme="light"] .lp-demo-frame::before{
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
.lp-demo-frame::after{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform: translateX(-50%);
  width: 46%;
  height: 18px;
  border-radius: 0 0 14px 14px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index: 2;
}
html[data-theme="light"] .lp-demo-frame::after{
  background: rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.10);
}
.lp-demo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 3;
}
.lp-demo-img.is-active{opacity:1}

.lp-steps{list-style:none; padding:0; margin:0; display:grid; gap: 10px}
.lp-step{display:flex; gap: 12px; padding: 12px; border-radius: var(--lp-r); border:1px solid var(--lp-bd); background: rgba(0,0,0,0.14)}
html[data-theme="light"] .lp-step{background: rgba(255,255,255,0.72)}
.lp-step-k{flex:0 0 auto; width: 34px; height: 34px; border-radius: 12px; display:grid; place-items:center;
  background: var(--lp-soft); border:1px solid var(--lp-soft-bd); font-weight: 950}
.lp-step-title{font-weight: 950; font-size: 14px}
.lp-step-text{margin-top: 4px; color: var(--muted); font-size: 13px; line-height:1.45}
.lp-step.is-active{border-color: var(--lp-soft-bd); box-shadow: 0 10px 30px rgba(0,0,0,0.25)}
html[data-theme="light"] .lp-step.is-active{box-shadow: 0 12px 30px rgba(10,10,20,0.10)}

.lp-gallery{display:grid; grid-template-columns: 1fr; gap: 12px}
@media (min-width: 760px){.lp-gallery{grid-template-columns: repeat(3, minmax(0,1fr))}}
.lp-thumb{border:0; text-align:left; padding: 0; background: transparent}
.lp-thumb img{width:100%; border-radius: calc(var(--lp-r) + 6px); border:1px solid var(--lp-bd); background: var(--lp-bg-1); aspect-ratio: 4 / 3; object-fit: cover}
.lp-thumb span{display:block; margin-top: 10px; font-weight: 950; font-size: 13px; color: var(--text)}
.lp-thumb:hover img{transform: translate3d(0,-2px,0); transition: transform .18s ease}
.lp-thumb img{transition: transform .18s ease}

.lp-cta-box{display:flex; gap: 14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border-radius: calc(var(--lp-r) + 8px); padding: 16px; background:
    radial-gradient(1200px 420px at 10% 20%, rgba(255,140,0,0.18), transparent 60%),
    var(--lp-bg-1);
  border:1px solid var(--lp-bd);
}
@media (min-width: 992px){.lp-cta-box{padding: 20px}}

/* CTA (Gotowy na 14 dni testu?) – przyciski na pełną szerokość na mobile */
.lp-cta-box .lp-cta{width:100%; max-width:none}

.lp-faq{display:grid; gap: 10px}
.lp-faq-item{border-radius: var(--lp-r); padding: 12px 14px; background: rgba(0,0,0,0.14); border:1px solid var(--lp-bd)}
html[data-theme="light"] .lp-faq-item{background: rgba(255,255,255,0.72)}
.lp-faq-item summary{cursor:pointer; font-weight: 950}
.lp-faq-body{margin-top: 8px; color: var(--muted); font-size: 14px; line-height:1.55}
@media (min-width: 992px){.lp-faq-body{font-size: 15px}}

.lp-modal{position:fixed; inset:0; display:none; z-index: 9999}
.lp-modal.is-open{display:block}
.lp-modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,0.65)}
.lp-modal-card{position:relative; width: min(980px, calc(100% - 26px)); max-height: calc(100% - 26px);
  margin: 13px auto; border-radius: 22px; overflow:hidden; border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.72); backdrop-filter: blur(10px); box-shadow: 0 22px 80px rgba(0,0,0,0.65)}
html[data-theme="light"] .lp-modal-card{background: rgba(255,255,255,0.96); border-color: rgba(0,0,0,0.10); box-shadow: 0 18px 55px rgba(10,10,20,0.16)}
.lp-modal-img{display:block; width:100%; height:auto; max-height: calc(100vh - 26px); object-fit: contain; background: transparent}
.lp-modal-x{position:absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 14px;
  border:1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.40); color: rgba(255,255,255,0.92); font-weight: 950}
html[data-theme="light"] .lp-modal-x{background: rgba(255,255,255,0.72); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.75)}
.lp-modal-x:hover{transform: translate3d(0,-1px,0)}

/* Reveal */
.fx-reveal{opacity:0; transform: translate3d(0,10px,0); filter: blur(8px)}
.fx-reveal.is-in{opacity:1; transform: translate3d(0,0,0); filter: blur(0); transition: opacity .55s ease, transform .55s ease, filter .55s ease;
  transition-delay: var(--d, 0ms)}



/* =========================
   Landing premium polish
   ========================= */
:root{
  /* Brand orange (spójny z UI aplikacji) */
  /* Na landing ciut ciemniejszy, żeby pasował do UI po zalogowaniu */
  --cp-orange: #e34b18;
  --cp-orange-2: #ff6a1a;
  --cp-ink: rgba(0,0,0,0.92);
}

/* Landing: na mobile przesuń niżej pasek korzyści + "Działa na..." bez zmiany wysokości sekcji */
@media (max-width: 768px){
  .lp-hero .trust-strip,
  .lp-hero .lp-device-note{
    position: relative;
    top: 12px;
  }
}

.lp-container{max-width: 1160px}
.lp-hero{padding-top: 92px; padding-bottom: 56px}
@media (min-width: 980px){.lp-hero{padding-top: 110px; padding-bottom: 70px}}

.lp-section{padding: 64px 0}
@media (min-width: 980px){.lp-section{padding: 82px 0}}

.lp-h1{letter-spacing: -0.02em; line-height: 1.03}
.lp-lead{max-width: none}

/* Buttons (no bootstrap colors) */
.lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration:none !important;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  width: auto;
  min-width: 180px;
}
@media (max-width: 520px){.lp-btn{width:100%; min-width: 0}}
.lp-btn.primary,
.lp-btn-primary{
  color: #fff;
  background: linear-gradient(135deg, var(--cp-orange), var(--cp-orange-2));
  box-shadow: 0 10px 28px rgba(227,75,24,0.20);
}
html[data-theme="light"] .lp-btn.primary,
html[data-theme="light"] .lp-btn-primary{color: #111}
.lp-btn.primary:hover,
.lp-btn-primary:hover{transform: translateY(-1px); box-shadow: 0 14px 34px rgba(227,75,24,0.26)}
.lp-btn.ghost,
.lp-btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}
html[data-theme="light"] .lp-btn.ghost,
html[data-theme="light"] .lp-btn-ghost{
  border-color: rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.86);
}
.lp-btn.ghost:hover,
.lp-btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,106,0,0.55);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* CTA row spacing */
.lp-cta{gap: 10px}
.lp-link{opacity: .9}
.lp-link:hover{opacity: 1}

/* Cards and grids: consistent rhythm */
.lp-cards3, .lp-grid8{gap: 14px}
@media (min-width: 980px){.lp-cards3, .lp-grid8{gap: 16px}}

.lp-card{
  border-radius: 16px;
  border: 1px solid var(--lp-bd);
  background: var(--lp-bg-1);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
html[data-theme="light"] .lp-card{box-shadow: 0 14px 34px rgba(0,0,0,0.06)}

/* Landing: reakcja na hover jak na /pricing (tylko na urządzeniach z hover) */
@media (hover: hover) and (pointer: fine){
  .lp-card,
  .lp-feature,
  .lp-step,
  .lp-compare-col{ transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }

  .lp-card:hover,
  .lp-feature:hover,
  .lp-step:hover,
  .lp-compare-col:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.14);
    border-color: rgba(227,75,24,0.30);
  }
  html[data-theme="light"] .lp-card:hover,
  html[data-theme="light"] .lp-feature:hover,
  html[data-theme="light"] .lp-step:hover,
  html[data-theme="light"] .lp-compare-col:hover{
    box-shadow: 0 16px 38px rgba(0,0,0,0.10);
    border-color: rgba(227,75,24,0.26);
  }
}

/* Section titles */
.lp-h2{letter-spacing: -0.015em}
.lp-sub{max-width: 70ch}

/* Gallery: improve captions contrast */
.lp-gallery small{opacity: .85}

/* Demo: keep clean on mobile */
@media (max-width: 820px){
  .lp-demo{gap: 18px}
  .lp-demo-phone{position: relative !important; top: auto !important}
}

/* Background: less sterile in light, deeper in dark */
html[data-theme="light"] .lp-hero{
  background: radial-gradient(900px 600px at 76% 22%, rgba(255,106,0,0.16), transparent 60%),
              radial-gradient(1000px 680px at 18% 18%, rgba(0,0,0,0.05), transparent 55%);
}
html:not([data-theme="light"]) .lp-hero{
  background: radial-gradient(900px 640px at 78% 18%, rgba(255,106,0,0.22), transparent 62%),
              radial-gradient(1000px 760px at 18% 18%, rgba(255,255,255,0.05), transparent 55%);
}

/* Fix any accidental bootstrap button visuals inside landing */
.lp-hero a.btn, .lp-section a.btn{all: unset}


/* Reduce excessive top spacing on public landing (navbar already adds height) */
.lp-hero{scroll-margin-top: 80px}
@media (max-width: 575px){
  .lp{ margin-top: -10px; }
}


/* Onboarding timeline (signup -> trial -> activation) */
.lp-steps--2col{display:grid; gap: 10px}
@media (min-width: 992px){.lp-steps--2col{grid-template-columns: 1fr 1fr}}
.lp-step .lp-step-title{font-weight: 900; color: var(--text-85); margin: 0 0 4px}
.lp-step .lp-step-desc{margin: 0; color: var(--muted); font-size: 13px; line-height:1.5}



/* --- Landing: Comparison section --- */
.lp-section-compare{ background: transparent; }
.lp-section-compare::before{content:none !important;}

.lp-compare{
  display:grid;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 992px){
  .lp-compare{ grid-template-columns: 1.15fr .9fr .9fr; gap: 16px; align-items: stretch; }
}

.lp-compare-col{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(16,16,18,0.55);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}
html[data-theme="light"] .lp-compare-col{
  background: rgba(255,255,255,0.72);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
}

.lp-compare-col--best{
  border-color: rgba(255,106,31,0.45);
  background: linear-gradient(180deg, rgba(255,106,31,0.12), rgba(16,16,18,0.55));
}
html[data-theme="light"] .lp-compare-col--best{
  background: linear-gradient(180deg, rgba(255,106,31,0.14), rgba(255,255,255,0.78));
  border-color: rgba(255,106,31,0.42);
}

.lp-compare-top{ margin-bottom: 10px; }
.lp-compare-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .01em;
  background: rgba(255,106,31,0.16);
  border: 1px solid rgba(255,106,31,0.35);
  color: rgba(255,255,255,0.92);
}
html[data-theme="light"] .lp-compare-badge{
  color: rgba(20,20,24,0.92);
}

.lp-compare-title{ font-weight: 980; letter-spacing: -0.01em; font-size: 18px; margin-top: 10px; }
.lp-compare-note{ margin-top: 6px; color: var(--muted); font-weight: 650; font-size: 13px; line-height: 1.35; }

.lp-compare-list{
  list-style:none;
  padding: 0;
  margin: 12px 0 0;
  display:grid;
  gap: 10px;
}
.lp-compare-list li{
  position:relative;
  padding-left: 26px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
}
.lp-compare-list li::before{
  content: "✓";
  position:absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,106,31,0.18);
  border: 1px solid rgba(255,106,31,0.32);
  color: rgba(255,255,255,0.92);
  font-weight: 1000;
  font-size: 12px;
}
html[data-theme="light"] .lp-compare-list li::before{
  color: rgba(20,20,24,0.92);
}

.lp-compare-list.is-muted li{
  color: var(--text-soft);
}
.lp-compare-list.is-muted li::before{
  content: "•";
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
}
html[data-theme="light"] .lp-compare-list.is-muted li::before{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.42);
}

/* Tighten top spacing on very small screens */
@media (max-width: 420px){
  .lp-hero{ padding-top: 4px; }
  .lp{ margin-top: -6px; }
}


/* === Landing: theme-swapped screenshots (light screens in dark theme) === */
.theme-show--dark{display:none;}
html[data-theme="dark"] .theme-show--light{display:none !important;}
html[data-theme="dark"] .theme-show--dark{display:block !important;}

/* Zmniejsz odstęp na górze landing (szczególnie mobile) */
.lp-section:first-of-type{padding-top:14px;}
@media (max-width: 576px){
  .lp-section:first-of-type{padding-top:10px; padding-bottom:22px;}
}

/* Wymuś brak "niebieskich" buttonów w landing */
.lp .btn-primary,
.lp a.btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.lp .btn-primary:hover,
.lp a.btn-primary:hover{
  filter: brightness(0.96);
}

/* Bootstrap focus ring (FAQ/accordion) w kolorze brand */
.lp .accordion-button:focus{
  box-shadow: 0 0 0 .15rem rgba(255, 107, 0, .25) !important;
  border-color: rgba(255, 107, 0, .55) !important;
}

/* ===== Landing tweaks (fallbacki + spójność brandu) ===== */
.landing-page .btn-primary{
  background: linear-gradient(135deg, var(--orange2), var(--orange));
  border-color: transparent;
  color: #fff;
}
.landing-page .btn-primary:hover{filter: brightness(1.02); color:#fff;}
.landing-page .btn-outline-primary{color: var(--orange2); border-color: rgba(240,87,45,.45);}
.landing-page .btn-outline-primary:hover{background: rgba(240,87,45,.10); color: var(--orange2);}

/* Landing: testimonials (nowy blok) */
.lp-testimonials{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top: 16px;}
@media (max-width: 991px){.lp-testimonials{grid-template-columns: 1fr;}}
.lp-testimonial{background: var(--lp-bg-1); border:1px solid var(--lp-bd); border-radius: 18px; padding: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.25);}
html[data-theme="light"] .lp-testimonial{box-shadow: 0 10px 28px rgba(0,0,0,.10);}
.lp-testimonial .top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.lp-testimonial .who{display:flex; align-items:center; gap:10px;}
.lp-testimonial .av{width:38px; height:38px; border-radius: 12px; display:grid; place-items:center; font-weight:900; background: rgba(240,87,45,.18); border:1px solid rgba(240,87,45,.28);}
.lp-testimonial .nm{font-weight:800; line-height:1.1;}
.lp-testimonial .rl{color: var(--muted-2); font-size:.82rem;}
.lp-testimonial .stars{letter-spacing:.08em; font-size:.92rem; color: rgba(255,255,255,.85);} 
html[data-theme="light"] .lp-testimonial .stars{color: rgba(0,0,0,.75);} 
.lp-testimonial .q{margin-top:10px; color: var(--muted); font-size: .95rem;}
.lp-testimonial .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.lp-testimonial .tag{font-size:.78rem; padding:6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05);} 
html[data-theme="light"] .lp-testimonial .tag{border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.03);} 


.lp-testimonials-carousel{position:relative}
.lp-testimonials-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:4px 2px 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lp-testimonials-track::-webkit-scrollbar{display:none}
.lp-testimonial{flex:0 0 calc((100% - 28px)/3); min-width:260px; scroll-snap-align:start}
@media (max-width: 992px){
  .lp-testimonial{flex-basis:calc((100% - 14px)/2)}
}
@media (max-width: 576px){
  .lp-testimonials-track{gap:12px}
  .lp-testimonial{flex-basis:88%}
}

/* === Landing: obramowania sekcji + device note + wyróżniony login === */
.landing-page section{ position: relative; }
.landing-page section + section{ margin-top: 18px; }

/* Panel tła dla sekcji */
.landing-page .lp-container{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 22px;
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 18px 60px rgba(17,17,17,.08);
}
.landing-page .lp-hero-shell .lp-container{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html[data-theme="dark"] .landing-page .lp-container{
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 22px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* "Masz konto? Zaloguj się" – widoczne, ale estetyczne */
.lp-link.lp-link--hi{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.65);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(17,17,17,.10);
}
.lp-link.lp-link--hi span{ font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .lp-link.lp-link--hi{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

/* Informacja: działa na laptop / smartfon / tablet */
.lp-device-note{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(17,17,17,.72);
  font-size: .98rem;
}
.lp-device-note-label{
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .85;
}
.lp-device-note-items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.lp-device-note .dot{ opacity: .35; }
html[data-theme="dark"] .lp-device-note{ color: rgba(255,255,255,.74); }
.lp-device-ico{ filter: saturate(1.1); }


/* Premium navbar typography (Apple-like) */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .brand-title{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, Arial, sans-serif;
  letter-spacing: .01em;
}
.navbar .nav-link{font-weight: 700;}

/* Navbar emoji icons */
/* Navbar premium SVG icons */
.nav-ico-wrap .nav-svg{ width:18px; height:18px; display:block; }
.theme-icon .ico-moon svg, .theme-icon .ico-sun svg{ width:18px; height:18px; display:block; }

.nav-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-.5px);
}
.theme-icon .ico-moon, .theme-icon .ico-sun{
  display:inline-flex;
  width: 24px;
  height: 24px;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
}


/* Ensure navbar typography is consistent (brand title, dropdowns, badges) */
.navbar.nav-brand *, .navbar.nav-brand .badge{ font-family: var(--font-nav) !important; }

/* Mobile navbar dropdown (e.g. "Funkcje") – centered and easy to tap */
@media (max-width: 1199.98px){
  /* Mobile/tablet: dropdowns inside the collapsed navbar should be FULL-WIDTH and centered */
  .navbar.nav-brand .navbar-collapse .dropdown-menu{
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: .35rem 0 .6rem !important;
    text-align: center;
    border-radius: 16px;
  }
  .navbar.nav-brand .navbar-collapse .dropdown-menu .dropdown-item{
    text-align: center;
  }
  /* Make the toggle itself look like the rest of the rows and keep it centered */
  .navbar.nav-brand .navbar-collapse .dropdown-toggle{
    width: 100%;
    text-align: center;
  }
}


/* --- FIX: LIVE bottom bar buttons 50/50 + readable labels on mobile --- */
.live-action-actions{
  display:flex;
  gap: 8px;
  align-items: stretch;
}
.live-action-actions > a,
.live-action-actions > form{
  flex: 1 1 0 !important;
  min-width: 0;
}
.live-action-actions > form{ display:flex; }
.live-action-actions > form > .btn{ flex: 1 1 auto; width:100%; }

.live-action-actions .btn{
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 10px 12px;
}

@media (max-width: 390px){
  .live-action-actions .btn{ font-size: 14px; padding: 10px 10px; }
}

/* --- FIX: Navbar dropdown inside collapse should not be clipped on touch/mobile --- */
@media (max-width: 1199.98px){
  .navbar .navbar-collapse .dropdown-menu{
    position: static !important;
    float: none !important;
    transform: none !important;
    width: 100%;
    margin-top: .25rem;
  }
}


/* Highlight item when opened from notification deep-link */
.me-cal-item.is-focused{
  outline: 2px solid rgba(255,140,0,0.85);
  box-shadow: 0 0 0 6px rgba(255,140,0,0.10);
}

/* === FIX: Landing trust pills centering + spacing (desktop) === */
.lp-hero .trust-strip{justify-items: stretch;}
.lp-hero .trust-strip .trust-item{
  justify-content: center !important;
  text-align: center !important;
}
@media (min-width: 980px){
  .lp-hero .trust-strip{margin-top: 16px;}
}


/* Compact gender selector (K/M) */
.cp-gender-inline{display:flex;gap:.35rem;align-items:center;justify-content:flex-start}
.cp-gender-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.cp-gender-pill input{position:absolute;opacity:0;pointer-events:none}
.cp-gender-pill span{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-weight:700;font-size:.9rem;line-height:1}
.cp-gender-pill input:checked + span{border-color:rgba(255,136,0,.9);background:rgba(255,136,0,.18)}

.cp-gender-compact{flex:0 0 auto;min-width:5.4rem}
.cp-gender-compact .form-label{white-space:nowrap}