/* ==========================================================================
   Foodini — portal wewnętrzny

   Narzędzie pracy zespołu, nie witryna. Gęsto, czytelnie, bez ozdób.
   Tu powstaje pierwsze wypełnienie lokalu: dane, menu i motyw graficzny.
   ========================================================================== */

/* --- Kroje pisma aplikacji -----------------------------------------------
 *
 * Archivo i Martian Mono serwujemy sami z /shared/fonty/, nie z
 * fonts.googleapis.com — ten sam powód co w kiosku (R-6): tablet w kiosku
 * musi działać przy padniętym internecie, a portal dzieli arkusz krojów
 * z resztą aplikacji.
 *
 * Oba kroje są zmienne. Po dwa pliki na krój — polskie ą, ę, ł, ś, ż siedzą
 * w zestawie rozszerzonym, `unicode-range` ściąga go dopiero przy takiej literze. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/martian-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/martian-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Figtree i Caveat — tylko do próbek w zakładce Wygląd (pary krojów, miniatury
   kompozycji). Te same pliki, które serwuje aplikacja klienta, więc próbka
   w portalu wygląda jak lokal na telefonie. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/shared/fonty/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/shared/fonty/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Siedem krojów z punktów Bukowych Tarasów (C-13) — też tylko do próbek w zakładce
   Wygląd. Bloki przepisane z web/client/style.css, bez kursyw. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/dm-serif-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/dm-serif-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --atrament: #14245C;
  --kobalt: #2B49B8;
  --mgla: #EDF1FC;
  --papier: #F7F8FC;
  --linia: #DDE3F2;
  --cien: #6E769A;
  --zielen: #1B7A4C;
  --czerwien: #B3261E;
  --musztarda: #E8B33C;
  --krok: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  color-scheme: light;

  /* Oprawa narzędzia: ciemny grafit z rodziny granatu marki. Treść zostaje
     na jasnych kartach — po prawej stoi kolorowy podgląd restauracji i portal
     nie może z nim konkurować o uwagę. */
  --grafit: #1B2233;
  --stan-zielony: #1B7A4C;
  --stan-bursztyn: #8A6300;
  --stan-czerwony: #B3261E;
  /* Skala odstępów panelu roboczego: gęsto, ale bez ciasnoty. Tylko
     `--odstep-3` jest dziś wywoływane — reszta skali (1, 2, 4, 5) wróci,
     gdy naprawdę będzie potrzebna, nie deklarujemy na zapas (runda poprawek,
     etap 2). To samo dotyczy `--grafit-jasny`. */
  --odstep-3: 16px;
}

* { box-sizing: border-box; }
/* Bez tego tablet czeka ~300 ms po dotknięciu, żeby sprawdzić, czy nie
   nadchodzi drugie stuknięcie (podwójny klik = zoom) — na 8,3" ten odstęp
   czuć jako opóźnienie każdego przycisku. */
body { margin: 0; background: var(--papier); color: var(--atrament); font-family: var(--krok); font-size: 14px; touch-action: manipulation; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
:focus-visible { outline: 3px solid var(--musztarda); outline-offset: 2px; }
a { color: var(--kobalt); }

.gora {
  background: var(--grafit); color: #fff; padding: 13px 24px;
  display: flex; align-items: center; gap: 14px;
}
.gora .znak { font-weight: 800; font-size: 17px; }
.gora .znak span { color: var(--musztarda); }
.gora .pod { color: #A9B5DE; font-size: 13px; }
.gora .wypelniacz { margin-left: auto; }
.gora button {
  background: rgba(255, 255, 255, .14); padding: 8px 15px; border-radius: 9px; font-size: 13px;
}

main { max-width: 1180px; margin: 0 auto; padding: 24px; }

.brama { max-width: 380px; margin: 90px auto; background: #fff; padding: 30px; border-radius: 16px; border: 1px solid var(--linia); }
.brama h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.brama p { margin: 0 0 18px; color: var(--cien); }

h1.tytul { font-size: 26px; font-weight: 800; letter-spacing: -.7px; margin: 0 0 4px; }
p.podtytul { color: var(--cien); margin: 0 0 22px; }

h2.sekcja {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--cien);
  margin: 30px 0 12px; font-weight: 700;
}

.karta { background: #fff; border: 1px solid var(--linia); border-radius: 14px; padding: 18px; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--linia); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linia); }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--cien); background: var(--mgla); }
tr:last-child td { border-bottom: 0; }
td.liczba { font-family: var(--mono); font-size: 12.5px; }

.plakietka { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; }
.plakietka.ok { background: #E3F3EA; color: var(--zielen); }
.plakietka.zle { background: #FBE9E7; color: var(--czerwien); }
.plakietka.cisza { background: #FDF2D8; color: #8A6300; }

/* Zamówienia na godzinę z nierozwiązanym problemem (K-24) — ramka nad tabelą
   lokali, widoczna tylko, gdy jest co pokazać (patrz `widokRamkiDoWyjasnienia`). */
.ramka-do-wyjasnienia {
  background: #FBE9E7; border: 1px solid var(--czerwien); border-radius: 14px;
  padding: 16px; margin: 0 0 22px;
}
.ramka-do-wyjasnienia h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--czerwien); }
.ramka-do-wyjasnienia table { border-color: var(--czerwien); }

.ramka-wiadomosci {
  background: var(--mgla); border: 1px solid var(--kobalt); border-radius: 14px;
  padding: 16px; margin: 0 0 22px;
}
.ramka-wiadomosci h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--kobalt); }
.ramka-wiadomosci table { border-color: var(--kobalt); }
.ramka-wiadomosci .tresc-wiadomosci { white-space: pre-wrap; max-width: 60ch; }

label { display: block; font-size: 12.5px; color: var(--cien); margin: 12px 0 5px; font-weight: 500; }
/* Uchwyt dotykowy co najmniej 44 px (P-2, tablet 8,3") — dotyczy też
   przycisków `.dzialanie` niżej. */
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linia); border-radius: 9px;
  font-family: inherit; font-size: 14px; background: #fff; color: var(--atrament);
  min-height: 44px;
}
input[type='color'] { padding: 3px; min-height: 44px; }
textarea { min-height: 66px; resize: vertical; }

