/* === Reset & Base === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --deleg-primary-strong: var(--primary-strong); --deleg-primary-soft: var(--brand-soft); --deleg-accent-soft: var(--brand-soft); --deleg-muted-text: var(--muted); --deleg-card: var(--panel); --deleg-card-hover: var(--bg-hover); --deleg-input-border: var(--border); --deleg-input-focus: var(--platform-header-accent); --deleg-danger: var(--danger); } /* Własny PTR platformy (data-platform-ptr="auto"): tłumi natywny pull-to-refresh w karcie przeglądarki (w PWA standalone natywnego i tak nie ma) — bez tego w karcie działałyby OBA naraz. Reguła MUSI stać na : overscroll-behavior z nie propaguje się do viewportu, więc wcześniejsza wersja (na body) nie tłumiła niczego, a Chrome liczył dla body „auto" — przez co detekcja „auto" w shared też nigdy nie zapalała modułu w karcie. */ html { overscroll-behavior-y: none; } body { background: var(--shell-bg, var(--bg)); color: var(--text); line-height: 1.6; min-height: 100vh; transition: background 0.3s, color 0.3s; } .container { max-width: var(--platform-content-narrow, 980px); margin: 0 auto; padding: 0 1.5rem 4rem; } /* Header w TEJ SAMEJ ramie co kolumna treści (kontener minus jego padding 1.5rem z każdej strony) — koniec nagłówka szerszego od formularza. */ .delegation-platform-header { margin: 1rem auto 1.5rem; max-width: calc(var(--platform-content-narrow, 980px) - 3rem); } /* === Sections (collapsible) === */ /* PŁASKI język Platformy (2026-07-29): kroki akordeonu zlane ze stroną — koniec wypukłej wyspy (border+radius+shadow). Sąsiadów rozdziela włoskowa linia + oddech pionowy; treść wraca do lewej krawędzi kolumny (rama kanału = rama headera). */ .form-section { background: transparent; border: 0; border-bottom: 1px solid var(--platform-hairline, var(--border)); } /* Tint hoveru/aktywnego kroku wybiega delikatnie poza kolumnę tekstu (ujemny margines = padding), żeby pasek-sygnatura nie nachodził na treść, a tekst belki trzymał tę samą oś co pola formularza. */ .form-section > summary { padding: 1.25rem 0.9rem; margin: 0 -0.9rem; cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-sm, 8px); transition: background 0.15s; } .form-section > summary:hover { background: var(--deleg-card-hover); } .form-section > summary::-webkit-details-marker, .form-section > summary::marker { display: none; } .form-section > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; flex-shrink: 0; } .form-section[open] > summary::before { transform: rotate(-135deg); } /* Aktywny krok widoczny "z lotu ptaka": pasek-sygnatura + tint (reguła 6). Siła tintu z tokenu per motyw (6% strojone na jasnej karcie znikało na ciemnym tle strony po spłaszczeniu sekcji). */ .form-section[open] > summary { background: color-mix(in srgb, var(--primary) var(--tint-bg-mix, 7%), transparent); box-shadow: inset 3px 0 0 var(--primary); } .form-section > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 3px; } .form-section > summary h2 { margin: 0; } /* Chipy w jednym rzędzie przy prawej krawędzi — belka „Podróż" trzyma tę samą wysokość co pozostałe kroki akordeonu (kolumna dodawała ~40px). */ .summary-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-left: auto; } /* Skróty wypełniające pola jako chipy (reguła 11) — nie konkurują z jedynym prawdziwym CTA "Oblicz rozliczenie". */ .deleg-now-button { padding: 5px 11px; font-size: 0.78rem; font-weight: 600; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent); background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--deleg-primary-strong); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .deleg-now-button:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); border-color: color-mix(in srgb, var(--primary) 55%, transparent); } .section-body { padding: 0 0 1.75rem; } /* Tytuł kroku prowadzi; znacznik okrągły spokojniejszy od treści (reguła 6). */ .form-section h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0; display: flex; align-items: center; gap: 0.5rem; } .section-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--deleg-primary-strong); font-size: 0.95rem; font-weight: 700; flex-shrink: 0; margin-left: 0.5rem; } .form-section[open] .section-num { background: var(--primary); color: var(--platform-header-accent-text, #fff); } /* Podsekcje jako mikro-eyebrow z krótkim akcentem (klasa platform-label-accent w HTML) — koniec z drabiną pełnowymiarowych kresek (reguła 1); rytm "sekcja > wpis": odstęp nad podsekcją ~2x większy niż wewnątrz (reguła 2). */ .form-section h3 { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; color: color-mix(in srgb, var(--text) 62%, var(--muted)); text-transform: uppercase; margin: 1.75rem 0 0.75rem; } .inline-heading { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 0.75rem; } .inline-heading h3 { margin: 0; white-space: nowrap; } .inline-heading-actions { display: flex; align-items: center; gap: 1rem; margin: 0 auto 0 1.5rem; } .field-inline { display: flex; align-items: center; gap: 0.5rem; } .field-inline label { font-size: 0.75rem; white-space: nowrap; margin: 0; } .field-inline input { width: 140px; } .checkbox-inline { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--deleg-muted-text); cursor: pointer; white-space: nowrap; } .checkbox-inline input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; accent-color: var(--primary); } /* === Grid layouts === */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; } .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; } /* Inputy o intrinsic width nie mogą wypychać pól poza kartę (mobile). */ .grid-2 > *, .grid-3 > *, .grid-4 > *, .field { min-width: 0; } .inline-heading-actions { flex-wrap: wrap; } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* === Fields === */ .field { display: flex; flex-direction: column; } /* Etykiety pól: 62% atramentu, semibold (reguła 3, wzór .platform-field-label). */ .field label { font-size: 0.8rem; font-weight: 600; color: color-mix(in srgb, var(--text) 62%, var(--muted)); margin-bottom: 0.3rem; } .field input, .field select { width: 100%; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--deleg-input-border); border-radius: 8px; font-size: 0.9rem; font-weight: 400; color: var(--text); background: var(--deleg-card); transition: border-color 0.15s, box-shadow 0.15s; } /* Daty, godziny i liczby trzymają rytm kolumn (reguła 7). */ .field input[type="date"], .field input[type="time"], .field input[type="number"] { font-variant-numeric: tabular-nums; } .field input:focus, .field select:focus { outline: none; border-color: var(--deleg-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deleg-input-focus) 18%, transparent); } /* Glass: app-owe `.field input` (0,1,1) wygrywa remis ze wspólnym glass-override pól (też 0,1,1, ale wcześniejszy w kaskadzie po flipie Etapu 0) — bez tej reguły pola były mleczne zamiast kanonicznie „wpuszczone" (ciemne szkło). Analogicznie FOCUS: app-owe `.field input:focus` (0,2,1) bije glassowy focus ze shared niezależnie od kolejności — ring na akcencie, tło zostaje ciemne. */ [data-theme="glass"] .field input, [data-theme="glass"] .field select { background: var(--field); border-color: var(--input-border, var(--border-subtle)); } [data-theme="glass"] .field input:focus, [data-theme="glass"] .field select:focus { background: var(--field); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* Glass, sekcje PŁASKIE: shared nadaje .form-section/.result-section mleczną taflę (gradient+blur+cień, specyficzność 0,2,0) — arkusz apki, później w kaskadzie, zdejmuje ją tą samą specyficznością. Szkło zostaje tam, gdzie elewacja niesie warstwę: modal podpisu, rate-info, total-box, dropdowny. */ [data-theme="glass"] .form-section, [data-theme="glass"] .result-section, [data-theme="glass"] .history-section { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; /* border-color tafli (0.26 białej) zostawał z reguły shared i rozjeżdżał linie sekcji z hairline historii — wyrównanie do wspólnego tokenu. */ border-color: var(--platform-hairline, var(--border)); } /* Placeholder wyraźnie lżejszy od wpisanej wartości — pusty formularz nie może wyglądać na wypełniony. 45% atramentu tekstu: na light jaśniejszy od wartości, na dark/dracula/glass nadal widoczny (muted+opacity gasło na ciemnych). */ .field input::placeholder { color: color-mix(in srgb, var(--text) 45%, transparent); opacity: 1; } /* === Sync status: kanon .platform-sync (kit shared; kropka „zapisano" = zieleń --pass-fg, lokalnie = bursztyn, błąd = --danger). Tu tylko rytm. === */ .container .platform-sync { margin: 0 0 1rem; } /* === Checkboxes === */ .meals-hint { font-size: 0.8rem; color: var(--deleg-muted-text); margin: 0 0 0.75rem; } .meals-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; } .checkbox-label small { color: var(--muted); } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); } /* === Info box === */ /* Atrament rozdzielony od tintu — ton-w-ton gasł na ciemnych motywach. */ .info-box { margin-top: 0.75rem; padding: 0.75rem 1rem; background: color-mix(in srgb, var(--primary) 10%, var(--panel)); border-radius: 8px; font-size: 0.85rem; color: color-mix(in srgb, var(--deleg-primary-strong) 45%, var(--text)); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); } /* === Rate info === */ .rate-info { margin-top: 1rem; padding: 1rem; background: color-mix(in srgb, var(--primary) 5%, var(--panel)); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; column-gap: 2.5rem; border: 1px solid var(--platform-hairline); } .rate-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; } .rate-row span { color: var(--muted); } .rate-row strong { color: var(--text); font-variant-numeric: tabular-nums; } /* === Buttons === */ /* Baza, metryka i :active dają kanony shared .btn / .platform-button--lg; lokalnie tylko terakota marki (rejestr wyjątków §4 planu UI-Kit). */ .btn-primary { background: var(--primary); color: var(--platform-header-accent-text, #fff); } .btn-primary:hover { background: var(--deleg-primary-strong); } .btn-primary:disabled { background: var(--primary); color: var(--platform-header-accent-text, #fff); opacity: 0.55; cursor: not-allowed; } /* Glass: CTA zostaje terakotowe jak dotąd (marka apki, §4) — bez tej reguły frosted-white kanon shared wygrywałby po zdjęciu dawnych podwójnych klas. */ [data-theme="glass"] .btn-primary { color: var(--platform-header-accent-text, #fff); background: var(--primary); } [data-theme="glass"] .btn-primary:hover { background: var(--deleg-primary-strong); } /* Akcja drugorzędna = cichy neutralny outline (jeden język z .history-action); akcentowy tint konkurował z CTA „Oblicz" drugą pomarańczową plamą. */ .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 600; } .btn-secondary:hover { background: transparent; border-color: var(--primary); color: var(--deleg-primary-strong); } .btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 3px; } .actions { display: flex; justify-content: center; align-items: center; margin-top: 1.5rem; gap: 1rem; /* Trzeci element paska (checkbox „zachowaj dane pracownika") schodzi na wąskich ekranach pod przyciski zamiast je ściskać. */ flex-wrap: wrap; } /* === Result Section === */ /* Płasko: podsumowanie oddziela od formularza włoskowa linia + oddech, nie karta z cieniem; jedynym mocnym elementem pozostaje hero .total-box (tonalna pigułka — afordancja zostaje). */ .result-section { background: transparent; border: 0; border-top: 1px solid var(--platform-hairline, var(--border)); padding: 1.75rem 0 0; margin-top: 2rem; } .result-section h2 { font-size: var(--text-lg, 1.125rem); color: var(--text); margin-bottom: var(--space-3, 0.75rem); text-align: left; } /* === Rejestr podsumowania (wzór Stripe): zdaniowy label po lewej (62% atramentu), wartość tabularna po prawej, wiersze rozdzielone włoskową linią — koniec z paragonem kafli. Jedynym mocnym elementem sekcji pozostaje hero .total-box. */ .result-list { margin-bottom: var(--space-5, 1.5rem); } .result-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4, 1rem); padding: 9px 2px; min-width: 0; } .result-row + .result-row { border-top: 1px solid var(--platform-hairline); } .result-row .result-label { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm, 0.8125rem); font-weight: 500; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--text) 62%, var(--muted)); margin-bottom: 0; overflow-wrap: anywhere; } .result-row .result-value { flex: 0 0 auto; font-size: var(--text-base, 0.875rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; white-space: nowrap; } /* Wiersze wynikowe w PLN: pełny atrament labela — akcent KOLOREM należy wyłącznie do hero. */ .result-row--strong .result-label { color: var(--text); font-weight: 600; } /* === Total Box: hero metryka jako tonalna pigułka (reguła 4) === Dawne odwrócone pudełko (background: var(--text) + biały tekst) gasiło kwotę na każdym ciemnym motywie — na glass była w 100% niewidoczna. */ .total-box { text-align: center; padding: 1.5rem; background: color-mix(in srgb, var(--primary) var(--tint-bg-mix, 7%), var(--panel)); border: 1px solid color-mix(in srgb, var(--primary) var(--tint-border-mix, 20%), transparent); border-radius: var(--radius); color: var(--text); margin-bottom: 1rem; } .total-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--primary) 60%, var(--muted)); margin-bottom: 0.25rem; } .total-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--deleg-primary-strong); } .total-words { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; } /* === Desktop: formularz przestaje być mobilną kolumną === Bez wyniku: rama --platform-content-narrow (jak header). Po obliczeniu: dwie kolumny — formularz + PRZYKLEJONE podsumowanie po prawej (wzór checkout/kalkulatory klasy Ramp), zamiast wyniku na dole długiej szpalty. */ @media (min-width: 1200px) { body.has-result .container { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 1.75rem; align-items: start; } /* Header podąża za poszerzoną (dwukolumnową) ramą treści. */ body.has-result .delegation-platform-header { max-width: calc(1280px - 3rem); } body.has-result .container > .platform-sync { grid-column: 1 / -1; } /* W układzie dwukolumnowym separatorem zostaje pionowa linia między formularzem a przyklejonym podsumowaniem (linia pozioma z układu jednokolumnowego nie ma tu czego oddzielać). */ body.has-result .result-section { position: sticky; top: 96px; margin-top: 0; max-height: calc(100vh - 120px); overflow-y: auto; border-top: 0; border-left: 1px solid var(--platform-hairline, var(--border)); padding: 0 0 0 1.75rem; } /* Rejestr w wąskiej kolumnie aside: ciaśniejszy rytm wierszy. */ body.has-result .result-row { padding-block: 7px; } body.has-result .result-section .actions { flex-wrap: wrap; } /* Pasek przewijania panelu tylko przy interakcji — nie jako stały mebel. */ body.has-result .result-section { scrollbar-width: none; } body.has-result .result-section:hover, body.has-result .result-section:focus-within { scrollbar-width: thin; } body.has-result .result-section::-webkit-scrollbar { width: 0; } body.has-result .result-section:hover::-webkit-scrollbar { width: 6px; } } /* === Historia rozliczeń === */ /* Płasko jak kroki formularza: linia + oddech zamiast karty. */ .history-section { background: transparent; border: 0; border-top: 1px solid var(--platform-hairline, var(--border)); padding: 1.75rem 0 0; margin-top: 2rem; } .history-section h2 { font-size: var(--text-lg, 1.125rem); color: var(--text); margin-bottom: var(--space-1, 0.25rem); } .history-hint { font-size: var(--text-sm, 0.8125rem); color: var(--deleg-muted-text); margin: 0 0 var(--space-3, 0.75rem); } .history-row { display: flex; align-items: center; gap: var(--space-4, 1rem); padding: 10px 2px; min-width: 0; } .history-row + .history-row { border-top: 1px solid var(--platform-hairline); } .history-main { flex: 1 1 auto; min-width: 0; } .history-title { font-size: var(--text-base, 0.875rem); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-meta { font-size: var(--text-xs, 0.75rem); color: var(--deleg-muted-text); } .history-amount { flex: 0 0 auto; font-size: var(--text-base, 0.875rem); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); } .history-actions { flex: 0 0 auto; display: flex; gap: 6px; } .history-action { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: transparent; color: var(--text); font: inherit; font-size: var(--text-xs, 0.75rem); font-weight: 600; cursor: pointer; } .history-action:hover { border-color: var(--primary); color: var(--primary); } .history-action--danger:hover { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--deleg-danger); } @media (max-width: 640px) { .history-row { flex-wrap: wrap; row-gap: 6px; } .history-actions { margin-left: auto; } } /* === Loading spinner === */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 0.5rem; } @keyframes spin { to { transform: rotate(360deg); } } /* === Error message === */ .error-msg { color: var(--deleg-danger); font-size: 0.85rem; margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent); } /* === Signature options === */ .pdf-options { min-width: min(100%, 360px); } .signature-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .signature-option { min-height: 42px; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--deleg-card); color: var(--text); font: inherit; font-size: 0.86rem; /* font:inherit zeruje wagę do 400; shared daje .signature-option medium — po flipie kolejności arkuszy trzeba ją przywrócić jawnie. */ font-weight: var(--platform-weight-medium, 500); overflow-wrap: anywhere; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .signature-option:hover, .signature-option:focus-visible { border-color: var(--platform-header-accent); background: var(--deleg-card-hover); outline: none; } /* Wybrany kafel = tint + znacznik (reguła 9/11) — pełny akcentowy fill konkurował z prawdziwym CTA "Pobierz PDF". */ .signature-option.is-active { color: var(--text); background: color-mix(in srgb, var(--platform-header-accent) 15%, transparent); border-color: color-mix(in srgb, var(--platform-header-accent) 38%, transparent); font-weight: 600; } .signature-option.is-active::before { content: "✓ "; color: var(--platform-header-accent); } .signature-summary { margin-top: 0.45rem; color: var(--muted); font-size: 0.78rem; line-height: 1.35; } body.signature-modal-open { overflow: hidden; } /* Modal podpisu na kanonie .platform-modal (overlay/panel/close z kitu shared). Lokalnie: z-index ponad sticky headerem, szerszy panel pod siatkę opcji podpisu oraz subtelny blur overlaya jako akcent apki (rejestr wyjątków §4). */ .signature-modal { z-index: 10020; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Klik-łapacz zamykania (data-signature-close) — tło i blur daje overlay kitu. */ .signature-modal__backdrop { position: absolute; inset: 0; } .signature-modal__panel { width: min(620px, 100%); } .signature-modal h2 { margin: 0; color: var(--text); font-size: clamp(1.45rem, 1.2rem + 0.7vw, 2rem); } /* .signature-modal__line stylizuje w całości shared (grupa .platform-divider: height 1px, margin 8px 0, background separatora) — lokalna reguła była w pełni maskowana przed flipem, więc została usunięta. */ .signature-modal__field { margin-bottom: 22px; } /* Etykiety zdaniowe jak w reszcie formularza (reguła 3). */ .signature-modal__field > label, .signature-modal__field .field label { display: block; margin-bottom: 0.45rem; color: color-mix(in srgb, var(--text) 62%, var(--muted)); font-size: 0.8rem; font-weight: 600; text-transform: none; } .signature-upload { width: 100%; min-height: 148px; display: grid; place-items: center; gap: 10px; padding: 22px; color: var(--text); background: color-mix(in srgb, var(--panel-soft) 82%, transparent); border: 1px dashed color-mix(in srgb, var(--border) 76%, var(--text) 16%); border-radius: 16px; font: inherit; cursor: pointer; } .signature-upload:hover, .signature-upload:focus-visible { border-color: var(--platform-header-accent); background: color-mix(in srgb, var(--platform-header-control-bg) 76%, transparent); outline: none; } .signature-upload__icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--platform-header-accent-text); background: var(--platform-header-accent); font-size: 2rem; } .signature-upload strong, .signature-upload small { display: block; text-align: center; } .signature-upload strong { text-transform: none; } .signature-upload small { margin-top: 2px; color: var(--muted); font-size: 0.76rem; } .signature-preview { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--deleg-card-hover); } .signature-preview[hidden] { display: none; } .signature-preview img { width: 128px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--paper); } .signature-preview span { color: var(--text); font-size: 0.86rem; overflow-wrap: anywhere; } .signature-modal__status { min-height: 1.1rem; margin-top: 0.6rem; color: var(--danger); font-size: 0.78rem; } .signature-modal__actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 22px; border-top: 1px solid var(--platform-hairline); } @media (max-width: 560px) { .signature-options, .signature-preview { grid-template-columns: 1fr; } /* Kurs NBP w jednej kolumnie — traki 1fr+gap 2.5rem nie mieszczą się na 320-430px (wartości bez punktów łamania wystawały poza kartę). */ .rate-info { grid-template-columns: 1fr; column-gap: 0; } /* Finał przepływu na pełnej szerokości — "Pobierz PDF" nie może być zgniecioną szpilką obok bloku podpisu. */ .result-section .actions { flex-direction: column; align-items: stretch; gap: 0.9rem; } .result-section .actions .btn { width: 100%; } .signature-modal { padding: 12px; } .signature-modal__panel { padding: 24px 18px; } }