:root {
      --radius: 16px;
      --radius-sm: 10px;
      /* Jasny motyw (flawzilla.com) - patrz admin-theme.css. Ten lokalny
         :root nadpisuje/rozszerza go o zmienne wlasne edit.html
         (--accent-soft/--panel-glass/--bg-gradient), ktorych admin-theme.css
         nie definiuje. Sam kolor marki (--green/--ink/...) pochodzi stamtad. */
      --accent-soft: rgba(7, 135, 76, 0.1);
      --panel-glass: rgba(255, 255, 255, 0.85);
      --bg-gradient: radial-gradient(circle at 50% 0%, #ffffff 0%, #f7faf8 100%);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      height: 100dvh;
      width: 100%;
      background: var(--bg-gradient);
      color: var(--text);
      font-family: var(--fonts);
      overflow: hidden;
      line-height: 1.5;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    /* Header: fixed-height row in the 100vh shell */
    .app-header {
      flex-shrink: 0;
      z-index: 1000;
      background: var(--panel-glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(31, 32, 36, 0.05);
      padding: 10px clamp(12px, 2.5vw, 24px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      row-gap: 8px;
      box-shadow: 0 4px 30px rgba(20, 62, 43, .09);
    }

    .app-header h1 {
      font-size: clamp(18px, 3vw, 24px);
      margin: 0;
      color: var(--accent);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Desktop zachowuje kompaktowy pasek ikon z tooltipami. Telefon i tablet
       dostaja nizej widoczne, skrocone podpisy w regularnej siatce: 4x2 na
       telefonie oraz jeden rzad na tablecie. */
    .header-nav {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 52px;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
      gap: 2px;
      padding: 0;
      border: 1px solid rgba(31, 32, 36, 0.08);
      border-radius: 14px;
      background: rgba(31, 32, 36, 0.025);
    }

    .header-nav a,
    .header-nav button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      flex-direction: column;
      width: 100%;
      height: 44px;
      gap: 1px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 10px;
      color: var(--ink);
      padding: 3px 2px;
      text-decoration: none;
      transition: all 0.2s;
    }

    .header-nav svg {
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
    }

    /* Kazda akcja ma zawsze widoczny, skrocony podpis. Ikona i tekst tworza
       identyczny pionowy uklad, wiec navbar zachowuje symetrie rowniez wtedy,
       gdy elementy sesji sa dolaczane dynamicznie. */
    .header-nav .nav-label {
      position: static;
      width: 100%;
      min-width: 0;
      height: auto;
      padding: 0;
      overflow: hidden;
      clip-path: none;
      color: inherit;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 0.015em;
      line-height: 1;
      text-align: center;
      text-overflow: clip;
      text-transform: uppercase;
      white-space: nowrap;
      border: 0;
    }

    .header-nav button {
      cursor: pointer;
      font-family: inherit;
    }

    .header-nav a:hover,
    .header-nav button:hover {
      background: rgba(7, 135, 76, 0.1);
      color: var(--accent);
      border-color: rgba(7, 135, 76, 0.2);
      transform: none;
    }

    .header-nav a:focus-visible,
    .header-nav button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    /* 04-09-2026: kolejnosc DOM tych przyciskow to historyczny przypadek
       (Jezyk jest statyczny w markupie, Wyloguj/Zglos problem dolaczane
       pozniej przez JS w edit-app.js przez appendChild) - realnie Jezyk
       ladowal sie MIEDZY "Pomoc" a "Wyloguj"/"Zglos problem", wiec dwie
       kontrolki sesji/konta (Jezyk, Wyloguj) i jedna kontrolka tresci
       (Zglos problem) byly bez logiki poprzeplatane. Explicit `order`
       ustawia sensowna kolejnosc wizualna bez ruszania DOM/tab-order:
       najpierw nawigacja tresci, potem Zglos problem, na koncu (z
       odstepem) para kontrolek sesji Jezyk+Wyloguj. */
    .header-nav #link-view-tv { order: 1; }
    .header-nav #layout-tools-menu { order: 2; }
    .header-nav #link-operator { order: 3; }
    .header-nav #link-monitoring { order: 4; }
    .header-nav #link-help { order: 5; }
    .header-nav #cloud-report-problem { order: 6; }
    .header-nav .lang-switch { order: 7; margin-left: 0; }
    .header-nav #cloud-admin-logout { order: 8; }

    .container {
      width: 100%;
      max-width: 100vw;
      padding: clamp(10px, 2vw, 20px) clamp(12px, 2.5vw, 24px) 0;
      margin: 0 auto;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Publikacja ekranu: slim always-visible top bar (not a scrolling card) */
    .publish-bar {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 4px 12px;
      padding: 6px clamp(12px, 2.5vw, 24px);
      background: var(--panel-glass);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(31, 32, 36, 0.05);
      min-height: 0;
    }

    .publish-bar__field {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .publish-bar__field label {
      margin: 0;
      white-space: nowrap;
    }

    .publish-bar__field select {
      width: auto;
      min-width: 140px;
      min-height: 30px;
      padding: 5px 10px;
    }

    .publish-bar .cloud-meta {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px 12px;
      min-width: 0;
      margin: 0;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.15;
    }

    .publish-bar .cloud-meta > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      max-width: 260px;
    }

    .cloud-status-popover {
      position: fixed;
      z-index: 2200;
      width: min(380px, calc(100vw - 16px));
      max-height: min(440px, calc(100dvh - 64px));
      padding: 12px;
      overflow: auto;
      overscroll-behavior: contain;
      color: var(--text);
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(31, 32, 36, 0.14);
      border-radius: 12px;
      box-shadow: 0 18px 48px rgba(20, 62, 43, .18);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .cloud-status-popover[hidden] {
      display: none !important;
    }

    .cloud-status-popover__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .cloud-status-popover__close {
      display: inline-grid;
      flex: 0 0 28px;
      place-items: center;
      width: 28px;
      min-width: 28px;
      height: 28px;
      padding: 0;
      color: var(--muted);
      background: rgba(31, 32, 36, 0.04);
      border: 1px solid rgba(31, 32, 36, 0.12);
      border-radius: 8px;
      font: 800 17px/1 var(--fonts);
      cursor: pointer;
    }

    .cloud-status-popover__close:hover,
    .cloud-status-popover__close:focus-visible {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
      outline: none;
    }

    .cloud-status-popover .cloud-meta {
      display: grid;
      grid-template-columns: minmax(118px, 0.42fr) minmax(0, 1fr);
      gap: 0;
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .cloud-status-popover .cloud-meta > div {
      display: contents;
    }

    .cloud-status-popover .cloud-meta span,
    .cloud-status-popover .cloud-meta strong {
      min-width: 0;
      padding: 8px 7px;
      border-bottom: 1px solid rgba(31, 32, 36, 0.07);
    }

    .cloud-status-popover .cloud-meta span {
      color: var(--muted);
      font-weight: 700;
    }

    .cloud-status-popover .cloud-meta strong {
      color: var(--ink);
      font-weight: 800;
      overflow-wrap: anywhere;
      user-select: text;
    }

    .cloud-status-popover .cloud-meta > div:last-child span,
    .cloud-status-popover .cloud-meta > div:last-child strong {
      border-bottom: 0;
    }

    /* Status TV - "online"/"offline" byl zawsze tym samym bialym kolorem,
       spojnie z reszta poprawek stanu (patrz .player-status.is-off). */
    #cloud-heartbeat-status.is-online {
      color: var(--status-online);
    }

    #cloud-heartbeat-status.is-offline {
      color: var(--status-offline);
    }

    .publish-bar__actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
      margin-left: 0;
      min-width: 0;
    }

    .view-mode-control {
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      white-space: nowrap;
    }

    .cloud-status-popover .view-mode-control {
      justify-content: space-between;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(31, 32, 36, 0.1);
    }

    .view-mode-control select {
      width: auto;
      min-width: 78px;
      height: 30px;
      min-height: 30px;
      padding: 3px 7px;
      font-size: 10px;
    }

    .publish-bar__actions button,
    .publish-bar__actions a {
      flex: none;
      height: 30px;
      padding: 0 10px;
      font-size: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .publish-bar #cloud-status {
      grid-column: 1 / 2;
      flex-basis: auto;
      margin: 0;
      min-height: 12px;
      font-size: 10px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .publish-bar .cloud-warning {
      grid-column: 2 / -1;
      flex-basis: auto;
      margin: 0;
      min-width: 0;
      font-size: 10px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (min-width: 721px) and (max-width: 1250px) {
      .publish-bar {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .publish-bar__field {
        min-width: 0;
      }

      .publish-bar > .cloud-meta {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
      }

      .publish-bar #cloud-status {
        grid-column: 1 / 2;
        grid-row: 3;
      }

      .publish-bar .cloud-warning {
        grid-column: 2 / -1;
        grid-row: 3;
      }
    }

    .tab-content-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-bottom: calc(var(--footer-safe-space, 80px) + env(safe-area-inset-bottom));
    }

    /* GRID SYSTEM: Fluid Masonry-style layout */
    .grid-dashboard {
      display: grid;
      gap: clamp(14px, 2vw, 24px);
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }

    @media (max-width: 480px) {
      .grid-dashboard {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }

    /* PREMIUM CARDS (Glassmorphism) */
    .card {
      position: relative;
      border: 1px solid rgba(31, 32, 36, 0.05);
      background: var(--panel-glass);
      backdrop-filter: blur(8px);
      border-radius: var(--radius);
      padding: clamp(12px, 1.6vw, 18px);
      display: flex;
      flex-direction: column;
      min-width: 0;
      box-shadow: 0 8px 32px rgba(20, 62, 43, .09);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .card:hover {
      border-color: rgba(7, 135, 76, 0.3);
      box-shadow: 0 12px 48px rgba(20, 62, 43, .18);
      transform: translateY(-4px);
    }

    .card:hover::before {
      opacity: 1;
    }

    .card h2 {
      font-size: 13px;
      margin: 0 0 12px;
      color: var(--accent);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 1;
    }

    /* Regresja 21.09.2026: karta punktow lojalnosciowych dziedziczyla po
       .card flex-direction:column, wiec justify-content:space-between z
       inline style'a dzialal na osi pionowej zamiast poziomej - tekst i
       przycisk byly wyśrodkowane i ulozone jedno pod drugim zamiast obok
       siebie. CTA jako <a class="btn-primary"> tez nie mial box-modelu
       (button {} w tym pliku celuje w element <button>, nie klase), wiec
       renderowal sie jako goly podkreslony link. Patrz docs/BUGS.md. */
    .loyalty-points-card {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }

    .loyalty-points-info {
      min-width: 0;
    }

    .loyalty-points-card h2.loyalty-points-title {
      margin-bottom: 2px;
    }

    .loyalty-points-value {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      color: var(--accent);
    }

    .loyalty-points-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 16px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      flex: 0 0 auto;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .loyalty-points-cta:hover {
      background: var(--green-dark);
      box-shadow: 0 6px 20px rgba(7, 135, 76, 0.3);
    }

    /* Grouped Section Title */
    .section-title {
      grid-column: 1 / -1;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--line);
      margin: 32px 0 8px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .section-title::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(31, 32, 36, 0.05);
    }

    /* TABS (pure CSS, no JS) */
    .tab-radio {
      position: absolute;
      left: -9999px;
    }

    .tabs-bar {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      min-width: 0;
      margin: 2px 0 8px;
      padding: 2px;
      overflow: hidden;
    }

    .tabs-bar [role="tab"] {
      display: inline-flex;
      flex: 0 1 auto;
      align-items: center;
      justify-content: center;
      min-width: 0;
      max-width: 100%;
      height: 28px;
      min-height: 28px;
      padding: 0 clamp(9px, 0.8vw, 12px);
      border-radius: 99px;
      background: rgba(31, 32, 36, 0.03);
      border: 1px solid rgba(31, 32, 36, 0.49);
      color: var(--muted);
      font-size: clamp(9px, 0.66vw, 10px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      transform: none;
      transition: color 0.16s ease, background-color 0.16s ease,
        border-color 0.16s ease, box-shadow 0.16s ease;
      user-select: none;
    }

    .tabs-bar [role="tab"]:hover {
      color: var(--ink);
      background: rgba(31, 32, 36, 0.055);
      border-color: rgba(31, 32, 36, 0.49);
      box-shadow: inset 0 0 0 1px rgba(31, 32, 36, 0.04);
      transform: none;
    }

    .tab-radio:focus-visible ~ .tabs-bar [role="tab"] {
      outline: none;
    }

    .tab-panel {
      display: none;
    }

    .client-feature-hidden {
      display: none !important;
    }

    #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale,
    #tab-multimedia:checked ~ .tab-content-scroll .tab-panel-multimedia,
    #tab-system:checked ~ .tab-content-scroll .tab-panel-system {
      display: block;
    }

    #tab-sale:checked ~ .tabs-bar [role="tab"][data-tab-input="tab-sale"],
    #tab-multimedia:checked ~ .tabs-bar [role="tab"][data-tab-input="tab-multimedia"],
    #tab-system:checked ~ .tabs-bar [role="tab"][data-tab-input="tab-system"] {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    #tab-sale:focus-visible ~ .tabs-bar [role="tab"][data-tab-input="tab-sale"],
    #tab-multimedia:focus-visible ~ .tabs-bar [role="tab"][data-tab-input="tab-multimedia"],
    #tab-system:focus-visible ~ .tabs-bar [role="tab"][data-tab-input="tab-system"] {
      box-shadow: inset 0 0 0 2px rgba(7, 135, 76, 0.34);
    }

    /* FORM COMPONENTS */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
    }

    label {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      /* var(--muted) measured at 3.28:1 against the card background - below the
         4.5:1 WCAG AA minimum for normal text. var(--muted) clears it (~6.6:1)
         while staying visually secondary to actual field values. */
      color: var(--muted);
      margin-left: 4px;
    }

    input[type="text"],
    input[type="number"],
    select,
    textarea {
      width: 100%;
      max-width: 100%;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      color: var(--ink);
      font-size: 13px !important;
      font-family: inherit;
      outline: none;
      transition: all 0.2s;
    }

    input:focus,
    select:focus {
      border-color: var(--accent);
      background: var(--paper);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }

    /* Consistent keyboard-focus ring for every button/link on the page,
       instead of leaving it to each browser's own default outline. */
    button:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    /* TOGGLE GRID */
    .toggle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      margin: 4px 0;
      background: rgba(31, 32, 36, 0.02);
      padding: 12px;
      border-radius: var(--radius-sm);
    }

    .gallery-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      background: rgba(31, 32, 36, 0.03);
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
      border: 1px solid rgba(31, 32, 36, 0.05);
      transition: all 0.2s;
    }

    .gallery-item:hover {
      background: rgba(31, 32, 36, 0.06);
      border-color: rgba(31, 32, 36, 0.1);
    }

    .gallery-item input {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    .gallery-item img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid rgba(31, 32, 36, 0.1);
    }

    .gallery-item span {
      flex: 1;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0.8;
    }

    .gallery-item__del {
      background: rgba(220, 38, 38, 0.1);
      color: var(--status-offline);
      border: 1px solid rgba(220, 38, 38, 0.69);
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
    }

    .gallery-item__del:hover {
      background: var(--status-offline);
      color: #fff;
      border-color: var(--status-offline);
    }

    .toggle-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
      font-weight: 600;
      transition: color 0.2s;
    }

    .toggle-item:hover {
      color: var(--ink);
    }

    .toggle-item input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
      cursor: pointer;
      margin: 0;
    }

    /* BUTTONS */
    .btn-row {
      display: flex;
      gap: 10px;
      margin-top: auto;
      padding-top: 20px;
    }

    .room-live-status {
      min-height: 18px;
      margin-top: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--muted);
    }

    .room-live-status.active {
      color: var(--accent);
    }

    button {
      flex: 1;
      height: 38px;
      border: 0;
      border-radius: var(--radius-sm);
      padding: 0 14px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 12px rgba(7, 135, 76, 0.2);
    }

    .btn-primary:hover:not(:disabled) {
      background: var(--green-dark);
      transform: none;
      box-shadow: 0 6px 20px rgba(7, 135, 76, 0.3);
    }

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

    .btn-secondary {
      background: rgba(31, 32, 36, 0.05);
      color: var(--muted);
      border: 1px solid rgba(31, 32, 36, 0.49);
    }

    .btn-secondary:hover:not(:disabled) {
      background: rgba(31, 32, 36, 0.08);
      color: var(--ink);
      border-color: rgba(31, 32, 36, 0.2);
    }

    /* Icon-only toolbar buttons: same action, no label text, so the top
       bar stays readable instead of a dense row of pills. Tooltip (title)
       and aria-label carry the accessible name. */
    .icon-btn {
      flex: 0 0 30px !important;
      width: 30px !important;
      min-width: 30px !important;
      max-width: 30px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 !important;
      font-size: 14px !important;
      line-height: 1;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    /* Shared icon set (see the <symbol> sprite right after <body>) */
    .icon-btn svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      flex: none;
    }

    .card h2 svg {
      width: 1.15em;
      height: 1.15em;
      stroke: currentColor;
      flex: none;
    }

    .toggle-item svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      flex: none;
    }

    .btn-icon-inline {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      flex: none;
      vertical-align: -3px;
      /* Both places this is used are flex containers with their own gap
         (.full-width-control, .config-export-link) - no separate margin,
         or the icon+text would drift apart inconsistently between them. */
    }

    .live-dot-icon {
      width: 10px;
      height: 10px;
      color: var(--status-offline);
      flex: none;
    }

    /* TOAST */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 32px;
      transform: translateX(-50%) translateY(100px);
      background: var(--accent);
      color: #fff;
      border-radius: 99px;
      padding: 12px 24px;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 0.05em;
      box-shadow: 0 12px 32px rgba(20, 62, 43, .16);
      z-index: 10000;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      opacity: 0;
    }

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

    /* CUSTOM CONTENT SCROLLBARS */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(31, 32, 36, 0.1);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(31, 32, 36, 0.2);
    }

    .playlist-scroll,
    .gallery-scroll {
      max-height: 240px;
      overflow-y: auto;
      border: 1px solid rgba(31, 32, 36, 0.05);
      border-radius: var(--radius-sm);
      margin: 12px 0;
      padding: 4px;
      background: var(--soft);
    }

    .playlist-item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      min-height: 58px;
      gap: 10px;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(31, 32, 36, 0.07);
      background: rgba(31, 32, 36, 0.015);
    }

    .playlist-item:last-child {
      border-bottom: 0;
    }

    .playlist-item.dragging {
      opacity: .48;
      outline: 1px solid var(--accent);
    }

    .playlist-item__drag {
      color: var(--muted);
      cursor: grab;
      font-size: 18px;
      text-align: center;
      user-select: none;
    }

    .playlist-item__pick {
      display: grid;
      grid-template-columns: 20px 42px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-width: 0;
      margin: 0;
      cursor: pointer;
    }

    .playlist-item__pick input {
      width: 18px;
      height: 18px;
      margin: 0;
    }

    .playlist-item__thumb,
    .multimedia-grid .playlist-item__thumb {
      width: 44px;
      height: 44px;
      object-fit: cover;
      border-radius: 5px;
      background: var(--soft);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 9px;
      font-weight: 800;
      overflow: hidden;
      padding: 0;
      border: 1px solid var(--muted);
      cursor: zoom-in;
      flex-shrink: 0;
    }

    .playlist-item__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .playlist-item__thumb:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 2px;
    }

    .playlist-preview {
      position: fixed;
      z-index: 10000;
      width: min(420px, calc(100vw - 24px));
      max-height: calc(100vh - 24px);
      max-height: calc(100dvh - 24px);
      box-sizing: border-box;
      overflow: auto;
      padding: 12px;
      border: 1px solid var(--muted);
      border-radius: 12px;
      background: var(--bg, #fff);
      color: var(--ink);
      box-shadow: 0 8px 30px rgb(0 0 0 / 22%);
    }

    .playlist-preview[hidden] { display: none; }

    .playlist-preview__head {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: space-between;
    }

    .playlist-preview__head strong,
    .playlist-preview__filename {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 13px;
    }

    .playlist-preview__filename { display: block; font-size: 11px; }

    .playlist-preview .playlist-preview__close {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      box-sizing: border-box;
      flex: none;
      border: 1px solid var(--muted);
      border-radius: 8px;
      background: var(--soft);
      color: var(--ink);
      font-size: 24px;
      cursor: pointer;
    }

    .playlist-preview__stage {
      display: grid;
      place-items: center;
      min-height: 80px;
      margin-top: 8px;
      background: #111;
      border-radius: 6px;
    }

    .playlist-preview__stage img {
      display: block;
      width: 100%;
      max-height: min(320px, 55vh);
      max-height: min(320px, 55dvh);
      object-fit: contain;
    }

    .playlist-preview__message { font-size: 12px; margin: 8px 0 0; }

    .playlist-item__copy {
      min-width: 0;
    }

    .playlist-item__name {
      display: block;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .playlist-item__meta {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 10px;
    }

    .media-compatibility {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 7px;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 800;
      line-height: 1.3;
    }

    .media-compatibility--ok { color: var(--status-online); }
    .media-compatibility--warning { color: #b45309; }
    .media-compatibility--error { color: var(--status-offline); }
    .media-compatibility--unknown { color: var(--muted); }

    .display-profile-control {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(31, 32, 36, 0.1);
    }

    .display-profile-control > label,
    .display-profile-custom label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .display-profile-control select,
    .display-profile-control input {
      width: 100%;
      min-height: 34px;
    }

    .display-profile-custom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }

    /* `display: grid` above wins over the UA stylesheet's [hidden]{display:
       none} at equal specificity (author rule comes later in the cascade),
       so toggling the `hidden` attribute alone did nothing - the width/
       height inputs stayed visible even for non-custom presets. */
    .display-profile-custom[hidden] {
      display: none;
    }

    .display-profile-control button {
      width: 100%;
      margin-top: 9px;
    }

    .display-profile-control__hint {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    .playlist-item__fallback {
      display: block;
      margin-top: 3px;
      font-size: 10px;
      color: var(--muted);
    }

    .playlist-item__fallback button {
      background: none;
      border: 1px solid rgba(31, 32, 36, 0.15);
      color: inherit;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
    }

    .playlist-item__fallback button:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .playlist-item__actions {
      display: flex;
      gap: 4px;
    }

    .playlist-item__actions button {
      flex: none;
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      border: 1px solid rgba(31, 32, 36, .12);
      border-radius: 6px;
      background: rgba(31, 32, 36, .04);
      color: var(--ink);
      cursor: pointer;
    }

    .playlist-item__actions button:disabled {
      opacity: .3;
      cursor: default;
    }

    .playlist-item__del {
      color: var(--status-offline) !important;
    }

    .playlist-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      width: 100%;
      min-width: 0;
      margin: 0 0 12px;
      padding-top: 0;
    }

    .playlist-actions button {
      width: 100%;
      min-width: 0;
      height: 32px;
      min-height: 32px;
      padding: 0 5px;
      font-size: 9px;
      line-height: 1.05;
      letter-spacing: 0.035em;
      white-space: normal;
      overflow: hidden;
      text-align: center;
    }

    .playlist-actions__danger {
      color: var(--status-offline);
    }

    .media-availability {
      margin: 10px 0 12px;
      padding: 12px;
      border: 1px solid rgba(31, 32, 36, .12);
      border-radius: 10px;
      background: rgba(31, 32, 36, .025);
    }

    .media-availability__heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .media-availability__heading h3 {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      color: var(--ink);
      font-size: 13px;
    }

    .media-availability__heading h3 svg {
      width: 17px;
      height: 17px;
      color: var(--accent);
    }

    .media-availability__toggle {
      flex: none;
      margin: 0;
    }

    .media-availability__hint,
    .media-availability__timezone,
    .media-availability__empty,
    .media-availability__status {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    .media-availability__content {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .media-availability__content[hidden],
    .media-availability__empty[hidden] {
      display: none;
    }

    .media-availability__rules {
      display: grid;
      gap: 8px;
      max-height: 390px;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .media-availability-rule {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(31, 32, 36, .12);
      border-radius: 8px;
      background: var(--paper);
    }

    .media-availability-rule__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
    }

    .media-availability-rule__remove {
      width: 32px;
      min-width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      color: var(--status-offline);
      font-size: 16px;
    }

    .media-availability-field {
      display: grid;
      gap: 4px;
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .media-availability-field select,
    .media-availability-field input {
      width: 100%;
      min-height: 36px;
    }

    .media-availability-days {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }

    .media-availability-days legend {
      width: 100%;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .media-availability-day {
      position: relative;
      margin: 0;
    }

    .media-availability-day input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .media-availability-day span {
      display: grid;
      place-items: center;
      min-width: 34px;
      min-height: 32px;
      padding: 0 7px;
      border: 1px solid rgba(31, 32, 36, .15);
      border-radius: 999px;
      background: var(--paper);
      color: var(--muted);
      cursor: pointer;
    }

    .media-availability-day input:checked + span {
      border-color: var(--accent);
      background: var(--accent-soft, rgba(11, 157, 89, .12));
      color: var(--accent);
    }

    .media-availability-day input:focus-visible + span {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .media-availability-time-grid,
    .media-availability-date-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .media-availability__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .media-availability__save-row {
      grid-template-columns: minmax(0, 1fr);
      margin-top: 8px;
    }

    .media-availability__status {
      min-height: 14px;
    }

    .media-availability__status.is-error {
      color: var(--status-offline);
    }

    .gallery-upload-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 6px;
      width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .gallery-upload-row input[type="file"] {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      font-size: 10px;
    }

    .gallery-upload-row button {
      flex: none;
      width: auto;
      min-width: 58px;
      height: 34px;
      min-height: 34px;
      padding: 0 8px;
      font-size: 10px;
    }

    @media (max-width: 520px) {
      .playlist-item {
        grid-template-columns: 22px minmax(0, 1fr);
      }

      .playlist-item__actions {
        grid-column: 2;
        justify-content: flex-end;
      }

      .playlist-item__pick {
        grid-template-columns: 20px 44px minmax(0, 1fr);
      }

      .playlist-item__thumb {
        display: grid;
        width: 44px;
        height: 44px;
      }

      .media-availability__heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .media-availability-day span,
      .media-availability-field select,
      .media-availability-field input,
      .media-availability-rule__remove,
      .media-availability__actions button {
        min-height: 44px;
      }

      .media-availability-time-grid,
      .media-availability-date-grid,
      .media-availability__actions {
        grid-template-columns: 1fr;
      }
    }

    .emergency-bar h2 {
      font-size: 18px;
      color: var(--status-offline);
      margin-bottom: 16px;
    }

    /* STATUS & TOAST */
    .status {
      font-size: 12px;
      opacity: 0.8;
    }

    .cloud-meta {
      display: grid;
      gap: 8px;
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .cloud-meta strong {
      color: var(--accent);
      font-weight: 900;
    }

    .cloud-warning {
      margin-top: 12px;
      color: #b45309;
      font-size: 11px;
      line-height: 1.4;
    }

    /* IMAGE PREVIEWS */
    #pv_coach_img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      object-fit: cover;
      margin: 0 auto;
      display: block;
    }

    /* Labels for auto-text */
    #playh::before,
    #belth::before {
      content: none;
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important;
        animation: none !important;
      }
    }

    /* Widoczny sygnal "trwa wgrywanie" - patrz setButtonLoading(). Sam tekst
       ("Wgrywanie...") byl za latwy do przeoczenia, zwlaszcza w malych
       przyciskach ikonowych. prefers-reduced-motion:reduce (powyzej) i tak
       wylacza animation globalnie - okrag wtedy po prostu stoi w miejscu
       jako staly wskaznik, dalej czytelny. */
    @keyframes flawzilla-spin {
      to { transform: rotate(360deg); }
    }

    .upload-spinner {
      display: inline-block;
      width: 13px;
      height: 13px;
      flex: none;
      border: 2px solid rgba(31, 32, 36, 0.25);
      border-top-color: currentColor;
      border-radius: 50%;
      animation: flawzilla-spin 0.7s linear infinite;
      vertical-align: -2px;
    }

    body.footer-safe {
      padding-bottom: 0 !important;
    }

    .app-footer {
      position: relative;
      flex-shrink: 0;
      padding: 10px 12px calc(8px + env(safe-area-inset-bottom));
      z-index: 20;
    }

    .app-footer__logo {
      height: 28px;
    }

    /* Ekran zarządzania kontenerami: cztery karty muszą mieścić się
       w jednym wierszu na ekranie desktopowym bez przewijania zakładki. */
    .management-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(8px, 0.9vw, 14px);
      min-height: 0;
    }

    .management-grid > .card {
      padding: clamp(8px, 0.85vw, 12px);
      min-height: 0;
    }

    .management-grid .card h2 {
      font-size: clamp(11px, 0.78vw, 13px);
      margin-bottom: clamp(5px, 0.55vw, 8px);
      gap: 6px;
    }

    .management-grid .form-group {
      gap: 2px;
      margin-bottom: clamp(4px, 0.45vw, 7px);
    }

    .management-grid label {
      font-size: clamp(8px, 0.58vw, 10px);
      line-height: 1.1;
    }

    .management-grid input[type="text"],
    .management-grid select {
      min-height: 30px;
      padding: 5px 8px;
      font-size: clamp(11px, 0.72vw, 13px) !important;
    }

    .management-grid .toggle-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      margin: 2px 0;
      padding: 7px;
    }

    .management-grid .toggle-item {
      gap: 6px;
      font-size: clamp(9px, 0.68vw, 12px);
      white-space: nowrap;
    }

    .management-grid .toggle-item input[type="checkbox"] {
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
    }

    .management-grid .btn-row {
      gap: 6px;
      padding-top: 8px;
    }

    .management-grid .btn-row button {
      height: 32px;
      min-height: 32px;
      padding: 0 7px;
      font-size: clamp(9px, 0.64vw, 11px);
    }

    .management-grid .room-live-status {
      min-height: 14px;
      margin-top: 4px;
      font-size: 10px;
      line-height: 1.2;
    }

    /* Multimedia and system use purpose-built grids instead of the generic
       auto-fill layout. On desktop every card remains inside the viewport;
       only media lists may scroll when they contain many files. */
    .multimedia-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(8px, 0.9vw, 14px);
      min-height: 0;
    }

    .player-mode-hint,
    .card-description {
      font-size: 11px;
      line-height: 1.3;
      opacity: 0.68;
    }

    .player-mode-hint {
      margin: 4px 4px 0;
    }

    .upload-quality-warning {
      margin: 8px 4px 0;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      background: rgba(180, 83, 9, 0.12);
      border: 1px solid rgba(180, 83, 9, 0.35);
      color: #b45309;
      font-size: 12px;
      line-height: 1.45;
    }

    .card-description {
      margin: 0 0 16px;
    }

    .full-width-control {
      width: 100%;
      /* This button's height used to come by accident from its emoji+text
         wrapping onto 2 lines - with a single-line icon+label it needs its
         own floor so it never drops below a tappable/clickable size. Kept at
         a real touch-target minimum (40px) even though visually this button
         used to look heavier than its neighbors - that came from the long
         hint text stacked right under it, not from the button itself, so the
         fix there (shorter copy) is what actually slims this down. */
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding-top: 6px;
      padding-bottom: 6px;
    }

    /* One row, always - icon-only on narrow phones, icon+label once there's
       room (see the 480px breakpoint below). Turning the live screen on/off
       is a frequent, high-stakes action; it must never wrap or get squeezed
       into 4-5 stacked full-width rows on a phone. */
    .player-control-grid {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 6px;
      width: 100%;
      min-width: 0;
    }

    /* !important: this row shares ".multimedia-grid button" with every other
       button on the tab, whose generic rules (several breakpoints) set their
       own height/padding/font-size. Those must never win here - shrinking
       this row is how it silently goes back to wrapping/misaligning. */
    .player-control-grid button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      width: auto !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 2px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 2px 2px !important;
      overflow: hidden !important;
    }

    .player-control-grid button:disabled {
      opacity: 1;
      color: var(--muted);
      background: var(--soft);
      border-style: dashed;
      box-shadow: none;
      cursor: not-allowed;
    }

    .player-control-grid .control-icon {
      font-size: 15px;
      line-height: 1;
    }

    /* Byl domyslnie ukryty ponizej 480px (czyli na niemal kazdym telefonie) -
       zostawal sam glyph (np. samo "checkmark"), bez zadnego tekstu, tylko z
       title/aria-label niedzialajacym na dotyk. Realny efekt: nie wiadomo
       bylo, ktory z 5 identycznie wygladajacych przyciskow faktycznie
       wysyla wybrane pliki. Etykiety sa teraz widoczne zawsze - krotsze
       teksty (patrz HTML/setControlLabel) mieszcza sie nawet na waskim
       telefonie bez zawijania rzedu. */
    .player-control-grid .control-label {
      display: block;
      width: 100%;
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.05;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (min-width: 480px) {
      .player-control-grid .control-label {
        font-size: 9px;
      }
    }

    .player-status {
      margin-top: 12px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      text-transform: uppercase;
    }

    /* Wlaczony/Wylaczony byl zawsze tym samym kolorem akcentu - trzeba bylo
       przeczytac slowo, zeby wiedziec ktory stan. Kolor jest teraz drugim,
       szybszym sygnalem (czerwony = wylaczony), spojnym z .pill.online/
       .pill.offline w panelu operatorskim. */
    .player-status.is-off {
      color: var(--status-offline);
    }

    /* Ten sam problem na przyciskach Graj/Stop - "Graj" mial na stale klase
       btn-primary (jaskrawy), niezaleznie od realnego stanu playera, wiec
       nie dalo sie po samych przyciskach poznac, ktory stan jest aktywny.
       Teraz podswietlony jest zawsze ten aktualnie aktywny. */
    #btn_player_enable.is-active-state {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 12px rgba(7, 135, 76, 0.2);
    }

    #btn_player_disable.is-active-state {
      background: rgba(220, 38, 38, 0.15);
      color: var(--status-offline);
      border-color: rgba(220, 38, 38, 0.69);
    }

    #alert-card {
      border-color: rgba(220, 38, 38, 0.2);
    }

    #alert-card h2 {
      color: var(--status-offline);
    }

    .sound-alert-slots {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .sound-alert-slot {
      padding: 8px 10px;
      border: 1px solid var(--card-border, #2a2a2a);
      border-radius: 8px;
    }

    .sound-alert-slot .form-group {
      margin-bottom: 8px;
    }

    /* Rzad ma 3 przyciski (Zapisz/Odtworz teraz/Usun), nie zwykle 2 jak w
       reszcie kart - globalne "button { flex:1; height:38px }" zostawia na
       kazdy niecale 130px, za malo dla "ODTWORZ TERAZ" w jednym wierszu.
       Bez tego tekst lamal sie na 2 linie, a flexbox (domyslny
       align-items:stretch) naciagal SASIEDNIE przyciski do tej samej,
       wiekszej wysokosci - stad "rozjechany" wyglad calego rzedu. Mniejszy
       font/padding/odstepy scoped tylko tutaj, nie w globalnym .btn-row,
       zeby nie ruszac zadnej innej karty.
       Znalezione i naprawione 2026-09-15 (zrzuty ekranu + realny pomiar
       getBoundingClientRect w Playwright, patrz git log). */
    .sound-alert-slot .btn-row {
      padding-top: 10px;
      gap: 8px;
    }

    .sound-alert-slot .btn-row button {
      font-size: 10.5px;
      padding: 0 6px;
      letter-spacing: 0.03em;
    }

    .alert-color-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }

    .alert-color-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--muted);
    }

    .alert-color-input {
      width: 48px;
      border: 0;
      background: none;
      cursor: pointer;
    }

    .alert-active-badge {
      padding: 4px 10px;
      border: 1px solid #dc2626;
      border-radius: 4px;
      background: rgba(220, 38, 38, 0.1);
      color: var(--status-offline);
      font-size: 10px;
      font-weight: 900;
    }

    .alert-primary {
      background: #dc2626;
      color: #fff;
    }

    .timer-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      align-items: flex-end;
      gap: 10px;
      margin-bottom: 16px;
    }

    .timer-controls .form-group {
      margin: 0;
    }

    .timer-controls #btn-timer-set {
      width: 64px;
      height: 48px;
    }

    .timer-preview {
      margin: 16px 0;
      color: var(--accent);
      font-family: monospace;
      font-size: 42px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 1.15;
      text-align: center;
    }

    /* Chip layout instead of one checkbox per row: wraps to as many rows as
       needed (2 with 5 widgets at typical card widths) and centers the last,
       shorter row instead of leaving it stuck alone on the left - that's
       what actually reads as "symmetric" with an odd item count. */
    .widgets-toggle-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 14px;
    }

    .widgets-toggle-grid .toggle-item {
      /* flex: 0 0 (nie 0 1) - kazdy chip ma DOKLADNIE ta sama szerokosc,
         niezalenie od dlugosci wlasnego tekstu. Wczesniej "0 1 130px"
         pozwalal kazdemu chipowi skurczyc/urosnac do swojej tresci, wiec przy
         5 elementach o roznej dlugosci etykiety uklad wygladal na
         nierowny/asymetryczny nawet przy wyśrodkowanych wierszach. Stala
         wysokosc + jednolinijkowy tekst z eliipsa (patrz .toggle-item__label)
         daja identyczne "kafelki" niezaleznie od tego, ile ich sie zawinie
         do ktorego wiersza. */
      flex: 0 0 180px;
      /* Flex items default to min-width:auto (their own content's min-content
         width) regardless of flex-basis/flex-shrink - without this override
         "Harmonogram" (the longest label) forced its own chip wider than
         108px despite flex:0 0 108px, which is exactly what broke the
         uniform-width goal here. */
      min-width: 0;
      height: 40px;
      justify-content: center;
      text-align: center;
      padding: 0 10px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(31, 32, 36, 0.08);
      background: rgba(31, 32, 36, 0.02);
      font-size: 11px;
    }

    .widgets-toggle-grid .toggle-item__label {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .widgets-toggle-grid .toggle-item:hover {
      border-color: rgba(31, 32, 36, 0.18);
      background: rgba(31, 32, 36, 0.05);
    }

    .widgets-toggle-grid .toggle-item:has(input:checked) {
      border-color: rgba(7, 135, 76, 0.5);
      background: rgba(7, 135, 76, 0.08);
      color: var(--ink);
    }

    .gallery-upload-group {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(31, 32, 36, 0.05);
    }

    .gallery-selection-label {
      display: block;
      margin-top: 16px;
    }

    .config-export-row {
      margin-top: 0;
      margin-bottom: 16px;
    }

    .config-export-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 12px;
      border: 1px solid var(--accent);
      border-radius: var(--radius-sm);
      background: var(--accent-soft);
      color: var(--accent);
      text-decoration: none;
    }

    .config-separator {
      margin: 16px 0;
      border: 0;
      border-top: 1px solid rgba(31, 32, 36, 0.1);
    }

    .card-status {
      margin: 10px 0;
      font-size: 11px;
      line-height: 1.2;
      text-align: center;
    }

    .management-grid > .card:hover,
    .multimedia-grid > .card:hover,
    .system-grid > .card:hover {
      transform: none;
    }

    @media (min-width: 1280px) {
      #tab-multimedia:checked ~ .tab-content-scroll,
      #tab-system:checked ~ .tab-content-scroll {
        overflow: hidden;
        padding-bottom: 0;
      }

      #tab-multimedia:checked ~ .tab-content-scroll .tab-panel-multimedia,
      #tab-multimedia:checked ~ .tab-content-scroll .multimedia-grid,
      #tab-system:checked ~ .tab-content-scroll .tab-panel-system,
      #tab-system:checked ~ .tab-content-scroll .system-grid {
        height: 100%;
        min-height: 0;
      }

      .system-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: clamp(6px, 0.65vw, 10px);
        /* Cards here hold very different amounts of content (a 2-line
           message box next to a photo gallery). Stretching every card to
           match the tallest one left most of them mostly empty - size each
           to its own content instead. */
        align-items: start;
      }

      .multimedia-grid > .card {
        height: 100%;
        min-height: 0;
        padding: clamp(8px, 0.72vw, 11px);
      }

      .system-grid > .card {
        height: auto;
        min-height: 0;
        padding: clamp(8px, 0.72vw, 11px);
      }

      .multimedia-grid .card h2,
      .system-grid .card h2 {
        gap: 5px;
        margin-bottom: 6px;
        font-size: clamp(10px, 0.72vw, 12px);
        line-height: 1.15;
      }

      .multimedia-grid .card-description,
      .system-grid .card-description,
      .multimedia-grid .player-mode-hint {
        margin: 0 0 6px;
        font-size: clamp(8px, 0.58vw, 10px);
        line-height: 1.2;
      }

      .multimedia-grid .form-group,
      .system-grid .form-group {
        gap: 2px;
        margin-bottom: 6px;
      }

      .multimedia-grid label,
      .system-grid label {
        margin-left: 2px;
        font-size: clamp(8px, 0.55vw, 9px);
        line-height: 1.1;
      }

      .multimedia-grid input[type="text"],
      .multimedia-grid input[type="number"],
      .multimedia-grid select,
      .multimedia-grid textarea,
      .system-grid input[type="text"],
      .system-grid input[type="number"],
      .system-grid select,
      .system-grid textarea {
        min-height: 30px;
        padding: 5px 7px;
        font-size: clamp(10px, 0.68vw, 12px) !important;
      }

      .system-grid textarea {
        min-height: 54px;
        max-height: 64px;
      }

      .multimedia-grid button,
      .system-grid button,
      .system-grid .config-export-link {
        height: 30px;
        min-height: 30px;
        padding: 0 6px;
        font-size: clamp(8px, 0.56vw, 9px);
        line-height: 1.05;
        letter-spacing: 0.035em;
      }

      .multimedia-grid .btn-row,
      .system-grid .btn-row {
        gap: 5px;
        padding-top: 6px;
      }

      .multimedia-grid .playlist-scroll,
      .system-grid .gallery-scroll {
        flex: 1;
        min-height: 34px;
        max-height: none;
        margin: 5px 0;
      }

      /* "Pasek" only ever holds 3 short text fields - it must not stretch
         to match the TV card next to it, which deliberately grows tall to
         fit a long file list. Everything else in this row keeps the default
         stretch (that's what lets the TV card fill the tab). */
      #belt-editor {
        align-self: start;
        height: auto;
      }

      .multimedia-grid .playlist-item {
        min-height: 42px;
        gap: 6px;
        padding: 4px 6px;
      }

      .multimedia-grid .playlist-actions {
        gap: 4px;
        margin-bottom: 5px;
      }

      .multimedia-grid .playlist-actions button,
      .multimedia-grid .playlist-item__actions button {
        height: 28px;
        min-height: 28px;
      }

      .multimedia-grid .player-control-grid {
        gap: 5px;
      }

      .multimedia-grid .player-status {
        min-height: 12px;
        margin-top: 5px;
        font-size: 9px;
      }

      .system-grid .toggle-grid {
        grid-template-columns: 1fr;
        gap: 4px;
        margin: 2px 0;
        padding: 7px;
      }

      .system-grid .toggle-item {
        gap: 5px;
        font-size: clamp(8px, 0.58vw, 10px);
        line-height: 1.1;
      }

      .system-grid .toggle-item input[type="checkbox"] {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
      }

      .system-grid .timer-controls {
        gap: 4px;
        margin-bottom: 5px;
      }

      .system-grid .timer-controls #btn-timer-set {
        width: 38px;
        height: 30px;
      }

      .system-grid .timer-preview {
        margin: 5px 0;
        font-size: clamp(24px, 2.1vw, 34px);
      }

      .system-grid .alert-color-row {
        gap: 5px;
        margin-top: 2px;
      }

      .system-grid .alert-color-label {
        gap: 4px;
      }

      .system-grid .alert-color-input {
        width: 38px;
        height: 26px;
      }

      .system-grid .alert-active-badge {
        padding: 3px 5px;
        font-size: 8px;
      }

      .system-grid .gallery-upload-group {
        margin-top: 4px;
        padding-top: 5px;
      }

      .system-grid .gallery-selection-label {
        margin-top: 4px;
      }

      .system-grid .gallery-upload-row {
        gap: 4px;
      }

      .system-grid .gallery-upload-row input[type="file"] {
        font-size: 8px;
      }

      .system-grid .gallery-upload-row button {
        min-width: 42px;
        height: 30px;
        min-height: 30px;
        padding-inline: 4px;
        font-size: 8px;
      }

      .system-grid .gallery-item {
        gap: 5px;
        margin-bottom: 4px;
        padding: 4px;
      }

      .system-grid .gallery-item img {
        width: 32px;
        height: 32px;
      }

      .system-grid .config-export-row {
        margin-bottom: 5px;
      }

      .system-grid .config-export-link {
        height: auto;
        min-height: 30px;
        padding: 5px;
        text-align: center;
      }

      .system-grid .config-separator {
        margin: 6px 0;
      }

      .system-grid .card-status {
        min-height: 11px;
        margin: 4px 0;
        font-size: 9px;
      }
    }

    @media (min-width: 1101px) {
      #tab-sale:checked ~ .tab-content-scroll {
        overflow: hidden;
        padding-bottom: 0;
      }

      #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale,
      #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale .management-grid {
        height: 100%;
        min-height: 0;
      }

      #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale .management-grid {
        /* The row itself can fill the tab (no page scroll), but a short
           card - e.g. "Recepcja" next to three full class-schedule forms -
           must not be stretched to match a much taller sibling. Size each
           card to its own content and let it sit at the top of the row. */
        align-items: start;
      }

      #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale .management-grid > .card {
        min-height: 0;
      }

      .app-footer {
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .app-footer__logo {
        height: 22px;
      }
    }

    @media (min-width: 1000px) and (max-width: 1100px) {
      #tab-sale:checked ~ .tab-content-scroll {
        overflow: hidden;
        padding-bottom: 0;
      }

      .management-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 999px) {
      #tab-sale:checked ~ .tab-content-scroll {
        overflow-y: auto;
        padding-bottom: calc(var(--footer-safe-space, 80px) + env(safe-area-inset-bottom));
      }

      #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale,
      #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale .management-grid {
        height: auto;
        min-height: 0;
      }

      .management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .management-grid .toggle-item,
      .system-grid .toggle-item { min-height: 44px; }
      .app-header {
        align-items: stretch;
        padding: 8px 10px;
      }

      .app-header .header-content {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap !important;
        gap: 8px;
        overflow: hidden;
      }

      .app-header h1 {
        width: 100%;
        font-size: 17px;
      }

      .tabs-bar::-webkit-scrollbar { display: none; }

      .publish-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
        padding: 10px;
      }

      .publish-bar__field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
      }

      .publish-bar__field label {
        grid-column: 1 / -1;
      }

      .publish-bar__field select {
        width: 100%;
        min-width: 0;
      }

      .publish-bar__field button {
        width: auto;
        min-width: 44px;
      }

      .publish-bar__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0 8px;
      }

      .publish-bar .cloud-meta > div {
        max-width: 100%;
      }

      .container {
        padding: 8px 8px 0;
      }

      .tabs-bar {
        overflow-x: auto;
        justify-content: flex-start;
      }

      .tabs-bar [role="tab"] {
        flex: 0 0 auto;
        min-height: 42px;
      }

      .tab-content-scroll {
        padding-bottom: calc(18px + var(--footer-safe-space, 80px) + env(safe-area-inset-bottom));
      }

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

      .card {
        padding: 14px;
      }

      .card button,
      .card select,
      .card input,
      .card textarea,
      .publish-bar button,
      .publish-bar a,
      .tabs-bar [role="tab"] {
        touch-action: manipulation;
      }

      .app-footer__extra,
      .app-footer__separator {
        display: none;
      }
    }

    /* The phone preview is intentionally a real view.html instance. This
       keeps the preview honest: layout, media and manifest parsing are the
       same code that runs on the TV. */
    .mobile-preview-dialog {
      width: min(720px, calc(100vw - 32px));
      max-width: none;
      max-height: calc(100dvh - 16px);
      padding: 0;
      border: 1px solid rgba(31, 32, 36, .14);
      border-radius: 16px;
      background: var(--paper);
      color: var(--text);
      box-shadow: 0 28px 100px rgba(20, 62, 43, .22);
      overflow: hidden;
    }

    .mobile-preview-dialog::backdrop {
      background: rgba(0, 0, 0, .8);
      backdrop-filter: blur(7px);
    }

    .mobile-preview__head,
    .mobile-preview__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .mobile-preview__head {
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(31, 32, 36, .08);
    }

    .mobile-preview__head > div:first-child {
      min-width: 0;
    }

    .mobile-preview__head h2 {
      margin: 0;
      color: var(--accent);
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .mobile-preview__head p,
    .mobile-preview__foot {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .mobile-preview__head-actions {
      display: flex;
      flex: 0 0 auto;
      gap: 8px;
    }

    .mobile-preview__icon,
    .mobile-preview__close {
      flex: 0 0 40px;
      width: 40px;
      min-height: 40px;
      padding: 0;
      font-size: 24px;
      line-height: 1;
      letter-spacing: 0;
    }

    .mobile-preview__icon {
      font-size: 22px;
    }

    .mobile-preview__stage {
      display: grid;
      place-items: center;
      min-height: 240px;
      padding: 14px;
      background: radial-gradient(circle at 50% 0%, #1b1b1b, #050505 68%);
      overflow: auto;
    }

    .mobile-preview__device {
      width: min(580px, calc(100vw - 52px));
      flex: 0 0 auto;
      padding: 8px;
      border: 6px solid #242424;
      border-radius: 20px;
      background: #020202;
      box-shadow: 0 18px 42px rgba(0, 0, 0, .55), inset 0 0 0 1px #444;
    }

    .mobile-preview__screen {
      position: relative;
      width: 100%;
      /* Domyslnie 16:9 (kiosk=4, najczesciej spotykany TV) - applyMobilePreviewShape()
         w edit-app.js nadpisuje ta zmienna prawdziwa rozdzielczoscia z
         "Ustaw rozdzielczosc", zeby podglad mial ksztalt tresci danego
         ekranu (np. portret dla hd_portrait), a nie zawsze TV/landscape. */
      aspect-ratio: var(--mobile-preview-ratio, 16 / 9);
      overflow: hidden;
      border-radius: 12px;
      background: #000;
    }

    .mobile-preview__screen iframe {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: var(--mobile-preview-width, 1280px);
      height: var(--mobile-preview-height, 720px);
      transform: scale(var(--mobile-preview-scale, .45));
      transform-origin: top left;
      border: 0;
      background: #000;
    }

    .mobile-preview__foot {
      min-height: 46px;
      padding: 8px 16px;
      border-top: 1px solid rgba(31, 32, 36, .08);
    }

    .mobile-preview__foot a {
      color: var(--accent);
      font-weight: 800;
      white-space: nowrap;
    }

    @media (max-width: 480px) {
      .mobile-preview-dialog { width: calc(100vw - 12px); border-radius: 12px; }
      .mobile-preview__head,
      .mobile-preview__foot { padding-left: 12px; padding-right: 12px; }
      .mobile-preview__stage { padding: 10px 6px; }
      .mobile-preview__device { width: calc(100vw - 28px); }
      .mobile-preview__foot { align-items: flex-start; flex-direction: column; gap: 4px; }
    }

    /* Short phones keep the shell fixed; only the content area scrolls. */
    @media (max-width: 720px) and (max-height: 640px) {
      html,
      body {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .container {
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      .tab-content-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
      }
    }

    /* Phone dashboard: keep controls compact and make the content pane the
       only scrolling surface. This prevents the browser chrome from jumping
       while editing and keeps the three tabs usable at narrow widths. */
    @media (max-width: 720px) {
      html,
      body {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .app-header {
        gap: 6px;
        row-gap: 6px;
        padding: 6px 8px;
      }

      .app-header h1 {
        gap: 8px;
        font-size: 14px;
        width: auto;
      }

      .app-header h1 img {
        height: 22px !important;
        max-width: 88px;
      }

      /* Sam tekst tytulu obok logo jest czysto dekoracyjny (logo juz niesie
         marke) - na telefonie zdejmujemy go z ukladu, zeby zwolnic caly
         wiersz, ktory dotad zajmowal. */
      .app-header .title-text {
        display: none;
      }

      .publish-bar__actions .view-mode-control {
        display: block;
        width: 100%;
        min-width: 0;
        height: 32px;
        overflow: hidden;
        font-size: 0;
      }

      .publish-bar__actions .view-mode-control select {
        width: 100%;
        min-width: 0;
        height: 32px;
        min-height: 32px;
        padding: 0 4px;
        font-size: 9px;
        text-align: center;
      }

      .publish-bar {
        flex: 1 1 100%;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 5px;
        padding: 6px 8px;
      }

      .publish-bar__field {
        display: grid;
        grid-column: 1;
        grid-template-columns: minmax(0, 1fr) 34px 34px;
        gap: 5px;
        width: 100%;
      }

      /* "Ekran" jako widoczny label zajmowal wlasny wiersz - na telefonie
         sam wybrany ekran w select (np. "test-dom") wystarczy bez etykiety
         nad nim; ukryta wizualnie (ale dalej dostepna dla czytnikow ekranu)
         zamiast usunieta. */
      .publish-bar__field label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .publish-bar__field select {
        width: 100%;
        min-width: 0;
        min-height: 32px;
        padding: 4px 8px;
        font-size: 12px;
      }

      .publish-bar__field .icon-btn {
        min-height: 32px;
        height: 32px;
      }

      /* "Tryb odtwarzania" (select) i "Wybierz filmy lub zdjecia" (button)
         zajmowaly 2 pelne wiersze kazdy (etykieta + kontrolka) - realnie to
         jeden wybor + jedna akcja, wiec dziela teraz jeden rzad. Etykiety
         ukryte wizualnie tym samym wzorcem co przy "Ekran" powyzej - wartosc
         w select i tekst przycisku same tlumacza, co robia. */
      .playlist-mode-upload-row {
        display: flex;
        /* .form-group's base rule sets flex-direction:column - must override
           explicitly here or this "row" silently stays stacked vertically. */
        flex-direction: row;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 0;
      }

      .playlist-mode-col,
      .playlist-upload-col {
        margin-bottom: 0;
      }

      .playlist-mode-col {
        flex: 0 1 36%;
        min-width: 0;
      }

      .playlist-upload-col {
        flex: 1 1 auto;
        min-width: 0;
      }

      .playlist-mode-upload-row label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .playlist-mode-col select {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 4px 6px;
        font-size: 10px;
      }

      .playlist-upload-col .full-width-control {
        font-size: 9px;
        padding-left: 6px;
        padding-right: 6px;
      }

      .publish-bar > .cloud-meta {
        display: grid;
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 7px;
        width: 100%;
        max-width: none;
        font-size: 9px;
        line-height: 1.1;
      }

      .publish-bar > .cloud-meta > div {
        max-width: none;
        min-width: 0;
      }

      .publish-bar__actions {
        display: grid;
        grid-column: 1;
        /* 4 kolumny, nie 3 - w tym rzedzie sa realnie 4 kontrolki (Szkic,
           Publikuj, podglad na telefonie, Status). Przy 3 kolumnach czwarta
           (Status) zawijala sie do wlasnej, osobnej waskiej linii - dokladnie
           ten sam wzorzec bledu co w .header-nav (siatka o stalej liczbie
           kolumn niedopasowanej do liczby dzieci). */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        width: 100%;
        min-width: 0;
        height: 32px;
        min-height: 32px;
        padding: 0 3px;
        font-size: 8.5px;
        line-height: 1.05;
        text-align: center;
      }

      .publish-bar #cloud-status,
      .publish-bar .cloud-warning {
        grid-column: 1;
        min-width: 0;
        font-size: 9px;
        line-height: 1.1;
      }

      .publish-bar #cloud-status {
        min-height: 11px;
      }

      .publish-bar .cloud-warning {
        min-height: 11px;
      }

      .container {
        flex: 1;
        min-height: 0;
        padding: 6px 8px 0;
        overflow: hidden;
      }

      .tabs-bar {
        display: grid;
        /* 3 kolumny, nie 2 - to sa 3 rownorzedne zakladki (Obsluga/Multimedia/
           System), a nie jedna wazniejsza plus para. Przy 2 kolumnach pierwsza
           zakladka byla sztucznie rozciagana na caly wiersz (grid-column:1/-1
           ponizej), co zajmowalo caly dodatkowy wiersz bez potrzeby. Etykiety
           moga zawijac sie do 2 linii (brak sztywnego height, tylko min-height) -
           to i tak wciaz miesci sie w jednym, plaskim rzedzie 3 przyciskow. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: 2px 0 8px;
        padding: 2px;
      }

      .tabs-bar [role="tab"] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
        min-height: 34px;
        padding: 5px 4px;
        font-size: 8px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        text-wrap: balance;
      }

      .tab-content-scroll {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(18px + var(--footer-safe-space, 80px) + env(safe-area-inset-bottom));
      }

      .grid-dashboard,
      .management-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      .card,
      .management-grid > .card {
        padding: 10px;
      }
    }

    @media (max-width: 360px) {
      .tabs-bar {
        gap: 4px;
      }

      .tabs-bar [role="tab"] {
        padding-inline: 4px;
        font-size: 8.5px;
        letter-spacing: 0.025em;
      }
    }

    /* When an administrator hides client features, the remaining desktop
       cards fill the freed space instead of leaving empty fixed columns. */
    @media (min-width: 1000px) {
      body[data-client-panel-filtered="true"] .management-grid.client-grid-compacted,
      body[data-client-panel-filtered="true"] .multimedia-grid.client-grid-compacted {
        grid-template-columns: repeat(var(--client-visible-columns), minmax(0, 1fr));
      }
    }

    @media (min-width: 1280px) {
      body[data-client-panel-filtered="true"] .system-grid.client-grid-compacted {
        grid-template-columns: repeat(var(--client-visible-columns), minmax(0, 1fr));
      }
    }

    /* Desktop command bar: logo, screen selection, live status, publishing
       and navigation share one compact row. Every group may shrink, but none
       may wrap and increase the height of the application shell. */
    @media (min-width: 721px) {
      .app-header {
        display: block;
        min-height: 44px;
        padding: 5px clamp(8px, 1vw, 14px);
      }

      .header-content {
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      .app-header h1 {
        flex: 0 1 225px;
        min-width: 185px;
        gap: 6px;
        overflow: hidden;
        font-size: clamp(13px, 1.05vw, 17px);
        line-height: 1;
      }

      .app-header h1 img {
        flex: 0 0 auto;
        width: auto;
        height: 22px !important;
        max-width: 54px !important;
      }

      .app-header .title-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .publish-bar {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: transparent;
        backdrop-filter: none;
      }

      .publish-bar__field {
        display: flex;
        flex: 1.15 1 260px;
        align-items: center;
        gap: 4px;
        min-width: 170px;
        overflow: hidden;
      }

      .publish-bar__field label {
        flex: 0 0 auto;
        margin: 0;
        font-size: 8px;
      }

      .publish-bar__field select {
        flex: 1 1 110px;
        width: 110px;
        min-width: 62px;
        min-height: 28px;
        height: 28px;
        padding: 3px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10px !important;
      }

      .publish-bar__field button {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        height: 28px;
        min-height: 28px;
        padding: 0 clamp(4px, 0.45vw, 7px);
        overflow: hidden;
        font-size: clamp(8px, 0.58vw, 9.5px);
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .publish-bar > .cloud-meta {
        display: flex;
        flex: 0.7 1 150px;
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 72px;
        max-width: 160px;
        margin: 0;
        overflow: hidden;
        font-size: clamp(7.5px, 0.51vw, 8.5px);
        line-height: 1;
      }

      .publish-bar > .cloud-meta > div {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .publish-bar__actions {
        display: flex;
        flex: 0 0 440px;
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 440px;
        overflow: hidden;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        height: 28px;
        min-height: 28px;
        padding: 0 7px;
        overflow: hidden;
        font-size: clamp(9px, 0.58vw, 10px);
        line-height: 1.05;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
      }

      .publish-bar__actions #btn-cloud-save-draft { flex-basis: 52px; }
      .publish-bar__actions #btn-cloud-publish { flex-basis: 68px; }
      .publish-bar__actions #btn-mobile-preview { flex-basis: 62px; }
      .publish-bar__actions #cloud-preview-link { flex-basis: 34px; }
      .publish-bar__actions #btn-cloud-refresh { flex-basis: 54px; }

      .publish-bar__actions .view-mode-control {
        flex: 1 1 136px;
        min-width: 126px;
        overflow: hidden;
      }

      .publish-bar__actions .view-mode-control select {
        flex: 1 1 auto;
        min-width: 86px;
        max-width: 128px;
      }

      .toolbar-notices {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 3px;
        min-width: 19px;
        max-width: 19px;
        overflow: hidden;
      }

      .publish-bar #cloud-status,
      .publish-bar .cloud-warning {
        display: block;
        flex: 0 0 8px;
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        margin: 0;
        overflow: hidden;
        font-size: 0;
        line-height: 1;
        border-radius: 50%;
        background: var(--muted);
      }

      .publish-bar #cloud-status.success {
        background: var(--accent);
      }

      .publish-bar #cloud-status.error {
        background: var(--status-offline);
      }

      .publish-bar .cloud-warning {
        background: #b45309;
      }

      @media (max-width: 1600px) {
        .publish-bar__field > label {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
          border: 0;
        }
      }

      @media (max-width: 999px) {
        .app-header h1 {
          flex: 0 0 48px;
          min-width: 48px;
        }

        .app-header .title-text,
        .publish-bar .cloud-meta {
          display: none;
        }

        .publish-bar__field {
          min-width: 140px;
        }

        .publish-bar__actions {
          min-width: 270px;
        }
      }
    }

    /* Laptops and browser windows rendered at Retina CSS widths: one row.
       This used to be forced into two rows to avoid clipping/overlap, back
       when the bar carried six nav links plus a Wariant selector and a TV
       preview link. Those have since moved into the Status popover or been
       merged (Narzedzia), so the remaining controls fit a single compact
       row - verified with a real overlap/clipping/small-target sweep across
       this whole width range before shipping it this way. */
    @media (min-width: 1024px) and (max-width: 1599px) {
      .app-header {
        min-height: 0;
        padding: 6px 8px;
      }

      .header-content {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      .app-header h1 {
        flex: 0 0 auto;
        gap: 0 !important;
      }

      .app-header h1 img {
        height: 22px !important;
        max-width: 64px !important;
      }

      .app-header .title-text,
      .publish-bar .cloud-meta {
        display: none;
      }

      .publish-bar {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        background: none;
        backdrop-filter: none;
        border-bottom: 0;
      }

      .publish-bar__field {
        flex: 1 1 auto;
        min-width: 0;
        gap: 5px;
      }

      .publish-bar__field select {
        min-width: 60px;
        width: 100%;
      }

      .publish-bar__actions {
        flex: 0 0 auto;
        gap: 5px;
      }

      .publish-bar__field button,
      .publish-bar__actions button,
      .publish-bar__actions a {
        font-size: 9.5px;
        padding: 6px 6px;
      }
    }

    /* Portrait tablets use a second, equally compact navigation row. This
       preserves a real 9px minimum font instead of squeezing labels to a few
       pixels while keeping all controls inside the viewport. */
    @media (min-width: 721px) and (max-width: 1023px) {
      .app-header {
        min-height: 0;
        padding: 5px 8px;
      }

      .header-content {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: 28px auto;
        gap: 4px 6px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      .app-header h1 {
        grid-column: 1;
        grid-row: 1;
        width: 48px;
        min-width: 48px;
      }

      .app-header .title-text,
      .publish-bar .cloud-meta {
        display: none;
      }

      .publish-bar {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
      }

      .header-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-end;
      }

      .publish-bar__field {
        flex: 1 1 240px;
        min-width: 170px;
      }

      .publish-bar__actions {
        flex: 0 0 440px;
        min-width: 440px;
      }

      .publish-bar__field button,
      .publish-bar__actions button,
      .publish-bar__actions a {
        font-size: 9px;
      }
    }

    /* At the exact phone/tablet boundary, keep the field group from being
       squeezed by the neighboring icon buttons. */
    @media (min-width: 721px) and (max-width: 767px) {
      .publish-bar__field {
        min-width: 130px;
      }
    }

    /* 5.0.19 — czytelność i dostępność panelu.
       Poprzedni układ próbował zmieścić każdą kartę i każdą akcję w jednym
       rzędzie. Na prawdziwych ekranach kończyło się to tekstem 8–10 px,
       uciętą galerią i paskiem z samymi ikonami. Treść może teraz przewijać
       się pionowo, a interfejs zachowuje czytelne etykiety i cele 44 px. */
    html {
      font-size: 16px;
    }

    body {
      font-size: 14px;
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    input[type="checkbox"]:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 2px;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }

    button:focus-visible,
    a:focus-visible,
    [role="tab"]:focus-visible,
    [role="tabpanel"]:focus-visible,
    [role="region"]:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }

    .header-content {
      overflow: visible !important;
    }

    /* .header-nav sizing/label-visibility lives with the base rule near the
       top of this file (icon-only, 04-09-2026) - this used to carry its own
       unconditional override back to wide text pills, removed as part of
       that same change so there's one definition, not two fighting. */

    .publish-bar .icon-btn,
    .publish-bar__field .icon-btn,
    .publish-bar__actions .icon-btn {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 44px !important;
      max-width: none !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 12px !important;
      gap: 8px !important;
      font-size: 12px !important;
    }

    .toolbar-notices {
      display: flex !important;
      flex: 1 1 100% !important;
      align-items: center;
      gap: 8px !important;
      min-width: 0 !important;
      max-width: none !important;
      overflow: visible !important;
    }

    .publish-bar #cloud-status,
    .publish-bar .cloud-warning {
      display: block !important;
      flex: 0 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 24px !important;
      margin: 0 !important;
      padding: 4px 8px !important;
      overflow: visible !important;
      border: 1px solid rgba(31, 32, 36, 0.14);
      border-radius: 7px !important;
      background: rgba(31, 32, 36, 0.04) !important;
      color: var(--muted);
      font-size: 12px !important;
      line-height: 1.3 !important;
      white-space: normal !important;
    }

    .publish-bar #cloud-status.success {
      border-color: rgba(7, 135, 76, 0.5);
      color: var(--green-dark);
    }

    .publish-bar #cloud-status.error {
      border-color: rgba(220, 38, 38, 0.55);
      color: var(--status-offline);
    }

    .publish-bar .cloud-warning {
      border-color: rgba(180, 83, 9, 0.45);
      color: #b45309;
    }

    .tabs-bar {
      gap: 8px;
      overflow: visible;
    }

    .tabs-bar [role="tab"] {
      height: auto;
      min-height: 44px;
      padding: 8px 16px;
      font-size: 12px;
      line-height: 1.25;
      white-space: normal;
      text-align: center;
      overflow: visible;
    }

    .tab-content-scroll,
    #tab-sale:checked ~ .tab-content-scroll,
    #tab-multimedia:checked ~ .tab-content-scroll,
    #tab-system:checked ~ .tab-content-scroll {
      overflow-x: hidden !important;
      overflow-y: auto !important;
      padding-bottom: calc(24px + var(--footer-safe-space, 80px) + env(safe-area-inset-bottom)) !important;
      scroll-padding-bottom: calc(24px + var(--footer-safe-space, 80px) + env(safe-area-inset-bottom));
      scroll-behavior: smooth;
    }

    #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale,
    #tab-sale:checked ~ .tab-content-scroll .tab-panel-sale .management-grid,
    #tab-multimedia:checked ~ .tab-content-scroll .tab-panel-multimedia,
    #tab-multimedia:checked ~ .tab-content-scroll .multimedia-grid,
    #tab-system:checked ~ .tab-content-scroll .tab-panel-system,
    #tab-system:checked ~ .tab-content-scroll .system-grid {
      height: auto;
      min-height: 0;
    }

    .management-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
      gap: 16px;
      align-items: start;
    }

    .multimedia-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .system-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
      gap: 16px;
      align-items: start;
    }

    body[data-client-panel-filtered="true"] .management-grid.client-grid-compacted,
    body[data-client-panel-filtered="true"] .multimedia-grid.client-grid-compacted,
    body[data-client-panel-filtered="true"] .system-grid.client-grid-compacted {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    }

    .card,
    .management-grid > .card,
    .multimedia-grid > .card,
    .system-grid > .card {
      height: auto;
      min-height: 0;
      padding: 16px;
      overflow: visible;
    }

    .card h2,
    .management-grid .card h2,
    .multimedia-grid .card h2,
    .system-grid .card h2 {
      gap: 8px;
      margin-bottom: 12px;
      font-size: 15px;
      line-height: 1.3;
    }

    label,
    .management-grid label,
    .multimedia-grid label,
    .system-grid label {
      font-size: 12px;
      line-height: 1.35;
    }

    .player-mode-hint,
    .card-description,
    .multimedia-grid .card-description,
    .system-grid .card-description,
    .multimedia-grid .player-mode-hint {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      opacity: 1;
    }

    .management-grid input[type="text"],
    .management-grid input[type="number"],
    .management-grid select,
    .management-grid textarea,
    .multimedia-grid input[type="text"],
    .multimedia-grid input[type="number"],
    .multimedia-grid select,
    .multimedia-grid textarea,
    .system-grid input[type="text"],
    .system-grid input[type="number"],
    .system-grid select,
    .system-grid textarea {
      min-height: 44px;
      padding: 9px 11px;
      font-size: 14px !important;
      line-height: 1.4;
    }

    .management-grid .toggle-item,
    .system-grid .toggle-item {
      min-height: 36px;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      white-space: normal;
    }

    .management-grid .toggle-item input[type="checkbox"],
    .system-grid .toggle-item input[type="checkbox"],
    .gallery-item input[type="checkbox"],
    .playlist-item__pick input[type="checkbox"] {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
    }

    .management-grid button,
    .multimedia-grid button,
    .system-grid button,
    .system-grid .config-export-link,
    .management-grid .btn-row button,
    .multimedia-grid .playlist-actions button,
    .multimedia-grid .playlist-item__actions button {
      height: auto;
      min-height: 44px;
      padding: 8px 12px;
      font-size: 12px;
      line-height: 1.25;
      letter-spacing: 0.035em;
    }

    .management-grid .photo-picker-button {
      min-width: 96px;
      gap: 7px;
      padding-inline: 12px;
    }

    .playlist-scroll,
    .multimedia-grid .playlist-scroll {
      flex: none;
      min-height: 120px;
      max-height: min(52dvh, 560px);
      margin: 12px 0;
      border-color: rgba(31, 32, 36, 0.14);
      scrollbar-width: auto;
    }

    .gallery-scroll,
    .system-grid .gallery-scroll {
      flex: none;
      min-height: 120px;
      max-height: 360px;
      margin: 12px 0;
      border-color: rgba(31, 32, 36, 0.14);
      scrollbar-width: auto;
    }

    ::-webkit-scrollbar {
      width: 11px;
      height: 11px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(31, 32, 36, 0.34);
      border: 2px solid var(--paper);
    }

    .playlist-item,
    .multimedia-grid .playlist-item {
      min-height: 68px;
      gap: 10px;
      padding: 10px;
    }

    .playlist-item__name {
      font-size: 14px;
      line-height: 1.4;
    }

    .playlist-item__meta,
    .playlist-item__fallback,
    .playlist-item__fallback button {
      font-size: 12px;
      line-height: 1.35;
    }

    .playlist-item__actions {
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .playlist-item__actions button,
    .multimedia-grid .playlist-item__actions button {
      width: auto;
      min-width: 68px;
      gap: 5px;
    }

    .playlist-actions,
    .multimedia-grid .playlist-actions {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }

    .player-action-help {
      margin: 8px 0 4px;
      padding: 10px 12px;
      border: 1px solid rgba(7, 135, 76, 0.28);
      border-radius: 9px;
      background: rgba(7, 135, 76, 0.06);
      color: var(--ink);
      font-size: 13px;
      line-height: 1.45;
    }

    .playlist-selection-summary:not([hidden]) {
      display: block;
      min-height: 20px;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .player-control-grid,
    .multimedia-grid .player-control-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin: 10px auto 0;
    }

    .player-control-grid button,
    .multimedia-grid .player-control-grid button {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 44px !important;
      padding: 8px 10px !important;
      border-radius: 10px;
      font-size: 14px;
      text-transform: none;
      letter-spacing: 0;
      overflow: visible !important;
    }

    .player-control-grid .control-icon {
      flex: 0 0 auto;
      font-size: 14px;
    }

    .player-control-grid .control-label,
    .multimedia-grid .player-control-grid .control-label {
      display: block;
      width: auto;
      min-width: 0;
      color: inherit;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.25;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    #btn_player_disable {
      border-color: rgba(220, 38, 38, 0.69);
      color: var(--status-offline);
    }

    .player-status,
    .multimedia-grid .player-status {
      min-height: 24px;
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.4;
    }

    .system-grid .timer-controls #btn-timer-set {
      width: auto;
      min-width: 110px;
      height: auto;
      min-height: 44px;
    }

    .system-grid .gallery-item {
      gap: 9px;
      margin-bottom: 7px;
      padding: 8px;
    }

    .system-grid .gallery-item img {
      width: 44px;
      height: 44px;
    }

    .gallery-item__del,
    .system-grid .gallery-item__del {
      width: auto;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0 10px;
    }

    @media (min-width: 721px) {
      .app-header {
        min-height: 0;
        padding: 8px 12px;
      }

      .header-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "brand"
          "publish"
          "nav";
        gap: 8px;
      }

      .app-header h1 {
        grid-area: brand;
        width: auto;
        min-width: 0;
        font-size: 17px;
      }

      .app-header h1 img {
        height: 28px !important;
        max-width: 108px !important;
      }

      .app-header .title-text {
        display: inline;
      }

      /* Bez [hidden] override tutaj, "display:inline" powyzej (ta sama
         specyficznosc, dalej w kaskadzie) zawsze by wygrywal z gola
         atrybutem hidden - ten sam blad co kiedys .display-profile-custom. */
      .app-header .title-text[hidden] {
        display: none !important;
      }

      .publish-bar {
        grid-area: publish;
        display: grid !important;
        grid-template-columns: minmax(300px, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
        width: 100%;
        min-width: 0;
        padding: 0;
        overflow: visible;
      }

      .publish-bar__field {
        display: flex;
        min-width: 0;
        gap: 8px;
        justify-content: flex-start;
        overflow: visible;
      }

      .publish-bar__field > label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        font-size: 12px;
      }

      .publish-bar__field select {
        flex: 1 1 320px;
        width: 320px;
        min-width: 220px;
        max-width: min(35vw, 520px);
        height: 44px;
        min-height: 44px;
        font-size: 13px !important;
      }

      .publish-bar__actions {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: auto;
        min-width: 0;
        overflow: visible;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        flex: 0 0 auto !important;
        width: auto;
        min-width: max-content;
        height: auto;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 12px;
      }

      .toolbar-notices {
        grid-column: 1 / -1;
      }

      .header-nav {
        grid-area: nav;
        justify-content: flex-start;
      }
    }

    @media (min-width: 1280px) {
      .header-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "brand"
          "publish"
          "nav";
      }

      .multimedia-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.7fr);
      }

      .system-grid,
      body[data-client-panel-filtered="true"] .system-grid.client-grid-compacted {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (min-width: 721px) and (max-width: 1599px) {
      .publish-bar {
        grid-template-columns: minmax(0, 1fr);
      }

      .publish-bar__actions {
        width: 100%;
        justify-content: flex-start;
      }
    }

    @media (max-width: 720px) {
      .app-header .header-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "brand"
          "publish"
          "nav";
        gap: 10px;
        overflow: visible;
      }

      .app-header h1 {
        grid-area: brand;
      }

      .publish-bar {
        grid-area: publish;
        display: grid;
        gap: 10px;
        padding: 0;
      }

      .publish-bar__field {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .publish-bar__field > label,
      .publish-bar__field select {
        position: static;
        grid-column: 1 / -1;
        width: 100%;
        height: auto;
        overflow: visible;
        clip-path: none;
      }

      .publish-bar__field > label {
        font-size: 12px;
      }

      .publish-bar__field select {
        min-height: 44px;
        font-size: 14px;
      }

      /* .publish-bar__field previously only ever held the screen <select>
         plus two .icon-btn buttons (both covered above/elsewhere), so a
         plain labeled button never needed its own mobile touch-target rule
         until "Rozdzielczosc" - caught by
         worker/test-e2e/ux-accessibility.spec.js (38px measured, below the
         44px minimum; see the near-identical .publish-bar__actions rule
         below for the same class of fix). */
      .publish-bar__field button:not(.icon-btn) {
        min-height: 44px;
        font-size: 12px;
      }

      .publish-bar__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .publish-bar__actions button,
      .publish-bar__actions a,
      .publish-bar__actions .icon-btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 11px !important;
      }

      .toolbar-notices {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
      }

      .header-nav {
        grid-area: nav;
        /* Icon-only 44px circles (base rule) wrap on their own now - the
           2-column grid of full-width text pills this used to need is gone
           along with the visible labels. */
        justify-content: center;
        overflow: visible;
      }

      .tabs-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .tabs-bar [role="tab"] {
        min-height: 54px;
        padding: 7px 5px;
        font-size: 11px;
      }

      .playlist-mode-upload-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      .playlist-mode-upload-row label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
      }

      .playlist-mode-col,
      .playlist-upload-col {
        width: 100%;
      }

      .playlist-mode-col select,
      .playlist-upload-col .full-width-control {
        min-height: 44px;
        font-size: 12px;
      }

      .management-grid,
      .multimedia-grid,
      .system-grid,
      body[data-client-panel-filtered="true"] .management-grid.client-grid-compacted,
      body[data-client-panel-filtered="true"] .multimedia-grid.client-grid-compacted,
      body[data-client-panel-filtered="true"] .system-grid.client-grid-compacted {
        grid-template-columns: minmax(0, 1fr);
      }

      .management-grid .toggle-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .player-control-grid,
      .multimedia-grid .player-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .playlist-item {
        grid-template-columns: 24px minmax(0, 1fr);
      }

      .playlist-item__actions {
        grid-column: 2;
        justify-content: flex-start;
      }

      /* Na bardzo niskim telefonie rozbudowany, opisany naglowek nie moze
         zabrac calej wysokosci wewnetrznemu panelowi. Telefon korzysta z
         naturalnego przewijania dokumentu: naglowek odjezdza do gory, a
         ostatnia karta i stopka sa zawsze osiagalne. */
      html,
      body {
        height: auto !important;
        min-height: 100dvh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }

      body {
        display: block;
      }

      .container {
        display: block;
        overflow: visible !important;
      }

      .tab-content-scroll,
      #tab-sale:checked ~ .tab-content-scroll,
      #tab-multimedia:checked ~ .tab-content-scroll,
      #tab-system:checked ~ .tab-content-scroll {
        overflow: visible !important;
        padding-bottom: 32px !important;
      }
    }

    /* === Toolbar redesign (przyciski gornego paska: Ekran / Zmien nazwe /
       Nowy link TV / Zapisz szkic / Publikuj na TV / Podglad telefonu /
       Status ekranu) ===
       Zglaszany problem: na typowych szerokosciach laptopa (~1280-1440px)
       ten pasek realnie lamal sie na kilka wierszy (grupa Ekran osobno od
       grupy akcji - historia w kilku nakladajacych sie @media wyzej), a same
       przyciski - WERSALIKI, waga 800, szeroki letter-spacing przy 12px -
       czytaly sie jako stloczone i krzykliwe zamiast eleganckie. Zamiast
       rozplatywac kazda z tych starszych warstw z osobna (zbyt ryzykowne bez
       pelnego przegladu kazdej z nich na kazdej szerokosci), ten blok - jako
       ostatni w kaskadzie - jest teraz jedynym realnym zrodlem prawdy dla
       typografii i dla tego, czy Ekran+akcje trzymaja sie jednego wiersza.
       Starsze reguly celowo zostaly, do ewentualnego pozniejszego sprzatania. */

    .publish-bar__field button,
    .publish-bar__actions button,
    .publish-bar__actions a {
      text-transform: none;
      font-weight: 600;
      letter-spacing: normal;
    }

    @media (min-width: 1000px) {
      /* Wybor ekranu i akcje publikacji pozostaja w jednym wierszu.
         Komunikaty i nawigacja dziela drugi wiersz na laptopie; ponizszy
         wariant od 1400px nadal miesci caly naglowek w jednym wierszu.
         display:contents zachowuje DOM i dotychczasowe selektory. */
      .header-content {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) max-content;
        grid-template-rows: none;
        grid-template-areas:
          "brand screen publish"
          "notice notice nav";
        align-items: center;
        gap: 8px 16px;
      }

      .app-header h1 {
        grid-area: brand;
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        order: initial;
      }

      .publish-bar {
        /* !important niezbedny - .publish-bar ma gdzie indziej w tym
           pliku "display: grid !important" (np. linia ~3465, w bloku
           (min-width:721px)), ktore inaczej wygralaby mimo pozniejszej
           pozycji tej reguly w kaskadzie. */
        display: contents !important;
      }

      .publish-bar__field {
        grid-area: screen;
        order: initial;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
      }

      .header-nav {
        grid-area: nav;
        flex: 0 0 auto;
        order: initial;
        margin-left: 0;
      }

      .publish-bar__actions {
        grid-area: publish;
        order: initial;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
      }

      .toolbar-notices {
        grid-area: notice;
        order: initial;
        flex: 1 1 100%;
      }

      /* Selekt ekranu potrafil urosnac do 520px - dla samej nazwy ekranu to
         wiecej miejsca niz potrzeba, kosztem miejsca na przyciski akcji. */
      .publish-bar__field select {
        min-width: 140px;
        max-width: 200px;
      }

      .publish-bar__field button,
      .publish-bar__actions button,
      .publish-bar__actions a {
        /* 44px, nie mniej - to nie kosmetyka: worker/test-e2e/ux-accessibility.spec.js
           realnie sprawdza min. cel dotykowy 44x44px na calym panelu, i slusznie -
           TV piloty/dotyk potrzebuja tego marginesu. Pierwsza wersja tego bloku
           schodzila do 38px i ten test to zlapal. */
        height: 44px;
        min-height: 44px;
        font-size: 13px;
      }

      /* Zmien nazwe / Nowy link TV / Podglad telefonu: z powrotem do
         faktycznie samej ikony (tak jak opisuje komentarz przy .icon-btn
         wyzej - zanim pozniejsza, bezwarunkowa warstwa "5.0.19" po cichu
         przywrocila widoczna etykiete obok ikony). Tytul/aria-label (juz
         obecne w HTML) dalej niosa nazwe dla tooltipa i czytnikow ekranu -
         etykieta wizualnie ukryta, nie usunieta. */
      .publish-bar .icon-btn {
        width: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
      }

      .publish-bar .icon-btn .action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }
    }

    /* === Finalna gestosc panelu desktopowego, 04-09-2026 ===
       Na szerokim ekranie naglowek jest jednym, spokojnym paskiem: marka,
       ekran, publikacja, komunikat i nawigacja. Kontrolki nadal maja pelne
       nazwy dostepnosci i cele 44 px, ale akcje techniczne sa ikonami.
       Formularze ponizej wracaja do proporcji panelu roboczego zamiast
       wygladac jak interfejs powiekszony przez przegladarke. */
    @media (min-width: 1400px) {
      .app-header {
        padding: 6px 12px;
      }

      .header-content {
        display: grid !important;
        grid-template-columns: auto minmax(300px, 1fr) max-content minmax(0, auto) auto;
        grid-template-areas: "brand screen publish notice nav";
        align-items: center;
        gap: 8px;
        width: 100%;
      }

      .app-header h1 {
        grid-area: brand;
        order: initial;
      }

      .publish-bar__field {
        grid-area: screen;
        order: initial;
        flex: 1 1 auto;
        gap: 6px;
      }

      .publish-bar__field > label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .publish-bar__field select {
        flex: 1 1 160px;
        width: auto;
        min-width: 150px;
        max-width: 210px;
        height: 44px;
        min-height: 44px;
        padding: 0 10px;
        font-size: 12px !important;
      }

      .publish-bar__actions {
        grid-area: publish;
        order: initial;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        width: auto;
        gap: 6px;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        min-width: 44px;
        padding-inline: 10px;
        font-size: 12px;
      }

      .toolbar-notices {
        grid-area: notice;
        order: initial;
        align-self: center;
        flex: 0 1 auto !important;
        flex-wrap: nowrap;
        gap: 5px !important;
        height: 24px;
        overflow: hidden !important;
      }

      .publish-bar #cloud-status {
        flex: 0 0 8px !important;
        width: 8px !important;
        min-width: 8px !important;
        height: 8px !important;
        min-height: 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--muted) !important;
        color: transparent;
      }

      .publish-bar #cloud-status:empty {
        display: none !important;
      }

      .publish-bar #cloud-status.success {
        background: var(--status-online) !important;
      }

      .publish-bar #cloud-status.error {
        background: var(--status-offline) !important;
      }

      .publish-bar .cloud-warning {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        padding: 3px 7px !important;
        overflow: hidden !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis;
      }

      .header-nav {
        grid-area: nav;
        order: initial;
        flex-wrap: nowrap;
        margin-left: 0;
        gap: 5px;
      }

      .header-nav .lang-switch {
        margin-left: 5px;
      }
    }

    @media (min-width: 1000px) {
      body {
        font-size: 13px;
      }

      .container {
        padding: 10px 12px 0;
      }

      .tabs-bar {
        gap: 6px;
        margin: 0 0 8px;
        padding: 0;
      }

      .tabs-bar [role="tab"] {
        min-height: 36px;
        padding: 6px 14px;
        font-size: 10.5px;
        line-height: 1.15;
        white-space: nowrap;
      }

      .management-grid,
      body[data-client-panel-filtered="true"] .management-grid.client-grid-compacted {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .card,
      .management-grid > .card,
      .multimedia-grid > .card,
      .system-grid > .card {
        padding: 12px;
        border-radius: 12px;
      }

      .card h2,
      .management-grid .card h2,
      .multimedia-grid .card h2,
      .system-grid .card h2 {
        gap: 6px;
        margin-bottom: 8px;
        font-size: 13px;
        letter-spacing: 0.055em;
        line-height: 1.2;
      }

      .management-grid .form-group {
        gap: 2px;
        margin-bottom: 6px;
      }

      label,
      .management-grid label,
      .multimedia-grid label,
      .system-grid label {
        margin-left: 2px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.035em;
        line-height: 1.2;
      }

      .management-grid input[type="text"],
      .management-grid input[type="number"],
      .management-grid select,
      .management-grid textarea,
      .multimedia-grid input[type="text"],
      .multimedia-grid input[type="number"],
      .multimedia-grid select,
      .multimedia-grid textarea,
      .system-grid input[type="text"],
      .system-grid input[type="number"],
      .system-grid select,
      .system-grid textarea {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 12px !important;
        line-height: 1.3;
      }

      .management-grid .toggle-grid {
        gap: 4px 8px;
        margin: 2px 0;
        padding: 7px;
      }

      .management-grid .toggle-item,
      .system-grid .toggle-item {
        min-height: 30px;
        gap: 6px;
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
      }

      .management-grid .toggle-item input[type="checkbox"],
      .system-grid .toggle-item input[type="checkbox"] {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
      }

      .management-grid button,
      .management-grid .btn-row button {
        min-height: 38px;
        padding: 6px 10px;
        font-size: 10.5px;
        letter-spacing: 0.025em;
      }

      .management-grid .btn-row {
        gap: 6px;
        padding-top: 6px;
      }

      .management-grid .room-live-status {
        min-height: 12px;
        margin-top: 3px;
        font-size: 9.5px;
      }

      .app-footer {
        justify-content: space-between;
        gap: 12px;
        min-height: 36px;
        padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid var(--line);
        color: var(--muted);
      }

      .app-footer__left {
        order: initial;
        justify-content: flex-start;
        gap: 8px;
        opacity: 1;
      }

      .app-footer__brand-name {
        color: var(--ink);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.025em;
      }

      .app-footer__separator {
        height: auto;
        color: var(--line-strong);
        font-size: 11px;
        line-height: 1;
      }

      .app-footer__extra {
        height: auto;
        color: var(--muted);
        font-size: 10px;
        letter-spacing: 0.02em;
        line-height: 1;
      }

      .app-footer__right {
        order: initial;
      }

      .version-tag {
        padding: 2px 6px;
        border-color: var(--line-strong);
        background: var(--soft);
        color: var(--muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.025em;
      }

    }

    /* Stopka panelu jest elementem tej samej jasnej aplikacji na kazdej
       szerokosci. Wspolny shared.css zostawia czarny wariant dla ekranow TV,
       ale panel administracyjny nie powinien do niego wracac na tablecie ani
       telefonie. */
    .app-footer {
      justify-content: space-between;
      gap: 10px;
      min-height: 36px;
      padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
      background: var(--admin-footer-bg);
      border-top: 1px solid var(--line);
      color: var(--muted);
    }

    .app-footer__left {
      order: initial;
      justify-content: flex-start;
      gap: 8px;
      opacity: 1;
    }

    .app-footer__brand-lockup {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      background: transparent;
    }

    .app-footer__brand-lockup .app-footer__logo {
      display: block;
      width: auto;
      height: 22px;
    }

    .app-footer__brand-name {
      color: var(--ink);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.025em;
      white-space: nowrap;
    }

    .app-footer__separator {
      height: auto;
      color: var(--line-strong);
      font-size: 11px;
      line-height: 1;
    }

    .app-footer__extra {
      height: auto;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: 0.02em;
      line-height: 1;
    }

    .app-footer__right {
      order: initial;
    }

    .version-tag {
      padding: 2px 6px;
      border-color: var(--line-strong);
      background: var(--soft);
      color: var(--muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.025em;
    }

    /* Tablet pionowy: marka i nawigacja w pierwszym rzedzie, komplet operacji
       ekranu w drugim, komunikat pod nimi. Ikony techniczne maja tooltipy i
       nazwy dla czytnikow, wiec nie potrzebuja dlugich etykiet w pasku. */
    @media (min-width: 721px) and (max-width: 999px) {
      .app-header {
        padding: 7px 10px;
      }

      .header-content {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
          "brand nav"
          "publish publish";
        gap: 7px 10px;
        overflow: visible !important;
      }

      .app-header h1 {
        grid-area: brand;
        width: auto;
        min-width: 0;
      }

      .header-nav {
        grid-area: nav;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 5px;
      }

      .publish-bar {
        grid-area: publish;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "screen actions"
          "notice notice";
        gap: 6px 8px;
        width: 100%;
        padding: 0;
      }

      .publish-bar__field {
        grid-area: screen;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
      }

      .publish-bar__field > label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .publish-bar__field select {
        flex: 1 1 150px;
        width: auto;
        min-width: 120px;
        max-width: 180px;
        height: 44px;
        min-height: 44px;
        padding: 0 9px;
        font-size: 12px !important;
      }

      .publish-bar .icon-btn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
      }

      .publish-bar .icon-btn .action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .publish-bar__actions {
        grid-area: actions;
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        gap: 6px;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        flex: 0 0 auto !important;
        width: auto;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 10px;
        font-size: 11px;
      }

      .toolbar-notices {
        grid-area: notice;
        display: flex !important;
        align-items: center;
        gap: 6px !important;
        width: 100%;
        height: 22px;
        overflow: hidden !important;
      }

      .publish-bar #cloud-status {
        display: block !important;
        flex: 0 0 8px !important;
        width: 8px !important;
        min-width: 8px !important;
        height: 8px !important;
        min-height: 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--muted) !important;
        color: transparent;
        font-size: 0 !important;
      }

      .publish-bar #cloud-status:empty {
        display: none !important;
      }

      .publish-bar #cloud-status.success {
        background: var(--status-online) !important;
      }

      .publish-bar #cloud-status.error {
        background: var(--status-offline) !important;
      }

      .publish-bar .cloud-warning {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 3px 7px !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis;
      }
    }

    /* Wspolna, lzejsza gestosc kart na telefonie i tablecie. Pola i akcje
       zostaja pelnymi celami dotykowymi, zmniejszamy jedynie typografie oraz
       puste odstepy. */
    @media (max-width: 999px) {
      .container {
        padding-inline: 8px;
      }

      .card,
      .management-grid > .card,
      .multimedia-grid > .card,
      .system-grid > .card {
        padding: 12px;
        border-radius: 12px;
      }

      .card h2,
      .management-grid .card h2,
      .multimedia-grid .card h2,
      .system-grid .card h2 {
        gap: 6px;
        margin-bottom: 8px;
        font-size: 13px;
        letter-spacing: 0.055em;
        line-height: 1.2;
      }

      .form-group,
      .management-grid .form-group {
        gap: 3px;
        margin-bottom: 8px;
      }

      label,
      .management-grid label,
      .multimedia-grid label,
      .system-grid label {
        margin-left: 2px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.035em;
        line-height: 1.2;
      }

      .management-grid input[type="text"],
      .management-grid input[type="number"],
      .management-grid select,
      .management-grid textarea,
      .multimedia-grid input[type="text"],
      .multimedia-grid input[type="number"],
      .multimedia-grid select,
      .multimedia-grid textarea,
      .system-grid input[type="text"],
      .system-grid input[type="number"],
      .system-grid select,
      .system-grid textarea {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 13px !important;
        line-height: 1.3;
      }

      .management-grid .toggle-grid,
      .system-grid .toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        margin: 3px 0;
        padding: 8px;
      }

      .management-grid .toggle-item,
      .system-grid .toggle-item {
        min-height: 34px;
        gap: 6px;
        font-size: 10.5px;
        line-height: 1.2;
      }

      .management-grid .toggle-grid > .toggle-item:last-child:nth-child(odd),
      .system-grid .toggle-grid > .toggle-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }

      .management-grid button,
      .multimedia-grid button,
      .system-grid button,
      .system-grid .config-export-link,
      .management-grid .btn-row button {
        min-height: 44px;
        padding: 7px 10px;
        font-size: 11px;
        letter-spacing: 0.025em;
      }

      .header-nav {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        border-radius: 13px;
        background: rgba(31, 32, 36, 0.035);
      }

      .header-nav a,
      .header-nav button {
        width: 100%;
        min-width: 0;
        height: 44px;
        gap: 5px;
        padding: 0 6px;
        border-color: rgba(31, 32, 36, 0.08);
        background: rgba(255, 255, 255, 0.72);
      }

      .header-nav svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
      }

      .header-nav .nav-label {
        position: static;
        width: auto;
        min-width: 0;
        height: auto;
        padding: 0;
        overflow: hidden;
        clip-path: none;
        color: inherit;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: 0.025em;
        line-height: 1.1;
        text-align: center;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .header-nav .lang-switch {
        margin-left: 0;
      }
    }

    /* Telefon: wybor ekranu i trzy akcje techniczne dziela pierwszy rzad;
       publikacja ma drugi rzad z dwoma opisanymi akcjami i dwiema ikonami.
       Nawigacja pozostaje regularna siatka 4x2, dzieki czemu kazda ikona ma
       czytelny podpis bez poziomego przewijania. */
    @media (max-width: 720px) {
      .app-header {
        padding: 7px 8px;
      }

      .app-header .header-content {
        gap: 7px;
      }

      .app-header h1 {
        width: auto;
        font-size: 14px;
      }

      .publish-bar {
        display: grid !important;
        gap: 6px;
        padding: 0;
      }

      .publish-bar__field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(3, 44px);
        gap: 6px;
        width: 100%;
      }

      .publish-bar__field > label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .publish-bar__field select {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        padding: 0 9px;
        font-size: 12px !important;
      }

      .publish-bar__field .icon-btn {
        grid-row: 1;
      }

      .publish-bar .icon-btn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
      }

      .publish-bar .icon-btn .action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .publish-bar__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) 44px 44px;
        gap: 6px;
        width: 100%;
      }

      .publish-bar__actions button,
      .publish-bar__actions a {
        width: 100% !important;
        min-width: 0;
        height: 44px;
        min-height: 44px !important;
        padding: 0 7px;
        font-size: 11px !important;
        line-height: 1.1;
      }

      .publish-bar__actions .icon-btn {
        width: 44px !important;
      }

      .toolbar-notices {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px !important;
      }

      .publish-bar #cloud-status,
      .publish-bar .cloud-warning {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 4px 7px !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis;
      }

      .header-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
      }

      .tabs-bar [role="tab"] {
        min-height: 44px;
        padding: 6px 4px;
        font-size: 10px;
      }
    }

    @media (min-width: 721px) and (max-width: 999px) {
      .header-nav {
        grid-template-columns: repeat(8, minmax(0, 1fr));
      }

      .header-nav a,
      .header-nav button {
        flex-direction: column;
        gap: 1px;
        padding: 3px 2px;
      }

      .header-nav .nav-label {
        width: 100%;
        font-size: 9px;
      }
    }

    @media (max-width: 340px) {
      .header-nav a,
      .header-nav button {
        flex-direction: column;
        gap: 1px;
        padding: 3px 2px;
      }

      .header-nav svg {
        width: 15px;
        height: 15px;
      }

      .header-nav .nav-label {
        font-size: 8.5px;
        line-height: 1;
        white-space: normal;
      }
    }

    /* Stack icons above full action labels on narrow phones. */
    @media (max-width: 480px) {
      .player-control-grid button,
      .multimedia-grid .player-control-grid button {
        flex-direction: column !important;
        gap: 2px !important;
        min-height: 44px !important;
        padding: 4px !important;
      }

      .player-control-grid .control-label,
      .multimedia-grid .player-control-grid .control-label {
        width: 100%;
        font-size: 14px;
        line-height: 1.15;
        text-align: center;
      }
    }

    /* Pierwsze uruchomienie: checklista jest czescia przewijanej zawartosci,
       wiec nie zaslania naglowka, stopki ani kontrolek edytora. Po zwinieciu
       zostaje stale dostepna jako kompaktowy, 44-pikselowy przycisk. */
    .onboarding {
      margin: 0 0 12px;
      border: 1px solid rgba(7, 135, 76, 0.28);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 8px 26px rgba(20, 62, 43, 0.1);
      overflow: hidden;
    }

    .onboarding__head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px 14px;
      padding: 10px 12px;
    }

    .onboarding__heading {
      min-width: 0;
    }

    .onboarding__title {
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.25;
    }

    .onboarding__progress {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .onboarding__toggle,
    .onboarding__action {
      min-height: 44px;
    }

    .onboarding__body {
      padding: 0 12px 12px;
      border-top: 1px solid rgba(31, 32, 36, 0.08);
    }

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

    .onboarding__intro,
    .onboarding__privacy {
      margin: 10px 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .onboarding__steps {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 200px));
      justify-content: start;
      /* Bez tego grid domyslnie stretchuje wszystkie karty do wysokosci
         najwyzszej - krok z jednolinijkowym opisem wygladal identycznie
         "wysoki" jak sasiad z dwoma liniami tekstu. */
      align-items: start;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .onboarding__step {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 4px;
      min-width: 0;
      padding: 8px;
      border: 1px solid rgba(31, 32, 36, 0.12);
      border-radius: var(--radius-sm);
      background: var(--soft);
    }

    .onboarding__step[data-complete="true"] {
      border-color: rgba(7, 135, 76, 0.5);
      background: rgba(7, 135, 76, 0.07);
    }

    .onboarding__step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--paper);
      border: 1px solid rgba(31, 32, 36, 0.18);
      color: var(--ink);
      font-size: 11px;
      font-weight: 800;
    }

    .onboarding__step[data-complete="true"] .onboarding__step-number {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
    }

    .onboarding__step h3 {
      margin: 0;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.35;
    }

    .onboarding__step p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }

    .onboarding__step-status {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .onboarding__step[data-complete="true"] .onboarding__step-status {
      color: var(--green-dark);
    }

    .onboarding__action {
      width: 100%;
      white-space: normal;
      line-height: 1.2;
    }

    .onboarding__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 10px;
    }

    .onboarding__footer .onboarding__privacy {
      margin: 0;
    }

    .onboarding__help {
      flex: 0 0 auto;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 700;
    }

    .onboarding-target-highlight {
      box-shadow: 0 0 0 4px rgba(7, 135, 76, 0.25) !important;
    }

    @media (max-width: 1100px) {
      .onboarding__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

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

      .onboarding__head {
        display: grid;
      }

      .onboarding__toggle {
        width: 100%;
      }

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

      .onboarding__footer {
        display: grid;
        align-items: start;
      }

      .onboarding__help {
        width: fit-content;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .onboarding-target-highlight {
        transition: none;
      }
    }

    /* Menu narzedzi pozostawia trzy rzadziej uzywane edytory w jednym,
       stalym miejscu naglowka, ale nie ukrywa ich za niejednoznacznym linkiem
       prowadzacym tylko do Ukladu. Native details/summary zachowuje obsluge
       myszy, dotyku i klawiatury bez wlasnego modelu ARIA. */
    .header-nav .nav-tools-menu {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 44px;
      color: var(--ink);
    }

    .header-nav .nav-tools-menu > summary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 44px;
      gap: 1px;
      padding: 3px 2px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: inherit;
      cursor: pointer;
      list-style: none;
    }

    .header-nav .nav-tools-menu > summary::-webkit-details-marker {
      display: none;
    }

    .header-nav .nav-tools-menu > summary:hover,
    .header-nav .nav-tools-menu[open] > summary {
      border-color: rgba(7, 135, 76, 0.2);
      background: rgba(7, 135, 76, 0.1);
      color: var(--accent);
    }

    .header-nav .nav-tools-menu > summary:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    .nav-tools-menu__panel {
      position: absolute;
      z-index: 120;
      top: calc(100% + 6px);
      right: 0;
      display: grid;
      width: min(300px, calc(100vw - 16px));
      gap: 5px;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--paper);
      box-shadow: 0 14px 36px rgba(20, 62, 43, 0.18);
    }

    .header-nav .nav-tools-menu__panel a {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
      width: 100%;
      height: auto;
      min-height: 52px;
      gap: 2px;
      padding: 8px 10px;
      text-align: left;
    }

    .nav-tools-menu__title {
      color: inherit;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .nav-tools-menu__description {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 500;
      line-height: 1.25;
    }

    @media (max-width: 999px) {
      .header-nav .nav-tools-menu[open] {
        grid-column: 1 / -1;
        height: auto;
      }

      .header-nav .nav-tools-menu > summary {
        gap: 5px;
        padding: 0 6px;
        border-color: rgba(31, 32, 36, 0.08);
        background: rgba(255, 255, 255, 0.72);
      }

      .nav-tools-menu__panel {
        position: static;
        width: 100%;
        margin-top: 4px;
        box-shadow: none;
      }

      .header-nav .nav-tools-menu__panel a {
        min-height: 56px;
      }
    }

    /* Laptop/desktop: wysoki panel komunikatow dzwiekowych zajmuje dwa
       rzedy siatki, dzieki czemu kolejne karty wypelniaja wolne miejsce pod
       alarmem i timerem. Na ekranach dotykowych zostaja cele 44 px. */
    @media (min-width: 1000px) {
      .system-grid {
        grid-auto-flow: row dense;
      }

      .system-grid #sound-alerts-card {
        grid-row: span 2;
      }

      .system-grid .btn-row {
        gap: 6px;
        padding-top: 6px;
      }

      .system-grid button,
      .system-grid .config-export-link {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 10.5px;
        letter-spacing: 0.025em;
      }

      .system-grid .timer-controls #btn-timer-set {
        min-width: 88px;
      }

      /* The older wide-screen gallery rule is more specific than the
         generic laptop button rule above. Without this equally specific
         override the upload action falls back to 30px / 8px at 1280px+,
         although every neighbouring system action is 36px / 10.5px. */
      .system-grid .gallery-upload-row #btn-gallery-upload {
        height: auto;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 10.5px;
      }
    }

    /* End of Styles */

    /* Keep single-column rows at their content height when mobile WebKit resizes. */
    @media (max-width: 720px) {
      .system-grid { align-content: start; grid-auto-rows: min-content; }
    }

    /* Native WebKit menus ignore min-height; keep room quick choices touch-sized. */
    @media (max-width: 760px) {
      .tab-panel-sale .form-group select { height: 44px; }
    }

    #content-source-card p { margin: 0; }
    #content-source-card p + p { margin-top: 12px; }

    #content-source-card .source-help-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      line-height: 1.25;
      text-align: center;
      text-decoration: none;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    /* One entry point owns selection, editing and adding on every viewport. */
    .playlist-upload-col #btn_player_set {
      min-height: 44px;
      gap: 8px;
      font-size: 14px;
      line-height: 1.4;
      text-transform: none;
      letter-spacing: 0;
    }
    .playlist-upload-col #btn_player_set .control-icon { flex: 0 0 auto; }
    .playlist-upload-col #btn_player_set .control-label { min-width: 0; }

