/*
 * mobile-ui.css – Wspolny system komponentow mobilnych ICD Diagnostica.
 *
 * ZASADA: jedno zrodlo prawdy. Kazdy ekran telefonu (app, pacjenci,
 * klasyfikacja, landing) uzywa TYCH SAMYCH klas `.mui-*`. Zmiana tutaj
 * zmienia wyglad wszedzie – nie kopiuj tych regul do plikow stron.
 *
 * Zakres: WYLACZNIE telefon (max-width:760px). Powyzej progu plik nie
 * emituje ani jednej reguly, wiec wersja desktop jest nietykalna.
 *
 * Tokeny marki (--brand*) pochodza z css/style.css :root i sa zamrozone.
 * Kolory pewnosci (--conf-*) maja znaczenie kliniczne – nie na fiolet.
 */

@media (max-width: 760px) {

  :root {
    /* Skala mobilna – jedno miejsce na promienie, cienie i odstepy. */
    --mui-radius-sm: 10px;
    --mui-radius: 14px;
    --mui-radius-lg: 18px;
    --mui-gap: 12px;
    --mui-pad: 14px;
    --mui-card-bg: #ffffff;
    --mui-card-border: #e8eaf0;
    --mui-shadow: 0 1px 2px rgba(15,23,42,0.04);
    --mui-shadow-lift: 0 10px 28px rgba(15,23,42,0.14);
    --mui-ink: #0f172a;
    --mui-ink-soft: #64748b;
    --mui-ink-faint: #94a3b8;
    --mui-line: #eef0f5;
    --mui-page-bg: #f6f7fb;
  }

  /* ==========================================================
     1. Naglowek ekranu – tytul + zdanie wprowadzajace
     ========================================================== */
  .mui-head { margin: 2px 0 14px; }
  .mui-head-title {
    margin: 0 0 6px;
    font: 700 22px/1.2 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.02em;
    color: var(--mui-ink);
  }
  .mui-head-sub {
    margin: 0;
    font: 400 13px/1.5 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--mui-ink-soft);
  }

  /* ==========================================================
     2. Karta – podstawowy pojemnik tresci
     ========================================================== */
  .mui-card {
    background: var(--mui-card-bg);
    border: 1px solid var(--mui-card-border);
    border-radius: var(--mui-radius);
    box-shadow: var(--mui-shadow);
  }
  .mui-card--pad { padding: var(--mui-pad); }

  /* ==========================================================
     3. Notka informacyjna (fioletowy tint + ikona "i")
     ========================================================== */
  .mui-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border-radius: var(--mui-radius);
    background: #f4f0ff;
    border: 1px solid #e3d9ff;
    font: 400 12.5px/1.45 'Inter', system-ui, sans-serif;
    color: #4b3c73;
  }
  .mui-note-ico {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--brand, #7C44FD);
  }
  .mui-note b { font-weight: 700; color: #3a2a63; }
  /* Odnosnik akcji w notce – wlasna linia, strzalka po tekscie. */
  .mui-note-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: 700 12.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--brand, #7C44FD);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-note-cta::after { content: "\2192"; font-size: 13px; }
  .mui-note-cta:active { opacity: 0.6; }

  /* ==========================================================
     4. Naglowek sekcji ze zwijaniem
     ========================================================== */
  .mui-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 4px 2px;
    border: 0;
    background: none;
    font: 600 14px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-section-chev {
    flex: 0 0 auto;
    color: var(--mui-ink-faint);
    transition: transform 0.18s ease;
  }
  .mui-section.is-collapsed .mui-section-chev { transform: rotate(-90deg); }
  .mui-section-body { margin-top: 10px; }
  .mui-section.is-collapsed .mui-section-body { display: none; }
  /* Kreska rozdzielajaca w sekcji - znika razem ze zwinieta trescia. */
  .mui-sep { height: 1px; margin: 14px 0 0; background: var(--mui-line); }
  .mui-section.is-collapsed .mui-sep { display: none; }

  /* ==========================================================
     5. Kafle 2-kolumnowe (np. czas trwania / liczba epizodow)
     ========================================================== */
  .mui-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* ==========================================================
     6. Zakladki segmentowe (podkreslenie aktywnej)
     ========================================================== */
  .mui-seg {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--mui-line);
  }
  .mui-seg-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: 600 12.5px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-seg-btn.is-active {
    color: var(--brand, #7C44FD);
    border-bottom-color: var(--brand, #7C44FD);
  }
  /* Wyszarzona – zakladka istnieje, ale jest niedostepna. */
  .mui-seg-btn:disabled,
  .mui-seg-btn.is-disabled {
    color: var(--mui-ink-faint);
    cursor: default;
    opacity: 0.65;
  }
  .mui-seg-btn svg { flex: 0 0 auto; }

  /* ==========================================================
     7. Stan pusty – ikona w kregu, tytul, zdanie, przycisk
     ========================================================== */
  .mui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 18px 26px;
  }
  /* display:flex bije domyslne [hidden] - stan pusty musi znikac po dodaniu tresci. */
  .mui-empty[hidden] { display: none; }
  .mui-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #f4f0ff;
    color: var(--brand, #7C44FD);
  }
  .mui-empty-ico img { width: 40px; height: 40px; }
  .mui-empty-title {
    margin: 0 0 6px;
    font: 700 16px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
  }
  .mui-empty-sub {
    margin: 0 0 16px;
    max-width: 30ch;
    font: 400 12.8px/1.5 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
  }

  /* ==========================================================
     8. Przyciski
     ========================================================== */
  .mui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--mui-card-border);
    background: #fff;
    font: 600 13px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-btn:active { transform: scale(0.985); }
  .mui-btn--primary {
    border-color: transparent;
    background: var(--brand, #7C44FD);
    color: #fff;
  }
  .mui-btn--block { width: 100%; }
  .mui-btn--danger { color: #dc2626; border-color: #fecaca; }
  .mui-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Kwadratowy przycisk-ikona przy polu wyszukiwania */
  .mui-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--mui-card-border);
    background: #fff;
    color: var(--brand, #7C44FD);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-icon-btn:active { background: #f4f0ff; }

  /* ==========================================================
     9. Szkielet (placeholder ladowania / brakujacych rekordow)
     ========================================================== */
  .mui-skel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    /* Ton z rodziny marki - szary #eef1f6 ginal na lawendowym tle strony. */
    background: rgba(124,68,253,0.10);
  }
  .mui-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
    animation: mui-skel-sweep 1.5s infinite;
  }
  @keyframes mui-skel-sweep { 100% { transform: translateX(100%); } }
  @media (prefers-reduced-motion: reduce) {
    .mui-skel::after { animation: none; }
  }

  /* ==========================================================
     10. Panel wysuwany z lewej (szybki dostep / "wiecej")
     ========================================================== */
  .mui-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(15,23,42,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .mui-panel-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .mui-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 11001;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: var(--mui-shadow-lift);
    transform: translateX(-102%);
    transition: transform 0.26s cubic-bezier(0.22,0.61,0.36,1);
    overscroll-behavior: contain;
  }
  .mui-panel.is-open { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .mui-panel, .mui-panel-backdrop { transition: none; }
  }

  .mui-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 14px 12px;
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .mui-panel-brand { display: block; text-decoration: none; }
  /* Plik z logo ma z lewej pas przezroczystosci (15 z 458 punktow szerokosci),
     wiec sam znak zaczynal sie dalej niz podpis pod nim. Ujemny margines
     rowny temu pasowi po przeskalowaniu wyrownuje oba do jednej krawedzi:
     15 / 76 wysokosci pliku * 26px = 5,1px. */
  .mui-panel-brand img { display: block; height: 26px; width: auto; margin-left: -5.1px; }
  .mui-panel-tagline {
    margin: 5px 0 0;
    font: 400 11.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
  }
  .mui-panel-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--mui-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-panel-close:active { background: #f1f3f8; }

  .mui-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 8px;
  }
  .mui-panel-foot {
    flex: 0 0 auto;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mui-line);
  }

  /* Konto zalogowanego uzytkownika na szczycie panelu */
  .mui-panel-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin: 0 0 6px;
    border-radius: var(--mui-radius);
    background: #f7f8fc;
    text-decoration: none;
    color: inherit;
  }
  .mui-panel-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand, #7C44FD);
    color: #fff;
    font: 700 14px/1 'Inter', system-ui, sans-serif;
    overflow: hidden;
  }
  .mui-panel-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mui-panel-user-meta { min-width: 0; flex: 1 1 auto; }
  .mui-panel-user-name {
    display: block;
    font: 700 13.5px/1.25 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mui-panel-user-sub {
    display: block;
    font: 400 11.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Wiersz listy w panelu */
  .mui-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 7px 12px;
    border: 0;
    border-radius: var(--mui-radius-sm);
    background: none;
    text-align: left;
    text-decoration: none;
    font: 500 13.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-row:active { background: #f1f3f8; }
  .mui-row-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: var(--brand, #7C44FD);
  }
  .mui-row-label { flex: 1 1 auto; min-width: 0; }
  .mui-row-chev { flex: 0 0 auto; color: var(--mui-ink-faint); }
  .mui-row.is-current {
    background: #f4f0ff;
    color: var(--brand-deep, #5516D8);
    font-weight: 700;
  }
  .mui-row-tag {
    display: block;
    font: 500 10.5px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
  }
  .mui-row.danger, .mui-row.danger .mui-row-ico { color: #dc2626; }
  /* Pozycja wyszarzona - widoczna, ale nieczynna. */
  .mui-row.is-off,
  .mui-row.is-off .mui-row-ico {
    color: var(--mui-ink-faint);
    cursor: default;
  }
  .mui-row.is-off { opacity: 0.6; }
  .mui-row.is-off:active { background: none; }

  /* Podpis grupy pozycji w panelu - oddziela sekcje konta od nawigacji. */
  .mui-panel-label {
    padding: 2px 12px 6px;
    font: 700 10px/1.2 'Inter', system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mui-ink-faint);
  }

  .mui-panel-sep {
    height: 1px;
    margin: 8px 12px;
    background: var(--mui-line);
  }

  /* Karta planu Clinical */
  .mui-plan-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 10px 2px 4px;
    padding: 12px;
    border-radius: var(--mui-radius);
    background: #f4f0ff;
    border: 1px solid #e3d9ff;
    text-decoration: none;
    color: inherit;
  }
  .mui-plan-ico { flex: 0 0 auto; color: var(--brand, #7C44FD); }
  .mui-plan-meta { flex: 1 1 auto; min-width: 0; }
  .mui-plan-title {
    display: block;
    font: 700 13px/1.25 'Inter', system-ui, sans-serif;
    color: #2f2059;
  }
  .mui-plan-sub {
    display: block;
    margin-top: 2px;
    font: 400 11.3px/1.35 'Inter', system-ui, sans-serif;
    color: #6b5f8c;
  }
  .mui-plan-card.is-active {
    background: #ecfdf5;
    border-color: #a7f3d0;
  }
  .mui-plan-card.is-active .mui-plan-ico { color: #047857; }
  .mui-plan-card.is-active .mui-plan-title { color: #065f46; }
  .mui-plan-card.is-active .mui-plan-sub { color: #047857; }

  /* Para przyciskow auth */
  .mui-auth-row { display: flex; gap: 8px; margin: 0 0 2px; }
  .mui-auth-row .mui-btn { flex: 1 1 0; padding: 10px 8px; font-size: 12.5px; }

  /* Wybor jezyka */
  .mui-lang-row { display: flex; gap: 8px; margin: 8px 0 8px; }
  .mui-lang-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: var(--mui-radius-sm);
    border: 1px solid var(--mui-card-border);
    background: #fff;
    font: 500 12.5px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-lang-btn.is-active {
    border-color: var(--brand, #7C44FD);
    color: var(--brand-deep, #5516D8);
    font-weight: 700;
  }
  .mui-lang-flag { width: 17px; height: 12px; border-radius: 2px; }

  /* Wiersz prawny wysrodkowany - nazwa marki stoi juz w naglowku panelu. */
  .mui-panel-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 400 10.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
  }
  .mui-panel-legal a { color: var(--mui-ink-faint); text-decoration: none; }
  .mui-panel-legal-sep { color: var(--mui-ink-faint); opacity: 0.6; }
  .mui-panel-legal a:active { color: var(--brand, #7C44FD); }

  /* Panel blokuje przewijanie strony pod spodem. */
  body.mui-panel-open { overflow: hidden; }

  /* ==========================================================
     11. Pole wyszukiwania
     ========================================================== */
  .mui-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--mui-card-bg);
    border: 1px solid var(--mui-card-border);
    box-shadow: var(--mui-shadow);
  }
  .mui-searchbar > svg { flex: 0 0 auto; color: var(--mui-ink-faint); }
  .mui-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font: 400 13.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
  }
  .mui-searchbar input::placeholder { color: var(--mui-ink-faint); }

  /* ==========================================================
     12. Pigulki filtrow – wiersz przyciskow nad lista
     ========================================================== */
  .mui-pills { display: flex; align-items: center; gap: 8px; }
  .mui-pill {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--mui-card-border);
    background: var(--mui-card-bg);
    font: 600 12px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-pill > svg { flex: 0 0 auto; color: var(--mui-ink-soft); }
  .mui-pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mui-pill.is-active { border-color: var(--brand, #7C44FD); color: var(--brand-deep, #5516D8); }
  .mui-pill.is-active > svg { color: var(--brand, #7C44FD); }
  .mui-pill-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand, #7C44FD);
    color: #fff;
    font: 700 10.5px/1 'Inter', system-ui, sans-serif;
  }
  .mui-pill-chev { flex: 0 0 auto; color: var(--mui-ink-faint); }
  /* display:inline-flex bije domyslne [hidden] – licznik znika przy zerze. */
  .mui-pill-count[hidden] { display: none !important; }
  /* Natywny wybor lezy przezroczysty na pigulce – telefon otwiera wlasny picker
     zamiast budowanej listy. 16px, bo przy mniejszym iOS przybliza widok. */
  .mui-pill-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    background: none;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  /* ==========================================================
     13. Chipy aktywnych filtrow
     ========================================================== */
  .mui-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .mui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px 5px 10px;
    border-radius: 999px;
    background: #f1f3f8;
    border: 1px solid #e6e9f0;
    font: 500 11.5px/1.2 'Inter', system-ui, sans-serif;
    color: #475569;
  }
  .mui-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #64748b;
    font: 700 11px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-chip-x:active { background: #e2e6ee; }
  .mui-chips-clear {
    padding: 4px 6px;
    border: 0;
    background: none;
    font: 700 11.5px/1.2 'Inter', system-ui, sans-serif;
    color: var(--brand, #7C44FD);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* ==========================================================
     14. Linia licznika pozycji
     ========================================================== */
  .mui-count { font: 500 11.5px/1.35 'Inter', system-ui, sans-serif; color: var(--mui-ink-soft); }

  /* ==========================================================
     15. Plakietka statusu z kropka
     ========================================================== */
  .mui-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font: 600 10px/1.25 'Inter', system-ui, sans-serif;
    white-space: nowrap;
  }
  .mui-badge-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .mui-badge--ok    { background: #ecfdf5; color: #047857; }
  .mui-badge--warn  { background: #fef6e7; color: #a16207; }
  .mui-badge--muted { background: #f1f3f8; color: #64748b; }
  .mui-badge--brand { background: #f4f0ff; color: var(--brand-deep, #5516D8); }

  /* ==========================================================
     16. Wiersz pacjenta – karta listy
     ========================================================== */
  .mui-plrow {
    display: grid;
    /* Kolumna statusu ma twardy sufit szerokosci – bez niego dluga plakietka
       i nazwa diagnozy zjadaly miejsce imienia pacjenta. */
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 36%) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: var(--mui-radius);
    border: 1px solid var(--mui-card-border);
    background: var(--mui-card-bg);
    box-shadow: var(--mui-shadow);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-plrow + .mui-plrow { margin-top: 10px; }
  .mui-plrow--wide { grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto; }
  .mui-plrow:active { background: #fafbff; }
  .mui-plrow-av {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ede9fe;
    color: var(--brand-deep, #5516D8);
    font: 700 12.5px/1 'Inter', system-ui, sans-serif;
  }
  .mui-plrow-main { min-width: 0; }
  .mui-plrow-name {
    display: block;
    font: 700 13.5px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mui-plrow-meta {
    display: block;
    margin-top: 3px;
    font: 400 11.5px/1.35 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
  }
  .mui-plrow-visit {
    display: block;
    margin-top: 2px;
    font: 400 10.5px/1.35 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mui-plrow-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
  }
  .mui-plrow-diag {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 500 11px/1.35 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
    text-align: right;
  }
  .mui-plrow-diag.is-empty { color: var(--mui-ink-faint); }
  .mui-plrow-chev {
    align-self: center;
    color: var(--mui-ink-faint);
    font: 400 17px/1 'Inter', system-ui, sans-serif;
  }
  /* Puste miejsce listy – nie udaje ladowania, tylko trzyma wysokosc karty.
     Nieklikalne i wyciszone, zeby nikt nie wzial go za rekord pacjenta. */
  .mui-plrow--skel { pointer-events: none; opacity: 0.5; cursor: default; }
  .mui-plrow--skel .mui-plrow-av { background: #eef1f6; }
  .mui-plrow-skelline { display: block; height: 10px; border-radius: 6px; }
  .mui-plrow-skelline + .mui-plrow-skelline { margin-top: 7px; }
  .mui-plrow-skelside { width: 86px; height: 16px; border-radius: 999px; }

  /* ==========================================================
     17. Zakladki segmentowe – wariant pigulkowy
     ========================================================== */
  .mui-seg--pills { gap: 6px; border-bottom: 0; }
  .mui-seg--pills .mui-seg-btn {
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid var(--mui-card-border);
    border-radius: 999px;
    background: var(--mui-card-bg);
    font-size: 12px;
  }
  .mui-seg--pills .mui-seg-btn.is-active {
    background: var(--brand, #7C44FD);
    border-color: transparent;
    color: #fff;
  }

  /* ==========================================================
     18. Tryb ciemny – panel i karty
     ========================================================== */
  body.dark-mode {
    --mui-card-bg: #161825;
    --mui-card-border: rgba(96,165,250,0.16);
    --mui-ink: #edf4ff;
    --mui-ink-soft: #94a3b8;
    --mui-line: rgba(96,165,250,0.14);
    --mui-page-bg: #0f111a;
  }
  body.dark-mode .mui-panel { background: #12141f; }
  body.dark-mode .mui-panel-user,
  body.dark-mode .mui-row:active { background: rgba(148,163,184,0.10); }
  body.dark-mode .mui-btn { background: #161825; color: #edf4ff; }
  body.dark-mode .mui-lang-btn { background: #161825; color: #edf4ff; }
  body.dark-mode .mui-skel { background: rgba(148,163,184,0.16); }
  body.dark-mode .mui-searchbar,
  body.dark-mode .mui-pill,
  body.dark-mode .mui-plrow { background: #161825; }
  body.dark-mode .mui-plrow:active { background: rgba(148,163,184,0.10); }
  body.dark-mode .mui-chip {
    background: rgba(148,163,184,0.12);
    border-color: rgba(96,165,250,0.16);
    color: #cbd5e1;
  }
  body.dark-mode .mui-badge--muted { background: rgba(148,163,184,0.14); color: #cbd5e1; }
  body.dark-mode .mui-plrow--skel .mui-plrow-av { background: rgba(148,163,184,0.16); }
}

/* Powyzej progu telefonu komponenty mobilne nie istnieja – gdyby jakas
   strona zostawila znacznik w DOM, ma byc bezwzglednie niewidoczny. */
@media (min-width: 761px) {
  .mui-panel, .mui-panel-backdrop { display: none !important; }
}

/* ======================================================================
   12. Chrome premium telefonu - tlo, oszroniony topbar, oszroniony dolny pasek
   Jedno zrodlo prawdy dla KAZDEJ strony mobilnej. Zmiana tutaj zmienia
   wyglad paskow wszedzie. Efekt "oszronienia" to blur + saturacja tla,
   nie polprzezroczyste szklo - tlo pod paskiem ma byc rozmyte i rozjasnione.
   ====================================================================== */
@media (max-width: 760px) {

  /* --- tlo strony: chlodny lawendowy gradient z miekkimi poswiatami w rogach.
     Rysowane na ::before <body>, zeby nie tworzyc dodatkowego wezla w DOM
     i nie przewijac sie razem z trescia. --- */
  body.mob-shell {
    background: linear-gradient(168deg, #f8f6ff 0%, #f4f4fd 46%, #f1f3fb 100%) !important;
  }
  body.mob-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(58% 38% at 8% -4%, rgba(124,68,253,0.16) 0%, rgba(124,68,253,0) 68%),
      radial-gradient(46% 32% at 104% 6%, rgba(180,81,255,0.13) 0%, rgba(180,81,255,0) 70%),
      radial-gradient(70% 40% at 96% 100%, rgba(124,68,253,0.10) 0%, rgba(124,68,253,0) 72%);
  }
  body.dark-mode.mob-shell {
    background: linear-gradient(168deg, #12121c 0%, #0f1018 60%, #0d0e15 100%) !important;
  }
  body.dark-mode.mob-shell::after {
    background:
      radial-gradient(58% 38% at 8% -4%, rgba(124,68,253,0.22) 0%, rgba(124,68,253,0) 68%),
      radial-gradient(46% 32% at 104% 6%, rgba(180,81,255,0.16) 0%, rgba(180,81,255,0) 70%);
  }

  /* --- oszroniony pasek gorny --- */
  body.mob-shell #mob-topbar {
    height: calc(60px + env(safe-area-inset-top));
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    gap: 8px;
    background: rgba(255,255,255,0.74) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: 0 0 22px 22px;
    box-shadow:
      0 6px 26px rgba(15,23,42,0.07),
      inset 0 -1px 0 rgba(124,68,253,0.06) !important;
  }
  body.dark-mode.mob-shell #mob-topbar {
    background: rgba(22,24,37,0.72) !important;
    border-bottom-color: rgba(148,163,184,0.14) !important;
    box-shadow: 0 6px 26px rgba(0,0,0,0.45) !important;
  }
  /* Logo mniejsze - po prawej stoja teraz cztery kontrolki (dzwonek, jezyk,
     konto) i przy 27px przycisk konta wychodzil poza krawedz ekranu. */
  /* Logo ustepuje kontrolkom: na waskich ekranach kurczy sie zamiast wypychac
     przycisk konta poza krawedz. */
  body.mob-shell .mob-topbar-logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  body.mob-shell .mob-topbar-logo-img {
    height: 27px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  /* Okragly przycisk paska: cofanie i konto. Ten sam ksztalt, rozny znak. */
  .mui-bar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(124,68,253,0.16);
    background: rgba(255,255,255,0.86);
    color: var(--brand-deep, #5516D8);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
    transition: transform 0.14s ease, background 0.14s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-bar-btn:active { transform: scale(0.94); background: #f4f0ff; }
  /* Przycisk konta: gradient marki odciety od oszronionego paska bialym
     pierscieniem, z polyskiem u gory i glebszym cieniem pod spodem. */
  .mui-bar-btn--accent {
    position: relative;
    width: 40px;
    height: 40px;
    border: 0;
    background: linear-gradient(150deg, #6E35FF 0%, #8B3DFF 52%, #B451FF 100%);
    color: #fff;
    overflow: hidden;
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.92),
      0 7px 18px rgba(124,68,253,0.38),
      0 1px 2px rgba(15,23,42,0.10),
      inset 0 1px 0 rgba(255,255,255,0.42);
  }
  /* Polysk - miekka poswiata w gornej czesci kola, nie twardy blik. */
  .mui-bar-btn--accent::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(72% 52% at 32% 8%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 68%);
  }
  .mui-bar-btn--accent svg { position: relative; z-index: 1; }
  /* Zdjecie profilowe wypelnia caly przycisk konta; bez zdjecia zostaje
     domyslna sylwetka na fioletowym kole. */
  .mui-bar-btn--accent .mob-bar-avatar {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
  }
  .mui-bar-btn--accent:active {
    transform: scale(0.94);
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.92),
      0 4px 12px rgba(124,68,253,0.34),
      inset 0 1px 0 rgba(255,255,255,0.30);
  }
  body.dark-mode .mui-bar-btn--accent {
    box-shadow:
      0 0 0 3px rgba(22,24,37,0.92),
      0 7px 18px rgba(124,68,253,0.34),
      inset 0 1px 0 rgba(255,255,255,0.24);
  }
  .mui-bar-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  body.dark-mode .mui-bar-btn {
    background: rgba(148,163,184,0.12);
    border-color: rgba(148,163,184,0.20);
    color: #ddd6fe;
  }
  /* Grupa kontrolek po prawej stronie paska. */
  .mui-bar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
  /* Picker jezyka zwezony: kod jezyka wystarczy, strzalka tylko sugeruje wybor. */
  body.mob-shell .mui-bar-actions .mob-lang-pick-btn { padding: 6px 8px; gap: 5px; }
  body.mob-shell .mui-bar-actions .mob-lang-pick-chev { font-size: 7px; }

  /* Dzwonek powiadomien - mniejszy od przycisku konta, bo to sygnal, nie akcja
     glowna. Widoczny dopiero po zalogowaniu (atrybut hidden zdejmuje shell). */
  .mui-bar-bell {
    position: relative;
    width: 36px;
    height: 36px;
    color: var(--brand-deep, #5516D8);
  }
  .mui-bar-bell[hidden] { display: none; }
  .mui-bar-bell.has-unread { border-color: rgba(124,68,253,0.34); }
  .mui-bar-bell-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font: 700 10px/1 'Inter', system-ui, sans-serif;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.92);
  }
  .mui-bar-bell-count[hidden] { display: none; }
  body.dark-mode .mui-bar-bell-count { box-shadow: 0 0 0 2px rgba(22,24,37,0.92); }
  /* Picker jezyka mial wlasne margin-left:auto na potrzeby starego ukladu -
     w grupie kontrolek rozpychalby ja od srodka. Po prawej dostaje taki sam
     odstep, jaki dzieli przycisk cofania od logo (8px), zeby nie zlewal sie
     z para dzwonek-konto. */
  .mui-bar-actions .mob-lang-pick { margin-left: 0; margin-right: 2px; }

  /* Pasek SEO (.sx-topbar) ustepuje wspolnemu paskowi powloki - na telefonie
     ma byc jeden pasek, ten sam na kazdej stronie. */
  body.mob-shell .sx-topbar { display: none !important; }
  /* Wysokosc paska urosla z 56 na 60px, a dolny ma 72px zamiast 76px.
     Selektor z `html` z przodu, bo css/mobile-shell.css jest ladowany pozniej
     i jego reguly z !important wygralyby przy rownej mocy. */
  html body.mob-shell {
    padding-top: 60px !important;
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
    padding-bottom: 92px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  /* Klasyfikacja ma pod paskiem jeszcze przelacznik trybu (52px). */
  html body.mob-shell.mob-tab-klasyfikacja {
    /* pasek 60px + odstep 8px + pigulka wyboru 40px */
    padding-top: 112px !important;
    padding-top: calc(112px + env(safe-area-inset-top)) !important;
  }

  /* --- oszroniony pasek dolny --- */
  body.mob-shell #mob-bottomnav {
    height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,0.78) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 26px rgba(15,23,42,0.08) !important;
  }
  body.dark-mode.mob-shell #mob-bottomnav {
    background: rgba(22,24,37,0.76) !important;
    border-top-color: rgba(148,163,184,0.14) !important;
    box-shadow: 0 -6px 26px rgba(0,0,0,0.45) !important;
  }
  /* Otwarta klawiatura: pasek schodzi z drogi, zeby nie stanac nad polem,
     w ktorym uzytkownik wlasnie pisze. Klase ustawia js/mobile-shell.js. */
  body.mob-shell.keyboard-open #mob-bottomnav {
    transform: translateY(110%);
    pointer-events: none;
  }
  body.mob-shell #mob-bottomnav { transition: transform 0.18s ease; }
  @media (prefers-reduced-motion: reduce) {
    body.mob-shell #mob-bottomnav { transition: none; }
  }
  /* Bez paska tresc nie potrzebuje zapasu na jego wysokosc. */
  html body.mob-shell.keyboard-open {
    padding-bottom: 16px !important;
  }

  /* Kreska uchwytu jak w systemie - domyka pasek od dolu. */
  body.mob-shell #mob-bottomnav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(6px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: 116px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15,23,42,0.16);
  }
  body.dark-mode.mob-shell #mob-bottomnav::after { background: rgba(226,232,240,0.22); }
  body.mob-shell .mob-nav-tab {
    padding: 8px 4px 16px;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #94a3b8;
  }
  body.mob-shell .mob-nav-tab svg { width: 21px; height: 21px; }
  body.mob-shell .mob-nav-tab:active { background: transparent; }
  body.mob-shell .mob-nav-tab.active { color: var(--brand, #7C44FD); }
  body.mob-shell .mob-nav-tab.active svg { transform: translateY(-1px); }

  /* --- karty premium: bielsze tlo, miekki cien, wiekszy promien --- */
  .mui-card--soft {
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  }
  body.dark-mode .mui-card--soft {
    background: rgba(22,24,37,0.86);
    border-color: rgba(148,163,184,0.14);
    box-shadow: 0 6px 22px rgba(0,0,0,0.4);
  }

  /* --- glowny przycisk akcji: gradient marki, cien pod spodem, dwie linie --- */
  .mui-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 60px;
    padding: 12px 18px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand-grad-start, #5525FF), var(--brand-grad-end, #B451FF));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(124,68,253,0.32);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-cta:active { transform: translateY(1px); box-shadow: 0 6px 18px rgba(124,68,253,0.28); }
  .mui-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 700 15px/1.2 'Inter', system-ui, sans-serif;
  }
  .mui-cta-sub { font: 400 11.5px/1.3 'Inter', system-ui, sans-serif; opacity: 0.82; }
  .mui-cta:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; }
  .mui-cta:disabled:active { transform: none; }
}

/* ======================================================================
   13. Komponenty ekranu zadaniowego (makieta premium)
   Naglowek wysrodkowany z nadtytulem, pasek krokow, pole wyszukiwania
   z akcja w srodku, wiersz wyboru na pelna szerokosc, pierscien postepu.
   ====================================================================== */
@media (max-width: 760px) {

  /* --- naglowek wysrodkowany --- */
  .mui-head--center { text-align: center; margin: 6px 0 18px; }
  .mui-kicker {
    display: block;
    margin-bottom: 8px;
    font: 700 10px/1.2 'Inter', system-ui, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand, #7C44FD);
    opacity: 0.85;
  }
  .mui-head--center .mui-head-title { font-size: 26px; margin-bottom: 8px; }
  .mui-head--center .mui-head-sub { max-width: 32ch; margin: 0 auto; }

  /* --- pasek krokow --- */
  .mui-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 4px 0 20px;
  }
  .mui-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    width: 78px;
  }
  .mui-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(124,68,253,0.16);
    color: var(--mui-ink-faint);
    font: 700 13px/1 'Inter', system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
  }
  .mui-step-label {
    font: 500 11px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
  }
  .mui-step.is-active .mui-step-dot {
    background: linear-gradient(135deg, var(--brand-grad-start, #5525FF), var(--brand-grad-end, #B451FF));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 5px 16px rgba(124,68,253,0.34);
  }
  .mui-step.is-active .mui-step-label { color: var(--brand-deep, #5516D8); font-weight: 700; }
  /* Krok zaliczony - fioletowy obrys i znak, ale bez pelnego wypelnienia,
     zeby biezacy krok pozostal najmocniejszym punktem paska. */
  .mui-step.is-done .mui-step-dot {
    background: rgba(124,68,253,0.12);
    border-color: rgba(124,68,253,0.32);
    color: var(--brand-deep, #5516D8);
  }
  .mui-step.is-done .mui-step-label { color: var(--brand-deep, #5516D8); }
  /* Kreska laczaca kroki - stoi na wysokosci srodka kolka. */
  .mui-step-line {
    flex: 1 1 auto;
    height: 1.5px;
    margin-top: 17px;
    min-width: 12px;
    background: rgba(124,68,253,0.18);
    border-radius: 999px;
  }

  /* --- pole wyszukiwania z akcja w srodku --- */
  .mui-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 6px 22px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  }
  .mui-field-ico { flex: 0 0 auto; color: var(--brand, #7C44FD); }
  .mui-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: none;
    font: 400 14px/1.3 'Inter', system-ui, sans-serif !important;
    color: var(--mui-ink);
  }
  .mui-field input::placeholder { color: var(--mui-ink-faint); }
  body.dark-mode .mui-field {
    background: rgba(22,24,37,0.9);
    border-color: rgba(148,163,184,0.14);
  }

  /* --- wiersz wyboru na pelna szerokosc (kafel ikony + tytul + podpis) --- */
  .mui-pickrow {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 6px 22px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-pickrow:active { transform: scale(0.995); }
  .mui-pickrow-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(124,68,253,0.14), rgba(180,81,255,0.10));
    color: var(--brand, #7C44FD);
  }
  .mui-pickrow-tile img { width: 26px; height: 26px; }
  .mui-pickrow-body { flex: 1 1 auto; min-width: 0; }
  .mui-pickrow-title {
    display: block;
    font: 600 14px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
  }
  .mui-pickrow-sub {
    display: block;
    margin-top: 2px;
    font: 400 12px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
  }
  .mui-pickrow-chev { flex: 0 0 auto; color: var(--mui-ink-faint); }
  body.dark-mode .mui-pickrow {
    background: rgba(22,24,37,0.86);
    border-color: rgba(148,163,184,0.14);
  }

  /* --- karta licznika z pierscieniem postepu --- */
  .mui-ringcard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 6px 22px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
  }
  .mui-ring { flex: 0 0 auto; position: relative; width: 74px; height: 74px; }
  .mui-ring svg { transform: rotate(-90deg); display: block; }
  .mui-ring-track { stroke: rgba(124,68,253,0.12); }
  /* Droga do wymaganego minimum: blady czerwony pod spodem pokazuje, ile
     jeszcze zostalo, a mocny czerwony wypelnia go objaw po objawie. */
  .mui-ring-need {
    stroke: rgba(225,29,72,0.18);
    stroke-linecap: round;
    transition: stroke-dasharray 0.35s ease;
  }
  /* Luk objawow wymaganych do uruchomienia analizy - czerwony, bo jest
     warunkiem, nie postepem. */
  .mui-ring-req {
    stroke: #e11d48;
    stroke-linecap: round;
    transition: stroke-dasharray 0.35s ease;
  }
  /* Luk objawow ponad minimum - kolory marki. */
  .mui-ring-bar {
    stroke: url(#muiRingGrad);
    stroke-linecap: round;
    transition: stroke-dasharray 0.35s ease, stroke-dashoffset 0.35s ease;
  }
  .mui-ring-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 15px/1 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
  }
  .mui-ringcard-body { flex: 1 1 auto; min-width: 0; }
  .mui-ringcard-title {
    display: block;
    font: 600 14px/1.3 'Inter', system-ui, sans-serif;
    color: var(--mui-ink);
  }
  .mui-ringcard-sub {
    display: block;
    margin-top: 4px;
    font: 400 12px/1.45 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
  }
  /* Ile objawow brakuje do minimum - ten sam czerwony co luk na pierscieniu. */
  .mui-ringcard-req {
    display: block;
    margin-top: 3px;
    font: 700 12px/1.35 'Inter', system-ui, sans-serif;
    color: #e11d48;
  }
  .mui-ringcard-req[hidden] { display: none; }
  .mui-ringcard.is-short .mui-ring-val { color: #e11d48; }
  /* Komplet objawow: luk wymagany przestaje byc ostrzezeniem i robi sie
     zielony - czerwien niesie brak, nie osiagniety warunek. */
  .mui-ringcard:not(.is-short) .mui-ring-req { stroke: #059669; }
  body.dark-mode .mui-ringcard {
    background: rgba(22,24,37,0.86);
    border-color: rgba(148,163,184,0.14);
  }
  @media (prefers-reduced-motion: reduce) {
    .mui-ring-bar, .mui-ring-req, .mui-ring-need { transition: none; }
  }

  /* --- przelacznik dwustanowy w pigulce (np. ICD-11 / ICD-10) --- */
  .mui-switch {
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 18px rgba(15,23,42,0.06);
  }
  .mui-switch-btn {
    flex: 1 1 0;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: none;
    font: 600 13px/1.2 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-soft);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mui-switch-btn.is-active {
    background: linear-gradient(135deg, var(--brand-grad-start, #5525FF), var(--brand-grad-end, #B451FF));
    color: #fff;
    box-shadow: 0 5px 16px rgba(124,68,253,0.30);
  }
  body.dark-mode .mui-switch {
    background: rgba(22,24,37,0.8);
    border-color: rgba(148,163,184,0.14);
  }

  /* --- rozdzielacz z napisem posrodku --- */
  .mui-or {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 500 11.5px/1 'Inter', system-ui, sans-serif;
    color: var(--mui-ink-faint);
  }
  .mui-or::before, .mui-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(15,23,42,0.10);
  }
  body.dark-mode .mui-or::before,
  body.dark-mode .mui-or::after { background: rgba(148,163,184,0.18); }
}

/* ======================================================================
   14. Panel boczny - odswiezenie premium
   Ten sam jezyk co paski powloki: oszronione tlo, kafle ikon, pigulki,
   gradient marki na akcji glownej. Nadpisuje wyglad z sekcji 10.
   ====================================================================== */
@media (max-width: 760px) {

  .mui-panel {
    width: min(88vw, 340px);
    /* Lekki szron: tlo prawie kryjace, rozmycie tylko muska to, co pod nim.
       Mocne rozmycie zjadalo czytelnosc listy. */
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    backdrop-filter: blur(8px) saturate(130%);
    border-right: 1px solid rgba(255,255,255,0.75);
    border-radius: 0 26px 26px 0;
    box-shadow: 24px 0 60px rgba(15,23,42,0.16), 1px 0 0 rgba(255,255,255,0.5) inset;
  }
  body.dark-mode .mui-panel {
    background: rgba(18,20,31,0.86);
    border-right-color: rgba(148,163,184,0.16);
    box-shadow: 24px 0 60px rgba(0,0,0,0.55);
  }
  .mui-panel-backdrop { background: rgba(15,23,42,0.38); }

  /* --- naglowek --- */
  .mui-panel-head { padding: 14px 14px 10px; padding-top: calc(14px + env(safe-area-inset-top)); }
  /* Nizsze logo, wiec i pas przezroczystosci jest mniejszy: 15 / 76 * 23px. */
  .mui-panel-brand img { height: 23px; margin-left: -4.5px; }
  .mui-panel-tagline { margin-top: 3px; font-size: 10.5px; color: var(--mui-ink-faint); }
  .mui-panel-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(124,68,253,0.16);
    background: rgba(255,255,255,0.86);
    color: var(--brand-deep, #5516D8);
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
    transition: transform 0.14s ease, background 0.14s ease;
  }
  .mui-panel-close:active { transform: scale(0.94); background: #f4f0ff; }
  /* Panel ustawia fokus na tym przycisku po otwarciu, wiec przegladarka
     rysowala wokol niego czarna obwodke. Obrys zostaje tylko dla klawiatury. */
  .mui-panel-close:focus { outline: none; }
  .mui-panel-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,68,253,0.32);
  }
  body.dark-mode .mui-panel-close {
    background: rgba(148,163,184,0.12);
    border-color: rgba(148,163,184,0.20);
    color: #ddd6fe;
  }

  .mui-panel-body { padding: 0 10px 6px; }
  /* Kreska nad pierwsza pozycja menu - oddziela liste od naglowka panelu. */
  .mui-panel-body::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 2px 8px;
    background: linear-gradient(90deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.10) 50%, rgba(15,23,42,0) 100%);
  }
  body.dark-mode .mui-panel-body::before {
    background: linear-gradient(90deg, rgba(148,163,184,0) 0%, rgba(148,163,184,0.20) 50%, rgba(148,163,184,0) 100%);
  }

  /* --- karta zalogowanego uzytkownika ---
     Domyslnie zwykla, jasna karta. Fiolet zapala sie dopiero wtedy, gdy
     uzytkownik jest w ustawieniach konta - inaczej wygladala na wybrana
     wszedzie, mimo ze nigdzie nie prowadzila. */
  .mui-panel-user {
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: #f7f8fc;
    border: 1px solid var(--mui-line, #eef0f5);
    box-shadow: none;
  }
  .mui-panel-user.is-current {
    background: linear-gradient(140deg, rgba(124,68,253,0.10), rgba(180,81,255,0.07));
    border-color: rgba(124,68,253,0.22);
    box-shadow: 0 4px 16px rgba(15,23,42,0.05);
  }
  .mui-panel-avatar {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
    background: linear-gradient(150deg, #6E35FF 0%, #8B3DFF 52%, #B451FF 100%);
    box-shadow: 0 4px 12px rgba(124,68,253,0.32), inset 0 1px 0 rgba(255,255,255,0.4);
  }

  /* --- wiersze menu: ikona w kaflu, tlo dopiero pod palcem --- */
  .mui-row {
    gap: 10px;
    min-height: 40px;
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .mui-row-ico {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: rgba(124,68,253,0.08);
    border: 1px solid rgba(124,68,253,0.12);
    color: var(--brand, #7C44FD);
  }
  /* Ten sam wiersz na kazdej stronie. Landing dziedziczy po motywie Medikit
     `box-sizing: content-box`, wiec te same reguly dawaly tam 50 px, a w
     aplikacji 40 px. Wysokosc i kafel ikony liczymy wiec od krawedzi i
     wpisujemy wprost - wzorem jest wieksza wersja z landingu. */
  .mui-panel .mui-row { box-sizing: border-box; min-height: 50px; }
  .mui-panel .mui-row-ico { box-sizing: border-box; width: 31px; height: 31px; }
  .mui-row:active { background: rgba(124,68,253,0.07); }
  .mui-row.is-current {
    background: linear-gradient(135deg, rgba(124,68,253,0.13), rgba(180,81,255,0.09));
    box-shadow: inset 0 0 0 1px rgba(124,68,253,0.18);
  }
  .mui-row.is-current .mui-row-ico {
    background: linear-gradient(150deg, #6E35FF, #B451FF);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(124,68,253,0.30);
  }
  .mui-row.is-off .mui-row-ico {
    background: rgba(148,163,184,0.10);
    border-color: rgba(148,163,184,0.16);
  }
  .mui-row-tag { font-weight: 500; }
  body.dark-mode .mui-row-ico {
    background: rgba(124,68,253,0.18);
    border-color: rgba(148,163,184,0.16);
    color: #ddd6fe;
  }

  /* Podpis grupy pozycji w panelu - oddziela sekcje konta od nawigacji. */
  .mui-panel-label {
    padding: 2px 12px 6px;
    font: 700 10px/1.2 'Inter', system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mui-ink-faint);
  }

  .mui-panel-sep {
    margin: 6px 12px;
    background: linear-gradient(90deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.10) 50%, rgba(15,23,42,0) 100%);
  }
  body.dark-mode .mui-panel-sep {
    background: linear-gradient(90deg, rgba(148,163,184,0) 0%, rgba(148,163,184,0.20) 50%, rgba(148,163,184,0) 100%);
  }

  /* --- karta planu --- */
  .mui-plan-card {
    margin: 8px 2px 2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(124,68,253,0.12), rgba(180,81,255,0.08));
    border: 1px solid rgba(124,68,253,0.18);
    box-shadow: 0 6px 20px rgba(124,68,253,0.12);
  }
  .mui-plan-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(150deg, #6E35FF, #B451FF);
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,68,253,0.30);
  }
  .mui-plan-card.is-active {
    background: linear-gradient(140deg, rgba(16,185,129,0.14), rgba(52,211,153,0.08));
    border-color: rgba(16,185,129,0.26);
    box-shadow: 0 6px 20px rgba(16,185,129,0.14);
  }
  .mui-plan-card.is-active .mui-plan-ico {
    background: linear-gradient(150deg, #059669, #34d399);
    box-shadow: 0 4px 12px rgba(16,185,129,0.30);
  }

  /* --- stopka: akcja konta, jezyk, wiersz prawny --- */
  .mui-panel-foot {
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,0.6);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
  }
  body.dark-mode .mui-panel-foot {
    border-top-color: rgba(148,163,184,0.14);
    background: none;
  }
  /* Odnosniki w panelu nie sa tekstem w akapicie - podkreslenie tylko zasmieca. */
  .mui-panel a { text-decoration: none; }
  .mui-auth-row .mui-btn {
    min-height: 42px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
  }
  .mui-auth-row .mui-btn--primary {
    background: linear-gradient(135deg, #6E35FF, #B451FF);
    box-shadow: 0 8px 20px rgba(124,68,253,0.32);
  }
  .mui-auth-row .mui-btn:not(.mui-btn--primary) {
    background: rgba(255,255,255,0.9);
    border-color: rgba(124,68,253,0.16);
    color: var(--brand-deep, #5516D8);
    box-shadow: 0 2px 10px rgba(15,23,42,0.05);
  }
  /* Stopka panelu ma trzymac ten sam rytm niezaleznie od stanu konta: przycisk
     wylogowania jest tak samo wysoki jak para przyciskow goscia, wiec panel nie
     "skacze" po zalogowaniu. Para goscia dochodzi do 64 px sama, z wlasnego
     ukladu, dlatego rownamy tylko przycisk zalogowanego. */
  #mui-quick-account .mui-btn--danger { min-height: 64px; box-sizing: border-box; }
  .mui-btn--danger {
    min-height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.9);
    border-color: #fecdd3;
    color: #be123c;
    font-weight: 700;
  }

  /* Wybor jezyka jako para pigulek - aktywna w kolorach marki. */
  .mui-lang-btn {
    min-height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.9);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  }
  .mui-lang-btn.is-active {
    background: linear-gradient(135deg, rgba(124,68,253,0.12), rgba(180,81,255,0.09));
    border-color: rgba(124,68,253,0.28);
    box-shadow: 0 4px 14px rgba(124,68,253,0.14);
  }
  .mui-panel-legal { margin-top: 7px; font-size: 10px; }
  .mui-lang-row { margin: 6px 0; }

  /* --- przycisk pomocy: to samo kolo co przycisk konta w pasku ---
     js/help-fab.js wstrzykuje wlasne reguly z !important, wiec selektor musi
     miec wieksza moc (stad `html` z przodu). */
  /* Lzejszy niz przycisk konta - to pomoc, nie glowna akcja, wiec mniejszy
     okrag, cienszy pierscien i plytszy cien. */
  html body.mob-shell .help-fab {
    position: fixed;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    opacity: 0.92;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(150deg, #6E35FF 0%, #8B3DFF 52%, #B451FF 100%);
    color: #fff;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.9),
      0 4px 12px rgba(124,68,253,0.26),
      inset 0 1px 0 rgba(255,255,255,0.34);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
  }
  /* Polysk - ta sama miekka poswiata co na przycisku konta. */
  html body.mob-shell .help-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(72% 52% at 32% 8%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 68%);
  }
  html body.mob-shell .help-fab:active {
    transform: scale(0.94);
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.9),
      0 3px 9px rgba(124,68,253,0.24),
      inset 0 1px 0 rgba(255,255,255,0.26);
  }
  /* Na telefonie zostaje sam znak zapytania - podpis nie miesci sie w kole. */
  html body.mob-shell .help-fab .help-fab-label { display: none !important; }
  html body.mob-shell .help-fab .help-fab-icon {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    background: none;
    color: #fff;
    font: 800 15px/1 'Inter', system-ui, sans-serif;
  }
  html body.dark-mode.mob-shell .help-fab {
    box-shadow:
      0 0 0 2px rgba(22,24,37,0.9),
      0 4px 12px rgba(124,68,253,0.26),
      inset 0 1px 0 rgba(255,255,255,0.2);
  }
  html body.dark-mode.mob-shell .help-fab .help-fab-icon { background: none; color: #fff; }
  /* Podczas pisania przycisk schodzi z drogi razem z dolnym paskiem.
     Regula z js/help-fab.js przegrywa z powyzszym display, wiec powtarzamy ja
     tutaj z ta sama moc selektora. */
  html body.mob-shell.keyboard-open .help-fab { display: none !important; }
  /* Panel boczny przykrywa strone, wiec przycisk pomocy nie moze nad nim wisiec. */
  html body.mob-shell.mui-panel-open .help-fab { display: none !important; }
  /* Pelnoekranowy wybor klasyfikacji i okno pomocy przykrywaja strone -
     przycisk pomocy nie moze nad nimi wisiec. */
  html body.mob-shell.mit-shell-open .help-fab { display: none !important; }
  /* Okno pomocy nie oznacza sie na <body>, wiec pytamy o nie samo drzewo. */
  html body.mob-shell:has(#kl-help-modal.open) .help-fab { display: none !important; }
}

/* ======================================================================
   PIERWSZE MALOWANIE ZANIM WEJDZIE UKLAD TELEFONU
   Uklad telefonu sklada JavaScript (klasa .mob-shell na <body>), a to trwa
   okolo pol sekundy. Do tego czasu na ekranie stal przez chwile uklad
   komputerowy - gorny pasek strony i dwie kolumny drzewa. Tutaj to miejsce
   trzyma pusty blok, ktory ustepuje gotowemu ukladowi.

   Odsloniecie ma zapasowy wyzwalacz w samym CSS (opoznione dojscie
   animacji), wiec nawet gdy skrypt nie wstanie, strona pokaze sie sama.
   ====================================================================== */
@media (max-width: 760px) {
  @keyframes mui-prepaint-reveal { to { visibility: visible; } }

  body:not(.mob-shell) .settings-topbar,
  body:not(.mob-shell) #mob-kl-topbar,
  body:not(.mob-shell) #kl-layout > * {
    visibility: hidden;
    animation: mui-prepaint-reveal 0s linear 3.5s forwards;
  }

  /* Puste bloki stoja dokladnie tam, gdzie za chwile stanie ekran startowy,
     i zajmuja tyle samo miejsca (naglowek + pole szukania + wiersz
     przegladania). Dzieki temu gotowa tresc nie przesuwa reszty strony. */
  body:not(.mob-shell) #kl-layout {
    position: relative;
    margin-top: 316px;
    /* Zapas na wypadek, gdyby skrypt nie wstal: miejsce oddaje sie samo. */
    animation: mui-prepaint-margin 0s linear 3.5s forwards;
  }
  @keyframes mui-prepaint-margin { to { margin-top: 0; } }
  body:not(.mob-shell) #kl-layout::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: -304px;
    height: 64px;
    border-radius: 16px;
    background: rgba(124,68,253,0.10);
    box-shadow:
      0 84px 0 rgba(124,68,253,0.10),
      0 168px 0 rgba(124,68,253,0.09);
    animation: mui-prepaint-hide 0s linear 3.5s forwards;
  }
  @keyframes mui-prepaint-hide { to { opacity: 0; } }
}

/* Baza testow: gorny pasek strony ustepuje paskowi telefonu dopiero po
   zlozeniu ukladu, wiec do tego czasu trzymamy go poza wzrokiem. Warunek
   z #tdb-grid zawezaja regule do tej jednej strony - inne (landing,
   logowanie, cennik) zostaja przy swoim pasku. */
@media (max-width: 760px) {
  body:has(#tdb-grid):not(.mob-shell) .sx-topbar {
    visibility: hidden;
    animation: mui-prepaint-reveal 0s linear 3.5s forwards;
  }
}

/* ======================================================================
   TRYB ICD-10 NA STRONIE KLASYFIKACJI
   ICD-11 zostaje przy fiolecie marki, ICD-10 ma w calym serwisie blekit -
   wiec po przelaczeniu blekitnieje i pigulka wyboru, i tlo strony.
   Znacznik .mkl-icd10 na <body> stawia js/mobile-klasyfikacja.js.
   ====================================================================== */
@media (max-width: 760px) {
  body.mkl-on.mkl-icd10 #mob-tabswitch #kl-mode-icd10.is-active {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.30) !important;
  }
  body.mob-shell.mkl-icd10 {
    background: linear-gradient(168deg, #f2f7ff 0%, #eef4fd 48%, #eaf1fb 100%) !important;
  }
  body.mob-shell.mkl-icd10::after {
    background:
      radial-gradient(58% 38% at 8% -4%, rgba(37,99,235,0.15) 0%, rgba(37,99,235,0) 68%),
      radial-gradient(46% 32% at 104% 6%, rgba(96,165,250,0.16) 0%, rgba(96,165,250,0) 70%),
      radial-gradient(70% 40% at 96% 100%, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0) 72%);
  }
  body.dark-mode.mob-shell.mkl-icd10 {
    background: linear-gradient(168deg, #0f1626 0%, #0d1320 60%, #0b111c 100%) !important;
  }
  body.dark-mode.mob-shell.mkl-icd10::after {
    background:
      radial-gradient(58% 38% at 8% -4%, rgba(37,99,235,0.22) 0%, rgba(37,99,235,0) 68%),
      radial-gradient(46% 32% at 104% 6%, rgba(96,165,250,0.16) 0%, rgba(96,165,250,0) 70%);
  }
  /* Karta glownej kategorii i wiersz przegladania ida za blekitem. */
  body.mob-shell.mkl-icd10 .mui-pickrow-tile {
    background: rgba(37,99,235,0.10) !important;
    color: #2563eb !important;
  }
}

/* ======================================================================
   BRAKUJACE DANE PRZED ANALIZA
   Przycisk analizy jest zablokowany, dopoki nie ma objawow, czasu trwania i
   liczby epizodow. Zablokowany przycisk nie oddaje dotkniec, wiec przykrywa
   go przezroczysta warstwa: dotkniecie zapala brakujace pola na czerwono i
   pisze pod przyciskiem, co trzeba wybrac.
   ====================================================================== */
@media (max-width: 760px) {
  body.mdx-on #dx-start-btn-wrap { position: relative; }
  body.mdx-on .mdx-blok {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  body.mdx-on .mdx-blok[hidden] { display: none; }

  @keyframes mdx-brak-puls {
    0%   { box-shadow: 0 0 0 0 rgba(225,29,72,0.30); }
    100% { box-shadow: 0 0 0 10px rgba(225,29,72,0); }
  }
  html body.mdx-on .mdx-brak {
    border-color: #e11d48 !important;
    background: #fff5f6 !important;
    animation: mdx-brak-puls 0.9s ease-out 2;
  }
  html body.mdx-on .mdx-brak .mui-pickrow-tile {
    background: rgba(225,29,72,0.10) !important;
    color: #e11d48 !important;
  }
  html body.mdx-on .mdx-brak .mui-pickrow-sub { color: #e11d48 !important; }
  @media (prefers-reduced-motion: reduce) {
    html body.mdx-on .mdx-brak { animation: none; }
  }

  /* Podpis pod przyciskiem w wariancie ostrzegawczym */
  body.mdx-on #mdx-cta-sub.is-warn {
    color: #ffe4e6 !important;
    font-weight: 700;
  }
  html body.dark-mode.mdx-on .mdx-brak { background: rgba(225,29,72,0.12) !important; }
}

/* ======================================================================
   STRONA GLOWNA: SAM DOLNY PASEK
   Naglowek i uklad naleza do strony glownej - z powloki bierze ona tylko
   dolny pasek. Odstep u gory musi wiec zostac zerowy, inaczej tresc
   odsunelaby sie od krawedzi o wysokosc paska, ktorego tu nie ma.
   ====================================================================== */
@media (max-width: 760px) {
  html body.mob-shell.mob-landing {
    padding-top: 0 !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  /* Wlasny naglowek strony glownej zostaje na miejscu. */
  body.mob-shell.mob-landing .header,
  body.mob-shell.mob-landing .header__content { display: revert; }
}

/* ======================================================================
   KONTO NA TELEFONIE: BEZ KARTY PLANU FREE
   W ofercie planow indywidualnych karta Core/Free zajmowala caly ekran, a
   niczego nie oferuje - na telefonie zostaje sama karta Clinical. Wersja
   komputerowa pokazuje obie karty bez zmian.
   ====================================================================== */
@media (max-width: 760px) {
  html body.mob-shell #core-plan-card { display: none !important; }
}

/* ======================================================================
   KARTA PACJENTA: ZWARTY RZAD DZIALAN
   Cztery przyciski staly jeden pod drugim, kazdy na 46px wysokosci - razem
   zjadaly gorna polowe ekranu, zanim widac bylo pacjenta. Tutaj skladaja sie
   w siatke dwa na dwa i sa nizsze.
   ====================================================================== */
@media (max-width: 760px) {
  html body.mob-shell .pd-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html body.mob-shell .pd-actions > button,
  html body.mob-shell .pd-actions > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  html body.mob-shell .pd-actions > button svg,
  html body.mob-shell .pd-actions > a svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto;
  }
  html body.mob-shell .pd-actions > button span,
  html body.mob-shell .pd-actions > a span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body.mob-shell .pd-actions .pd-btn-danger { grid-column: auto !important; }
}

/* ======================================================================
   ORGANIZACJA: ZAKLADKI NA TELEFONIE
   Zakladki mialy rozciagac sie na cala szerokosc paska (flex:1 z min-width:0),
   co na waskim ekranie sciskalo je ponizej dlugosci napisow i teksty
   nachodzily na siebie. Tutaj kazda zajmuje tyle, ile potrzebuje, a caly pasek
   przesuwa sie w bok.
   ====================================================================== */
@media (max-width: 760px) {
  html body.mob-shell #organization .org-tabs {
    gap: 2px !important;
    padding: 0 2px !important;
    scroll-snap-type: x proximity;
  }
  html body.mob-shell #organization .org-tab {
    flex: 0 0 auto !important;
    min-width: auto !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    scroll-snap-align: start;
  }
  html body.mob-shell #organization .org-tab-ico {
    flex: 0 0 auto;
    width: 14px !important;
    height: 14px !important;
  }
}

/* ======================================================================
   NAGLOWEK EKRANU I TLO POD PASKIEM
   Strony z ukladem ustawien wciagaja stary zerujacy arkusz, ktory daje
   naglowkom i akapitom 25px dolnego odstepu - stad ogromne przerwy miedzy
   tytulem, opisem i trescia. Komponent pilnuje wlasnych odstepow, wiec ten
   dokladany zdejmujemy.

   Te same strony malowaly tez pod paskiem plaska szara plyte (#content,
   .settings-content), ktora zaslaniala lawendowe tlo powloki.
   ====================================================================== */
@media (max-width: 760px) {
  html body.mob-shell .mui-head-title,
  html body.mob-shell .mui-head-sub,
  html body.mob-shell .mui-kicker,
  html body.mob-shell .mui-ringcard-title,
  html body.mob-shell .mui-pickrow-title,
  html body.mob-shell .mui-section-title { padding-bottom: 0 !important; }

  html body.mob-shell #content,
  html body.mob-shell .settings-content,
  html body.mob-shell .settings-body { background: transparent !important; }
}

/* ======================================================================
   KONTO: PRZYCISK POMOCY I MIEJSCE POD OSTATNIM WIERSZEM
   Konto ma wlasny, starszy przycisk pomocy w ksztalcie bialej pigulki z
   napisem. Tutaj przybiera ten sam okragly, fioletowy ksztalt co na reszcie
   ekranow. Przy okazji strona dostaje wiecej miejsca u dolu, zeby ostatni
   wiersz (Wyloguj sie) nie chowal sie pod przyciskiem ani pod dolnym paskiem.
   ====================================================================== */
@media (max-width: 760px) {
  html body.mob-shell .acc-mobile-help-fab {
    right: 16px !important;
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(150deg, #6E35FF 0%, #8B3DFF 52%, #B451FF 100%) !important;
    color: #fff !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.9),
      0 6px 18px rgba(124,68,253,0.32),
      inset 0 1px 0 rgba(255,255,255,0.3) !important;
  }
  /* Sam znak zapytania - podpis "Pomoc" nie miesci sie w kolku. */
  html body.mob-shell .acc-mobile-help-fab > span:not(.acc-mobile-help-fab-icon) {
    display: none !important;
  }
  html body.mob-shell .acc-mobile-help-fab-icon {
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: #fff !important;
    font: 800 16px/1 'Inter', system-ui, sans-serif !important;
  }
  /* Zapas u dolu: dolny pasek plus wysokosc przycisku pomocy. */
  html body.mob-shell.mob-tab-konto {
    padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }
}