/* Uchwyt suwaka: sam pasek jest cienki, ale kula do chwytania ma 28 px plus
   obszar wokół niej — pole całego elementu i tak liczy się jako 44 px. */
input[type='range'] { min-height: 44px; }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kobalt); border: 2px solid #fff; cursor: pointer;
}

.siatka2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.siatka3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }

.dzialanie {
  padding: 11px 20px; border-radius: 10px; background: var(--atrament); color: #fff;
  font-weight: 600; font-size: 14px; min-height: 44px;
}
.dzialanie.pusty { background: #fff; color: var(--atrament); border: 1px solid var(--linia); }
.dzialanie.zly { background: var(--czerwien); }
.dzialanie.maly { padding: 7px 13px; font-size: 12.5px; }

.blad { background: #FBE9E7; color: var(--czerwien); padding: 11px 14px; border-radius: 10px; margin: 12px 0; }
.sukces { background: #E3F3EA; color: var(--zielen); padding: 11px 14px; border-radius: 10px; margin: 12px 0; }

/* Komunikat po działaniu: przyklejony do ekranu, bo formularz dania bywa
   daleko w dół strony, a komunikat w treści lądował poza widokiem. */
.grzanka {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  margin: 0; max-width: min(560px, calc(100vw - 32px)); font-weight: 600;
  box-shadow: 0 6px 24px rgba(20, 36, 92, .18);
}

.uklad { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }

/* Pasek zakładek strony lokalu (P-10, etap 2). Ciemna oprawa, bo narzędzie
   nie może konkurować kolorem z podglądem restauracji stojącym obok.
   `var(--grafit)`, nie tymczasowy `var(--atrament)` z pierwszego szkicu —
   atrament zostaje kolorem znaku marki, nie tła narzędzia. */
.zakladki {
  display: flex; gap: 4px; padding: 5px;
  background: var(--grafit); border-radius: 12px; margin-bottom: var(--odstep-3);
}
/* Baza wspólna z `.przelacznik-tabletu button` (niżej, w media query 900px) —
   prawie identyczne reguły były zduplikowane w dwóch miejscach (P-12, #115,
   punkt 8). `touch-action` dołożone też do przełącznika: to on jest jedyną
   drogą powrotu z podglądu do edytora na tablecie, gdzie ta własność ma
   największe znaczenie. */
.zakladki button, .przelacznik-tabletu button {
  flex: 1; min-height: 44px; border-radius: 9px;
  background: transparent; color: #D3D1C7; font-weight: 500;
  touch-action: manipulation;
}
.zakladki button { padding: 0 16px; font-size: 14px; }
.zakladki button.wybrana, .przelacznik-tabletu button.wybrana {
  background: var(--papier); color: var(--atrament);
}
.zakladki button.wybrana { font-weight: 600; }

.przelacznik-tabletu { display: none; }

/* Sam tablet 8,3" (P-2): kolumna 340px na podgląd nie mieści się obok
   formularza, a portal nie miał dotąd żadnego punktu przełamania — strona
   scrollowała się w bok na całej swojej długości, nie tylko przy podglądzie.
   Poniżej 900 px edytor i podgląd stoją zamiast siebie, przełączane
   przyciskiem (etap 2, P-10) — telefon nad formularzem znaczył „przewiń
   przez wszystko, żeby wrócić do pól". Ramka podglądu zostaje w DOM w obu
   stanach cały czas, ukryta wyłącznie CSS-em (`display: none`), nigdy nie
   usuwana ani przenoszona — patrz ograniczenia globalne briefu. */
@media (max-width: 900px) {
  .uklad { grid-template-columns: 1fr; }

  .przelacznik-tabletu {
    display: flex; gap: 4px; padding: 5px; margin-bottom: var(--odstep-3);
    background: var(--grafit); border-radius: 12px;
  }
  .uklad .podglad { display: none; }
  .uklad.pokaz-podglad #lokal-tresc,
  .uklad.pokaz-podglad .zakladki { display: none; }
  .uklad.pokaz-podglad .podglad { display: block; position: static; margin: 0 auto; }
}

/* Podgląd lokalu (P-10): aplikacja klienta w ramce telefonu. Ramka ma
   szerokość telefonu, 390 px, i jest pomniejszona do kolumny — aplikacja układa
   się tak jak u klienta, a nie jak w wąskiej kolumnie. Skala to (340 − 2·7) / 390,
   czyli kolumna bez obudowy. */
.podglad {
  --skala: .836;
  --wysokosc-telefonu: 780px;
  position: sticky; top: 22px;
}
.podglad-telefon {
  width: calc(390px * var(--skala) + 14px);
  height: calc(var(--wysokosc-telefonu) * var(--skala) + 14px);
  margin: 0 auto; overflow: hidden;
  border: 7px solid var(--atrament); border-radius: 30px; background: #fff;
}
.podglad-telefon iframe {
  display: block; width: 390px; height: var(--wysokosc-telefonu); border: 0;
  transform: scale(var(--skala)); transform-origin: 0 0;
}
.podglad-notka { margin: 12px 4px 0; color: var(--cien); font-size: 12px; line-height: 1.45; }

/* Tablet: rozmiar podglądu w trybie „Podgląd" przełącznika (patrz `.uklad`
   wyżej). Ta reguła musi stać za podstawową `.podglad` — wcześniej stała
   przed nią i przegrywała, więc przyklejenie zostawało włączone także na
   tablecie. Telefon w pełnej wysokości zająłby cały ekran.
   Bez `order: -1`: to była pozostałość ze starego układu, w którym telefon
   stał nad formularzem na stałe (przed przełącznikiem Edytor/Podgląd,
   etap 2). Kolumna `.lokal-lewa` z przełącznikiem ma dziś zawsze renderować
   się przed `.podglad` w porządku wizualnym — inaczej w trybie Podgląd
   przełącznik (jedyna droga powrotu do edytora) ląduje pod telefonem, przy
   wysokich telefonach praktycznie poza ekranem (runda poprawek, krytyczne).
   Nie przywracaj `order` „dla wygody" bez sprawdzenia tego przypadku. */
@media (max-width: 900px) {
  .podglad {
    position: static; margin-bottom: 20px;
    --wysokosc-telefonu: calc(60vh / var(--skala));
  }
}

/* Tyle, żeby dało się zmienić nazwę albo usunąć kategorię (P-5, #6) — jak przy
   .danie-edycja, wygląd portalu to osobna robota. */
.wiersz-kategorii { display: flex; gap: 8px; margin: 4px 0 10px; }
.kategoria-edycja { display: flex; gap: 8px; margin: 4px 0 10px; align-items: center; }
.kategoria-edycja input { width: auto; flex: 1; }

.wiersz-dania {
  display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--linia); border-radius: 10px; background: #fff;
  margin-bottom: 7px;
}
.wiersz-dania.ukryte { opacity: .5; }
.wiersz-dania .cena { font-family: var(--mono); font-size: 12.5px; }
.wiersz-dania small { color: var(--cien); display: block; font-size: 11.5px; }

/* Tyle, żeby formularz edycji był używalny. Wygląd portalu to osobna robota. */
.danie-edycja { margin-bottom: 7px; }
.danie-edycja .przelaczniki { display: grid; gap: 8px; margin-top: 16px; }
/* Bez tego globalne input { width: 100% } rozciąga pole wyboru na całą szerokość. */
.danie-edycja .przelaczniki label { display: flex; align-items: center; gap: 9px; margin: 0; }
.danie-edycja .przelaczniki input { width: auto; }
/* Pole porcji: przełącznik zamiast etykiety, pod nim liczba i jednostka w jednym rzędzie. */
.porcja-przelacz { display: flex; align-items: center; gap: 8px; }
.porcja-przelacz input { width: auto; margin: 0; }
.porcja-wartosci { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.porcja-wartosci input:disabled, .porcja-wartosci select:disabled { opacity: .45; }
.danie-edycja .rzad-przyciskow { display: flex; gap: 10px; margin-top: 18px; }
/* Opcje dania (P-6, #7). Kreator z 15 września: gotowce, dwa duże przyciski
   rodzaju wyboru, wiersz na pozycję i podgląd tego, co zobaczy klient. */
.opcje-dania { margin-top: 22px; }
.opcje-dania h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--cien); margin: 0 0 4px; }
.opcje-wstep { margin: 0 0 12px; font-size: 13px; color: var(--cien); }
/* Globalne input { width: 100%; min-height: 44px } robiło z pola wyboru
   wielki pusty kwadrat na środku wiersza, oderwany od swojego opisu. */
.opcje-dania input[type='checkbox'] { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--kobalt); }
.opcje-grupa { border: 1px solid var(--linia); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.opcje-grupa-naglowek { display: flex; align-items: center; gap: 8px; }
.opcje-grupa-naglowek > div { margin-right: auto; }
.opcje-grupa-naglowek small { display: block; font-size: 12px; color: var(--cien); margin-top: 2px; }
.opcje-lista { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--linia); }
.opcje-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linia); }
.opcje-lista .opcja-nazwa { margin-right: auto; }
.opcje-lista .opcja-doplata { font-family: var(--mono); font-size: 12px; color: var(--cien); }
.opcje-dopisz { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px; margin-top: 10px; }
.pole-zl {
  display: flex; align-items: center; gap: 4px; padding: 0 10px;
  border: 1px solid var(--linia); border-radius: 9px; background: #fff; color: var(--cien); font-size: 13px;
}
.pole-zl:focus-within { border-color: var(--kobalt); }
.pole-zl input { border: 0; padding: 0 2px; min-height: 42px; text-align: right; font-family: var(--mono); outline: none; }
.opcje-nowa-grupa { border: 1px dashed var(--linia); border-radius: 12px; padding: 14px; }
.opcje-nowa-grupa p { margin: 2px 0 10px; font-size: 13px; }
.szablony-grup { display: flex; flex-wrap: wrap; gap: 8px; }