/* Playback controls override the legacy icon-only row only in this group. */
.multimedia-grid .player-control-grid.player-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  max-width: none;
}
.player-control-row > .player-mode-action {
  flex: 1 1 240px;
  min-width: 0;
}
.player-control-row > .playlist-upload-action {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}
.player-control-row .player-mode-action label {
  display: block;
  margin: 0 0 6px;
}
/* The legacy controls use important sizing; keep the new labels readable. */
.multimedia-grid .player-control-grid.player-control-row > button,
.multimedia-grid .player-control-grid.player-control-row #btn_player_set {
  flex: 1 1 112px !important;
  width: auto !important;
  min-width: 44px !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  flex-direction: row !important;
  gap: 8px !important;
  white-space: normal !important;
  overflow: visible !important;
}
.multimedia-grid .player-control-grid.player-control-row #btn_player_set {
  width: 100% !important;
}
.player-control-grid.player-control-row .control-label {
  width: auto;
  min-width: 0;
  font-size: .875rem;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.multimedia-grid .player-control-grid.player-control-row select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px !important;
  height: 44px !important;
}
.player-control-grid.player-control-row .playlist-selection-summary[hidden] {
  display: none;
}
@media (max-width: 600px) {
  .player-control-row > .player-mode-action,
  .player-control-row > .playlist-upload-action { flex-basis: 100%; }
}