.kreator-grupy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.kreator-tytul { font-size: 15px; }
.etykieta-pola { display: block; font-size: 12.5px; color: var(--cien); margin: 14px 0 6px; font-weight: 500; }
.kreator-wybor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kreator-wybor button {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px;
  border: 1px solid var(--linia); border-radius: 10px; background: #fff; color: var(--atrament); min-height: 44px;
}
.kreator-wybor button[aria-checked='true'] { border: 2px solid var(--kobalt); background: var(--mgla); padding: 11px; }
.kreator-wybor b, .kreator-wymagane b { display: block; font-size: 14px; }
.kreator-wybor small, .kreator-wymagane small { display: block; font-size: 12px; color: var(--cien); font-weight: 400; margin-top: 2px; }
.znacznik { width: 18px; height: 18px; flex: none; border: 2px solid var(--cien); margin-top: 1px; background: #fff; }
.znacznik.kolko { border-radius: 50%; }
.znacznik.kwadrat { border-radius: 5px; }
[aria-checked='true'] > .znacznik, .wybrana > .znacznik { border-color: var(--kobalt); box-shadow: inset 0 0 0 3px #fff; background: var(--kobalt); }
.kreator-limit { display: grid; grid-template-columns: auto 120px 1fr; gap: 10px; align-items: center; margin-top: 12px; }
.kreator-limit label { margin: 0; }
.kreator-wymagane {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px;
  border: 1px solid var(--linia); border-radius: 10px; cursor: pointer; color: var(--atrament);
}
.kreator-wiersze { margin-top: 16px; }
.kreator-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: 6px; margin-top: 6px; }
.kreator-wiersz.naglowek { font-size: 12px; color: var(--cien); font-weight: 500; margin-bottom: -2px; }
.kreator-wiersz .kosz { border: 1px solid var(--linia); border-radius: 9px; background: #fff; color: var(--cien); min-height: 44px; }
.kreator-wiersz .kosz:hover { color: var(--czerwien); border-color: var(--czerwien); }
.kreator-wiersz input.zle + .pole-zl, .pole-zl:has(input.zle) { border-color: var(--czerwien); }
.kreator-wiersze > .dzialanie { margin-top: 10px; }
.kreator-podpowiedz { display: block; margin-top: 6px; font-size: 12px; }
.kreator-grupy .rzad-przyciskow { display: flex; gap: 8px; margin-top: 16px; }
.kreator-podglad { background: var(--papier); border-radius: 12px; padding: 14px; align-self: start; position: sticky; top: 12px; }
.kreator-podglad-etykieta { display: block; font-size: 12px; color: var(--cien); margin-bottom: 10px; }
.podglad-grupy-tytul { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.podglad-grupy-tytul .cien { font-size: 12px; font-weight: 400; }
.znaczek-wymagane { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; background: var(--atrament); color: #fff; padding: 2px 6px; border-radius: 4px; }
.podglad-grupy-opis { font-size: 12px; margin: 2px 0 8px; }
.podglad-opcja {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 6px;
  border: 1.5px solid var(--linia); border-radius: 10px; background: #fff; font-size: 14px;
}
.podglad-opcja.wybrana { border-color: var(--kobalt); background: var(--mgla); }
.podglad-opcja .dop { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 700; }
@media (max-width: 700px) {
  .kreator-grupy { grid-template-columns: 1fr; }
  .kreator-podglad { position: static; }
  .kreator-wybor { grid-template-columns: 1fr; }
  .kreator-limit { grid-template-columns: auto 100px; }
  .kreator-limit small { grid-column: 1 / -1; }
  .opcje-dopisz { grid-template-columns: minmax(0, 1fr) 100px; }
  .opcje-dopisz .dzialanie { grid-column: 1 / -1; }
  .kreator-wiersz { grid-template-columns: minmax(0, 1fr) 96px 44px; }
}
.opcja-edycja { display: flex; gap: 6px; align-items: center; flex: 1; }
.opcja-edycja input { width: auto; flex: 1; }
.opcja-edycja input#op-doplata { flex: 0 0 90px; }

/* Planer menu (P-13): aplikacja klienta w szerokości telefonu, na środku.
   Szerokość jest częścią zasady „tak jak widzi klient" — rozciągnięta na całą
   zakładkę zmieniłaby układ kafelków i pokazywała menu, którego nikt nie ma. */
.planer-wstep { font-size: 13px; color: var(--cien); max-width: 62ch; margin: 0 0 14px; }
.planer-telefon { width: 420px; max-width: 100%; margin: 0 auto; }
.planer-telefon iframe {
  width: 100%; height: 70vh; min-height: 480px; border: 1px solid var(--linia);
  border-radius: 18px; background: #fff; display: block;
}
@media (max-width: 900px) {
  .planer-telefon iframe { height: 60vh; }
}

/* Pasek publikacji (P-10): jedyne miejsce, z którego wygląd trafia do klientów. */
.pasek-publikacji {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 0;
  background: #fff; border-top: 1px solid var(--linia);
}
.pasek-publikacji .stan-szkicu { font-size: 13px; color: var(--cien); margin-right: auto; font-weight: 600; }
.pasek-publikacji .dzialanie[disabled] { opacity: .5; cursor: default; }
/* Kolor stanu bez zmian w app.js: przycisk „Opublikuj" stojący od razu po
   etykiecie jest wyłączony wtedy i tylko wtedy, gdy nie ma niezapisanych
   zmian — ten sam warunek, którym app.js rysuje tekst „Zapisane". Pasek sam
   zostaje jasny (patrz komentarz w briefie zadania 3): ciemny odcinałby się
   od kart z treścią. */
.pasek-publikacji .stan-szkicu:has(+ .dzialanie[disabled]) { color: var(--stan-zielony); }
.pasek-publikacji .stan-szkicu:has(+ .dzialanie:not([disabled])) { color: var(--stan-bursztyn); }
/* Błąd trwały (P-12, #115, punkt 1) wygrywa z zielonym/bursztynowym stanem
   powyżej niezależnie od tego, czy przyciski są akurat włączone (od tej
   nocy mogą być włączone nawet przy zerowej liczbie zmian — patrz
   `odswiezPasekPublikacji` w app.js) — stąd druga reguła z :has(), o
   specyficzności dobranej tak, żeby wygrać z obiema regułami wyżej.
   DWIE OSOBNE reguły, nie jedna z przecinkiem: selektor łączony przecinkiem,
   w którym jedna część używa nieobsługiwanej pseudoklasy, unieważnia się w
   CAŁOŚCI na starszej przeglądarce — również tę bez :has(). Przegląd tej
   nocy złapał to jako błąd we wcześniejszej wersji: zamierzony "spadochron"
   (sama klasa, bez :has()) w ogóle by nie zadziałał, bo siedział w tym samym
   przecinkowym selektorze co reguła z :has(). Osobno: pierwsza reguła
   (zwykła klasa) działa wszędzie i wygrywa tam, gdzie :has() nie istnieje —
   wtedy reguły zielona/bursztynowa też są nieważne, więc nie ma z czym
   przegrać specyficznością. Druga reguła dogrywa priorytet tam, gdzie
   wszystkie trzy reguły naprawdę ze sobą konkurują. */
.pasek-publikacji .stan-szkicu.blad { color: var(--stan-czerwony); }
.pasek-publikacji .stan-szkicu.blad:has(+ .dzialanie) { color: var(--stan-czerwony); }

.zwijka { margin-bottom: 16px; }
.zwijka > summary {
  cursor: pointer; font-weight: 600; padding: 10px 0; font-size: 15px;
}

/* ==========================================================================
   Zakładka Wygląd (P-10, etap 3)

   Od ogólnego do szczegółu: gotowa kompozycja, paleta z koloru marki, kroje,
   układ, nagłówek, promocja, zaawansowane. Grupy zwijane, żeby przewijanie
   nie było pracą; każdy wybór obrazkiem zamiast listą z nazwą maszynową.
   ========================================================================== */

.uklad > * { min-width: 0; }

.wyglad-wstep { margin: 4px 0 14px; }
.wyglad-wstep h2.sekcja { margin: 0 0 6px; }
.wyglad-wstep p { margin: 0; color: var(--cien); font-size: 13px; line-height: 1.5; max-width: 64ch; }

.grupa { background: #fff; border: 1px solid var(--linia); border-radius: 14px; margin-bottom: 10px; }
.grupa > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 13px 18px; min-height: 44px; font-weight: 700; font-size: 15px; border-radius: 14px;
}
.grupa > summary::-webkit-details-marker { display: none; }
.grupa > summary::after {
  content: '▾'; margin-left: auto; color: var(--cien); font-size: 14px;
  transition: transform .18s ease;
}
.grupa:not([open]) > summary::after { transform: rotate(-90deg); }
.grupa > summary:hover { background: var(--papier); }
.grupa .g-podpis { font-weight: 400; font-size: 12.5px; color: var(--cien); }
.grupa .g-tresc { padding: 2px 18px 18px; }
.grupa .g-tresc > label:first-child { margin-top: 0; }

h3.podgrupa {
  margin: 22px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--cien); font-weight: 700;
}

label small { display: block; font-weight: 400; color: var(--cien); font-size: 11.5px; margin-top: 1px; }

.notka { color: var(--cien); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; }

/* Pasek „Kompozycja … jest w szkicu · Cofnij" — przyklejony, bo po kliknięciu
   karty człowiek patrzy na podgląd, a nie na górę formularza. */
.pasek-cofania {
  position: sticky; top: 8px; z-index: 11;
  display: flex; align-items: center; gap: 12px;
  background: var(--grafit); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 6px 6px 6px 16px; border-radius: 12px; margin-bottom: 10px;
  box-shadow: 0 6px 20px rgba(20, 36, 92, .2);
}
.pasek-cofania .dzialanie { margin-left: auto; }

label.przelacznik-maly {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: var(--atrament); font-size: 13px; min-height: 44px; cursor: pointer;
}
label.przelacznik-maly input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--kobalt); }

/* --- Kompozycje ------------------------------------------------------------- */

.kompozycje { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kompozycja {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: #fff; border: 1px solid var(--linia); border-radius: 12px; padding: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kompozycja:hover { border-color: var(--kobalt); box-shadow: 0 4px 14px rgba(20, 36, 92, .12); transform: translateY(-1px); }
.kompozycja.obecna { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); }
.k-opis b { font-size: 14px; }
.k-opis small { display: block; color: var(--cien); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.znaczek {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 5px; background: #FDF2D8; color: var(--stan-bursztyn);
}
.znaczek.obecna { background: var(--mgla); color: var(--kobalt); }
.kompozycja:not(.obecna) .znaczek.obecna { display: none; }

/* Miniatura: telefon narysowany pięcioma elementami w barwach kompozycji. */
.miniatura {
  display: flex; flex-direction: column; gap: 6px; aspect-ratio: 1 / 1.05;
  background: var(--m-tlo); border-radius: 8px; padding-bottom: 8px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
}
.m-hero {
  flex: 0 0 34%; display: flex; align-items: flex-end; padding: 6px 9px;
  background: var(--m-gradient); border-radius: 0 0 var(--m-r) var(--m-r);
}
.m-nazwa { font-family: var(--m-krok); font-weight: 700; font-size: 18px; line-height: 1; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.m-kafelki { flex: 1; display: grid; gap: 5px; padding: 0 8px; min-height: 0; }
.m-kafelki i {
  position: relative; overflow: hidden;
  background: var(--m-kafel); border-radius: var(--m-r); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.m-kafelki i::after {
  content: ''; position: absolute; left: 12%; right: 35%; bottom: 20%; height: 4px; border-radius: 2px;
  background: var(--m-tekst); opacity: .75;
}
.miniatura[data-uklad='karta'] .m-kafelki { grid-template-rows: 1fr 1fr; }
.miniatura[data-uklad='karta'] .m-kafelki i:nth-child(n+3) { display: none; }
.miniatura[data-uklad='siatka'] .m-kafelki { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.miniatura[data-uklad='lista'] .m-kafelki { grid-template-rows: repeat(4, 1fr); }
.miniatura[data-uklad='karta'] .m-kafelki i::before,
.miniatura[data-uklad='siatka'] .m-kafelki i::before {
  content: ''; position: absolute; inset: 0 0 48% 0;
  background: color-mix(in srgb, var(--m-akcent) 55%, var(--m-kafel));
}
.miniatura[data-uklad='lista'] .m-kafelki i::after { bottom: 38%; height: 3px; }
.m-przycisk { align-self: center; width: 58%; height: 9px; border-radius: 99px; background: var(--m-glowny); }

/* --- Kolory --------------------------------------------------------------------- */

.paleta-z-koloru { background: var(--mgla); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.paleta-z-koloru > label { margin: 0 0 10px; color: var(--atrament); font-weight: 600; }
.marka-rzad { display: flex; align-items: stretch; gap: 10px; }
.marka-rzad input[type='color'] { width: 64px; flex: none; height: auto; cursor: pointer; }
.propozycje-palet { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.paleta {
  text-align: left; background: #fff; border: 1px solid var(--linia); border-radius: 10px;
  padding: 8px 10px 10px; min-height: 44px; transition: border-color .15s ease;
}
.paleta:hover { border-color: var(--kobalt); }
.pasek-probek { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin-bottom: 7px; border: 1px solid rgba(0, 0, 0, .08); }
.pasek-probek i { flex: 1; }
.paleta b { font-size: 13.5px; }
.paleta small { display: block; color: var(--cien); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }

.siatka-kolorow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.pole-koloru label { color: var(--atrament); font-weight: 600; }
.kolor-para { display: flex; gap: 6px; align-items: center; }
.kolor-para input[type='color'] { width: 52px; flex: none; cursor: pointer; }
input.kod, input.kod-dlugi { font-family: var(--mono); font-size: 12.5px; }
input.kod { text-transform: uppercase; }
input.zle { border-color: var(--czerwien); background: #FFF8F7; }
.blad-pola { display: block; color: var(--czerwien); font-size: 12px; margin-top: 4px; }
.blad-pola:empty { display: none; }
.stan-obrazka { display: block; font-size: 12px; margin-top: 4px; color: var(--zielen); }
.stan-obrazka.zle { color: var(--czerwien); }
.stan-obrazka:empty { display: none; }

.czytelnosc { margin-top: 16px; border-top: 1px solid var(--linia); padding-top: 12px; }
.czytelnosc h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--cien); }
.wiersz-czytelnosci { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.probka-napisu { font-weight: 700; text-align: center; border-radius: 6px; padding: 5px 0; border: 1px solid rgba(0, 0, 0, .08); }
.ocena { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.ocena.dobry { background: #E3F3EA; color: var(--zielen); }
.ocena.slaby { background: #FDF2D8; color: var(--stan-bursztyn); }
.ocena.zly { background: #FBE9E7; color: var(--czerwien); }
.ocena.brak { background: var(--mgla); color: var(--cien); }

/* --- Kroje ------------------------------------------------------------------------ */

.pary-krojow { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 4px; }
.para-krojow {
  text-align: left; background: #fff; border: 1px solid var(--linia); border-radius: 10px;
  padding: 10px 12px; min-height: 44px; overflow: hidden; transition: border-color .15s ease;
}
.para-krojow:hover { border-color: var(--kobalt); }
.para-krojow.obecna { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); background: var(--mgla); }
.para-krojow .p-nazwa { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--cien); margin-bottom: 4px; }
.para-krojow .p-naglowek { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.para-krojow .p-kategoria { display: block; font-size: 18px; color: var(--kobalt); line-height: 1.2; }
.para-krojow .p-tresc { display: block; font-size: 12.5px; color: var(--cien); margin-top: 3px; line-height: 1.35; }

/* --- Układ ------------------------------------------------------------------------- */

.wybor-obrazkowy { border: 0; padding: 0; margin: 0; min-width: 0; }
.wybor-obrazkowy legend { font-size: 12.5px; color: var(--cien); font-weight: 500; margin: 12px 0 6px; padding: 0; }
.opcje-obrazkowe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
label.opcja-obrazkowa {
  position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0;
  border: 1px solid var(--linia); border-radius: 10px; padding: 10px; cursor: pointer; color: var(--atrament);
}
label.opcja-obrazkowa input, .segmenty input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; }
label.opcja-obrazkowa:has(input:checked) { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); background: var(--mgla); }
label.opcja-obrazkowa:has(input:focus-visible) { outline: 3px solid var(--musztarda); outline-offset: 2px; }
.opcja-obrazkowa b { font-size: 13.5px; }
.opcja-obrazkowa small { color: var(--cien); font-size: 11.5px; }
.rysunek-ukladu { display: grid; gap: 3px; height: 48px; margin-bottom: 6px; }
.rysunek-ukladu i { background: var(--linia); border-radius: 3px; }
.rysunek-ukladu[data-uklad='karta'] { grid-template-rows: 1fr 1fr; }
.rysunek-ukladu[data-uklad='karta'] i:nth-child(n+3) { display: none; }
.rysunek-ukladu[data-uklad='siatka'] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.rysunek-ukladu[data-uklad='lista'] { grid-template-rows: repeat(4, 1fr); }
/* Zaznaczenie widać także bez :has() — rysunek przejmuje kolor. */
.opcja-obrazkowa input:checked + .rysunek-ukladu i { background: var(--kobalt); }

.segmenty { display: flex; gap: 4px; background: var(--mgla); padding: 4px; border-radius: 10px; }
.segmenty label { flex: 1; margin: 0; position: relative; }
.segmenty span {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  border-radius: 7px; color: var(--atrament); font-size: 13.5px; cursor: pointer;
}
.segmenty input:checked + span { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(20, 36, 92, .18); }
.segmenty input:focus-visible + span { outline: 3px solid var(--musztarda); outline-offset: 1px; }

.suwak-z-liczba { display: grid; grid-template-columns: 1fr 84px auto; gap: 10px; align-items: center; }
.suwak-z-liczba span { color: var(--cien); font-size: 12.5px; }
.suwak-z-liczba input[type='number'] { font-family: var(--mono); font-size: 13px; }

.chipy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  min-height: 44px; padding: 0 14px; border-radius: 99px;
  background: var(--mgla); color: var(--atrament); font-size: 12.5px;
}
.chip:hover { background: var(--linia); }
.chip[aria-pressed='true'] { background: var(--kobalt); color: #fff; }
.godlo, .godlo-chip { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
input.godlo { font-size: 22px; max-width: 120px; }
/* Symbol dania (15 września): pole na własny znak obok gotowych do kliknięcia. */
.pole-symbolu { margin-top: 4px; }
.pole-symbolu label small { font-weight: 400; margin-left: 4px; }
.pole-symbolu-rzad { display: flex; gap: 10px; align-items: flex-start; }
.pole-symbolu-rzad input.godlo { flex: 0 0 72px; text-align: center; }
.pole-symbolu-rzad .chipy { margin-top: 0; flex: 1; }
.pole-symbolu > small { display: block; margin-top: 6px; font-size: 12px; }
.godlo-chip { width: 44px; padding: 0; font-size: 21px; }

/* --- Nagłówek i promocja ----------------------------------------------------------- */

.obrazek-rzad { display: flex; gap: 10px; align-items: center; }
.miniatura-obrazka {
  flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden;
  background: var(--mgla); border: 1px solid var(--linia);
}
.miniatura-obrazka img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gradient-prosty { display: grid; gap: 8px; }
.gradient-prosty .siatka3 label { margin-top: 4px; }
.probka-gradientu { display: block; height: 44px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .08); margin-top: 8px; }

.probka-plakietki { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.plakietka-lokalu { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; }

@media (max-width: 600px) {
  .siatka3 { grid-template-columns: 1fr; }
  .marka-rzad { flex-direction: column; }
  .marka-rzad input[type='color'] { width: 100%; height: 44px; }
  .suwak-z-liczba { grid-template-columns: 1fr 72px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kompozycja, .paleta, .para-krojow, .grupa > summary::after { transition: none; }
  .kompozycja:hover { transform: none; }
}

/* Archiwum lokali (15 września 2026): zwinięta sekcja pod tabelą restauracji. */
.przyciski-wiersza { white-space: nowrap; }
.przyciski-wiersza .dzialanie + .dzialanie { margin-left: 6px; }
.archiwum-lokali { margin-top: 18px; }
.archiwum-lokali summary { cursor: pointer; color: var(--cien); font-size: 14px; padding: 8px 0; }
.archiwum-lokali table { opacity: .8; }

/* --- Konta właścicieli (P-8) i zdjęcia dań (M-4), 15 września 2026 --------- */

.gora .kto { color: #A9B5DE; font-size: 13px; }
.gora button[hidden] { display: none; }

/* Wybór pliku przez etykietę — wygląda jak przycisk, pole jest ukryte. */
label.plik { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
label.dzialanie:not(.pusty) { color: #fff; }
label.dzialanie.pusty { color: var(--atrament); }
label.plik:focus-within { outline: 2px solid var(--kobalt); outline-offset: 2px; }
label.plik input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.plakietka.info { background: var(--mgla); color: var(--kobalt); }

.zdjecie-dania {
  display: grid; grid-template-columns: 208px 1fr; gap: 16px; align-items: start;
  padding: 12px; border: 1px solid var(--linia); border-radius: 12px; background: var(--papier); margin-bottom: 14px;
}
.zdjecie-dania-podglad {
  aspect-ratio: 4 / 3; max-width: 100%; border-radius: 9px; overflow: hidden; background: var(--mgla);
  display: grid; place-items: center; color: var(--cien); font-size: 12.5px;
}
.zdjecie-dania-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zdjecie-dania .rzad-przyciskow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zdjecie-dania p { margin: 6px 0 0; font-size: 12.5px; color: var(--cien); }
.zdjecie-dania-tytul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nazwa-z-miniatura { display: flex; align-items: center; gap: 10px; min-width: 0; }
.miniatura-dania { width: 48px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; background: var(--mgla); }
span.miniatura-dania { display: inline-block; }

.ramka-obrobki {
  background: #FDF7E6; border: 1px solid #E0B43C; border-radius: 14px; padding: 16px; margin: 0 0 22px;
}
.ramka-obrobki h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #8A6300; }
.ramka-obrobki td { vertical-align: middle; }

.link-zaproszenia { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.link-zaproszenia code {
  font-family: var(--mono); font-size: 12px; background: var(--mgla); padding: 8px 10px; border-radius: 8px;
  word-break: break-all; flex: 1 1 320px;
}
.lokale-wybor {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px;
  max-height: 220px; overflow-y: auto; padding: 10px; border: 1px solid var(--linia); border-radius: 9px; background: #fff;
}
.lokale-wybor label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--atrament); }
.lokale-wybor input { width: auto; min-height: 0; }
.konta-lokale { font-size: 12.5px; color: var(--cien); }
.karta-haslo { max-width: 440px; }

@media (max-width: 600px) {
  .zdjecie-dania { grid-template-columns: 1fr; }
}