/* Panel administracyjny sklepu Alusso — projekt „pulpit roboczy” (2026-10-30).
   Grafitowe menu, jasny obszar pracy, szampan jako jedyny akcent; Michroma tylko na małych etykietach,
   liczby w IBM Plex Mono. Samodzielny: wymaga wyłącznie fonts.css i lusso-tokens.css. Klasy z prefiksem a-. */

.a-body { margin: 0; color-scheme: light; background: var(--paper); color: var(--ink); font: 400 14px/20px var(--font-sans); -webkit-font-smoothing: antialiased; }
.a-body *, .a-body *::before, .a-body *::after { box-sizing: border-box; }
.a-app {
  --a-side: 252px;
  --a-gut: clamp(16px, 3vw, 40px);
  --a-row: #fbf8f2;
  --a-head: #f7f9f8;
  --st-ok: #23704f;
  --st-new: #7d6033;
  --st-work: #2a5db0;
  --st-sent: #5b45a8;
  --st-done: #5f6965;
  --st-bad: #b3261e;
  display: grid; grid-template-columns: var(--a-side) minmax(0, 1fr); min-height: 100vh;
}
.a-app a { color: inherit; }
.a-app :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Menu boczne --- */
.a-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5) var(--s-3) var(--s-4); background: var(--dark); color: var(--on-dark-2); }
.a-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) var(--s-3) var(--s-5); border-bottom: 1px solid rgba(238, 242, 240, .08); text-decoration: none; }
.a-brand img { filter: invert(1); display: block; }
.a-brand span { font: 400 8.5px/12px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-on-dark); border: 1px solid rgba(219, 191, 142, .35); padding: 3px 6px 2px; border-radius: var(--r-s); }
.a-nav { display: grid; gap: var(--s-5); }
.a-nav__group > p { margin: 0 0 var(--s-1); padding: 0 var(--s-3); font: 400 8.5px/16px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #848f8b; }
.a-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.a-nav a { display: flex; align-items: center; gap: var(--s-3); padding: 8px var(--s-3); border-radius: var(--r-m); color: var(--on-dark-2); text-decoration: none; font: 500 14px/20px var(--font-sans); }
.a-nav a svg { width: 16px; height: 16px; flex: none; opacity: .62; }
.a-nav a:hover { background: rgba(238, 242, 240, .06); color: var(--on-dark); }
.a-nav a[aria-current] { background: rgba(238, 242, 240, .09); color: #fff; box-shadow: inset 2px 0 0 var(--brand-alusso); }
.a-nav a[aria-current] svg { opacity: 1; color: var(--accent-on-dark); }
.a-nav__n { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand-alusso); color: #15120d; font: 600 11px/19px var(--font-mono); text-align: center; }
.a-me { margin-top: auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px var(--s-3); align-items: center; padding: var(--s-3); border-radius: var(--r-l); background: rgba(238, 242, 240, .05); border: 1px solid rgba(238, 242, 240, .06); }
.a-me .a-avatar { grid-row: span 2; }
.a-me__name { color: var(--on-dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-me__role { font-size: 12px; line-height: 16px; color: #9aa5a1; }
.a-me__links { grid-column: 1 / -1; display: flex; gap: var(--s-4); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid rgba(238, 242, 240, .08); font-size: 13px; }
.a-me__links a, .a-me__links button { color: var(--on-dark-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.a-me__links a:hover, .a-me__links button:hover { color: #fff; text-decoration: underline; }
.a-me__links form { margin: 0 0 0 auto; }

/* --- Inicjały użytkownika --- */
.a-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #2c3330; color: var(--accent-on-dark); font: 600 13px/1 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; }
.a-avatar--light { background: var(--accent-tint); color: var(--accent-strong); }
.a-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.a-avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.a-avatar--off { background: var(--sunk); color: var(--ink-3); }

/* --- Pasek górny i nagłówek strony --- */
.a-main { min-width: 0; display: flex; flex-direction: column; }
.a-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-2) var(--a-gut); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.a-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-3); min-width: 0; }
.a-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.a-crumbs a { color: var(--ink-2); text-decoration: none; }
.a-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.a-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.a-top__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.a-top__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.a-top__link:hover { color: var(--ink); text-decoration: underline; }
.a-top__link svg { width: 13px; height: 13px; }
.a-env { font: 400 8.5px/12px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-tint); padding: 5px 8px 4px; border-radius: var(--r-s); }

.a-page { width: 100%; max-width: 1400px; padding: var(--s-6) var(--a-gut) var(--s-8); display: grid; gap: var(--s-5); align-content: start; }
.a-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); flex-wrap: wrap; }
.a-head > div:first-child { min-width: 0; }
.a-eyebrow { margin: 0 0 6px; font: 400 9.5px/14px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-strong); }
.a-head h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font: 600 28px/34px var(--font-sans); letter-spacing: -.015em; }
.a-head__sub { margin: 6px 0 0; color: var(--ink-3); max-width: 70ch; }
.a-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- Przyciski --- */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: var(--r-m); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 13px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.a-app a.a-btn { color: var(--ink); }
.a-btn:hover { border-color: var(--ink-3); background: #fafbfb; }
.a-btn svg { width: 14px; height: 14px; flex: none; }
.a-btn--main, .a-app a.a-btn--main { background: var(--ink); border-color: var(--ink); color: #fff; }
.a-btn--main:hover { background: #2b312f; border-color: #2b312f; }
.a-btn--accent, .a-app a.a-btn--accent { background: var(--brand-alusso); border-color: var(--brand-alusso); color: #15120d; }
.a-btn--accent:hover { background: var(--brand-alusso-light); border-color: var(--brand-alusso-light); }
.a-btn--danger, .a-app a.a-btn--danger { color: var(--st-bad); border-color: color-mix(in srgb, var(--st-bad) 40%, var(--surface)); }
.a-btn--danger:hover { background: color-mix(in srgb, var(--st-bad) 7%, var(--surface)); border-color: var(--st-bad); }
.a-btn--sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.a-btn--wide { width: 100%; }
.a-btn--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.a-btn--link:hover { background: none; color: var(--ink); }
.a-btn--link.a-btn--danger { color: var(--st-bad); }

/* --- Karty --- */
.a-card { min-width: 0; display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.a-card--flush { padding: 0; gap: 0; overflow: hidden; }
.a-card--flush > .a-card__head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.a-card--flush > .a-card__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
.a-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.a-card__title { margin: 0; font: 400 9.5px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.a-card__h { margin: 0; font: 600 17px/24px var(--font-sans); }
.a-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: 13px; color: var(--ink-3); }
.a-card__more { font-size: 13px; color: var(--ink-2); text-decoration: none; }
.a-card__more:hover { color: var(--ink); text-decoration: underline; }
.a-card--warn { border-color: color-mix(in srgb, var(--st-bad) 30%, var(--line)); }

/* --- Układy --- */
.a-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: start; }
.a-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-col { display: grid; gap: var(--s-5); min-width: 0; align-content: start; }
.a-split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-5); align-items: start; }

/* --- Wskaźniki pulpitu --- */
.a-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); }
.a-kpi { position: relative; display: grid; gap: 4px; padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 2px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); text-decoration: none; overflow: hidden; }
.a-kpi::before { content: ""; position: absolute; inset: 14px auto 14px 0; width: 3px; border-radius: 0 2px 2px 0; background: var(--kpi, var(--line-strong)); }
.a-kpi--acc { --kpi: var(--brand-alusso); }
.a-kpi--new { --kpi: var(--st-new); }
.a-kpi--ok { --kpi: var(--st-ok); }
.a-kpi--work { --kpi: var(--st-work); }
.a-kpi__label { font: 400 9.5px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.a-kpi__value { font: 500 30px/38px var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.a-kpi__value small { font-size: 15px; letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
.a-kpi__note { font-size: 13px; color: var(--ink-3); }
a.a-kpi:hover { border-color: var(--line-strong); }
a.a-kpi:hover .a-kpi__note { color: var(--ink); }

/* Słupki sprzedaży z 14 dni (czysty CSS: wysokość w zmiennej --h) */
.a-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; height: 132px; padding-top: var(--s-2); }
.a-bars li { list-style: none; height: 100%; display: grid; align-items: end; position: relative; }
.a-bars li span { display: block; height: max(var(--h, 0%), 2px); border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--brand-alusso) 55%, var(--sunk)); }
.a-bars li:last-child span { background: var(--brand-alusso); }
.a-bars li:hover span { background: var(--accent-strong); }
.a-bars { margin: 0; padding-left: 0; }
.a-bars__axis { display: flex; justify-content: space-between; font: 400 11px/16px var(--font-mono); color: var(--ink-3); }

.a-share { display: block; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; margin-bottom: 2px; }
.a-share span { display: block; height: 100%; width: var(--w, 0%); background: var(--brand-alusso); }

/* --- Zakładki (statusy, sekcje) --- */
.a-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.a-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px var(--s-3) 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.a-tabs a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.a-tabs a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand-alusso); }
.a-tabs b { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--sunk); color: var(--ink-2); font: 500 11px/19px var(--font-mono); text-align: center; }
.a-tabs a[aria-current] b { background: var(--ink); color: #fff; }

/* --- Filtry --- */
.a-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); }
.a-filters label { display: grid; gap: 4px; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.a-filters input, .a-filters select { min-width: 150px; }
.a-search { position: relative; flex: 1 1 220px; max-width: 360px; }
.a-search svg { position: absolute; left: 12px; bottom: 12px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.a-search input { padding-left: 36px; width: 100%; }

/* --- Tabele --- */
.a-table-wrap { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; }
.a-table th { text-align: left; padding: 10px var(--s-4); background: var(--a-head); border-bottom: 1px solid var(--line); font: 400 9px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.a-table td { padding: 12px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.a-table th:first-child, .a-table td:first-child { padding-left: var(--s-5); }
.a-table th:last-child, .a-table td:last-child { padding-right: var(--s-5); }
.a-table tbody tr:last-child td { border-bottom: 0; }
.a-table tbody tr:hover td { background: var(--a-row); }
.a-table td a { font-weight: 600; text-decoration: none; }
.a-table td a:hover { text-decoration: underline; }
.a-table .num { text-align: right; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-table th.num { font-family: var(--font-display); font-size: 9px; }
.a-table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 600; background: var(--a-head); }
.a-table tr.is-off td { color: var(--ink-3); }
.a-table tr.is-error td { background: color-mix(in srgb, var(--st-bad) 6%, transparent); }
.a-table--edit td { padding-top: 8px; padding-bottom: 8px; }
.a-table--edit input:not([type="checkbox"]) { width: 100%; min-width: 96px; }
.a-table--edit td:first-child input:not([type="hidden"]) { min-width: 190px; }
.a-sub { display: block; font-size: 12px; line-height: 17px; color: var(--ink-3); font-weight: 400; }
.a-mono { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.a-muted { color: var(--ink-3); }
.a-thumb { width: 36px; height: 48px; object-fit: cover; border-radius: var(--r-s); display: block; background: var(--sunk); }
.a-who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.a-who > span { min-width: 0; }
.a-who strong, .a-who a { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Znaczniki stanu --- */
.a-pill { --c: var(--st-done); display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 11%, var(--surface)); color: var(--c); font: 500 12px/18px var(--font-sans); white-space: nowrap; letter-spacing: 0; }
.a-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.a-pill--ok { --c: var(--st-ok); }
.a-pill--new { --c: var(--st-new); }
.a-pill--work { --c: var(--st-work); }
.a-pill--sent { --c: var(--st-sent); }
.a-pill--done { --c: var(--st-done); }
.a-pill--bad { --c: var(--st-bad); }
.a-pill--plain::before { display: none; }
.a-pill--plain { padding: 2px 9px; }
.a-tag { display: inline-block; padding: 1px 7px; border-radius: var(--r-s); border: 1px solid var(--line); font: 400 8.5px/16px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); white-space: nowrap; vertical-align: middle; }
.a-tag--acc { border-color: color-mix(in srgb, var(--brand-alusso) 50%, var(--surface)); color: var(--accent-strong); background: var(--accent-tint); }

/* --- Komunikaty --- */
.a-alert { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; padding: 12px var(--s-4); border-radius: var(--r-m); border: 1px solid; font-weight: 500; }
.a-alert svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.a-alert--ok { color: var(--st-ok); background: color-mix(in srgb, var(--st-ok) 8%, var(--surface)); border-color: color-mix(in srgb, var(--st-ok) 30%, var(--surface)); }
.a-alert--bad { color: var(--st-bad); background: color-mix(in srgb, var(--st-bad) 7%, var(--surface)); border-color: color-mix(in srgb, var(--st-bad) 30%, var(--surface)); }
.a-alert--info { color: var(--ink-2); background: var(--surface); border-color: var(--line); font-weight: 400; }
.a-alert--warn { color: var(--accent-strong); background: var(--accent-tint); border-color: color-mix(in srgb, var(--brand-alusso) 45%, var(--surface)); }
.a-alert p { margin: 0; }
.a-alert p + p { margin-top: 4px; }

/* --- Formularze --- */
.a-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .a-app select, .a-app textarea {
  min-height: 40px; width: 100%; min-width: 0; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--surface); color: var(--ink); font: 400 14px/20px var(--font-sans); transition: border-color .15s, box-shadow .15s;
}
.a-app select { padding-right: 32px; appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6561' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.a-app textarea { min-height: 112px; resize: vertical; line-height: 22px; }
.a-app textarea.a-doc { min-height: 320px; font: 400 13.5px/22px var(--font-mono); }
.a-app input:focus, .a-app select:focus, .a-app textarea:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-alusso) 24%, transparent); }
.a-app input[readonly] { background: var(--a-head); color: var(--ink-2); }
.a-app input[type="checkbox"], .a-app input[type="radio"] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent-strong); flex: none; }
.a-app input[type="file"] { font: inherit; font-size: 13px; }
.a-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
.a-form--one { grid-template-columns: minmax(0, 1fr); }
.a-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.a-field--full { grid-column: 1 / -1; }
.a-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font: 600 13px/18px var(--font-sans); color: var(--ink); }
.a-label em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.a-hint { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-3); }
.a-field--error input, .a-field--error select, .a-field--error textarea { border-color: var(--st-bad) !important; }
.a-err { font-size: 12px; line-height: 17px; color: var(--st-bad); font-weight: 500; }
.a-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.a-check span { display: grid; gap: 2px; }
.a-check small { color: var(--ink-3); font-size: 12px; line-height: 17px; }
.a-count { font: 400 11px/16px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.a-count.is-over { color: var(--st-bad); }
.a-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-4); min-width: 0; }
.a-fieldset > legend { padding: 0; margin-bottom: var(--s-3); font: 400 9.5px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* Pole treści: znacznik „zmienione”, przywracanie domyślnej */
.a-text { display: grid; gap: 6px; padding: var(--s-4) 0; border-top: 1px solid var(--line); min-width: 0; }
.a-text:first-of-type { border-top: 0; padding-top: 0; }
.a-text__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.a-text__meta .a-count { margin-left: auto; }
.a-text__default { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-3); }
.a-text__default summary { cursor: pointer; width: max-content; }
.a-text__default p { margin: 6px 0 0; padding: 8px 10px; background: var(--a-head); border-radius: var(--r-m); white-space: pre-line; color: var(--ink-2); }

/* Wybór roli: karty z opisem uprawnień */
.a-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.a-role { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-l); cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.a-role:hover { border-color: var(--line-strong); }
.a-role:has(input:checked) { border-color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-alusso) 20%, transparent); background: color-mix(in srgb, var(--accent-tint) 35%, var(--surface)); }
.a-role:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.a-role strong { font-weight: 600; }
.a-role ul { grid-column: 2; margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 12px; line-height: 17px; color: var(--ink-3); }
.a-role li::before { content: "✓ "; color: var(--st-ok); }
.a-role li.no::before { content: "– "; color: var(--line-strong); }

/* Pasek zapisu przyklejony do dołu formularza */
.a-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0 calc(-1 * var(--s-5)) calc(-1 * var(--s-5)); padding: var(--s-3) var(--s-5); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); }
.a-savebar--solo { margin: 0; border: 1px solid var(--line); border-radius: var(--r-l); }
.a-savebar__state { font-size: 13px; color: var(--ink-3); }
.a-savebar__state.is-dirty { color: var(--accent-strong); font-weight: 600; }
.a-savebar > :last-child { margin-left: auto; display: flex; gap: var(--s-2); }

/* --- Listy: historia, dziennik zmian, strony treści --- */
.a-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.a-feed li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.a-feed li:first-child { border-top: 0; padding-top: 0; }
.a-feed p { margin: 0; color: var(--ink-2); }
.a-feed p b, .a-feed p a { color: var(--ink); font-weight: 600; }
.a-feed p a { text-decoration: none; }
.a-feed p a:hover { text-decoration: underline; }
.a-feed time { font: 400 12px/18px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.a-card--flush .a-feed { padding: var(--s-2) var(--s-5) var(--s-4); }
.a-card--flush .a-feed li:first-child { padding-top: 10px; }

.a-history { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; }
.a-history li { position: relative; display: grid; gap: 4px; padding: 0 0 var(--s-4) var(--s-5); border-left: 1px solid var(--line); }
.a-history li:last-child { border-left-color: transparent; padding-bottom: 0; }
.a-history li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.a-history li:first-child::before { border-color: var(--brand-alusso); background: var(--brand-alusso); }
.a-history__top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.a-history time { font: 400 12px/18px var(--font-mono); color: var(--ink-3); }
.a-history p { margin: 0; color: var(--ink-2); }

.a-dl { margin: 0; display: grid; }
.a-dl > div { display: grid; grid-template-columns: minmax(110px, 2fr) minmax(0, 3fr); gap: var(--s-3); padding: 9px 0; border-top: 1px solid var(--line); }
.a-dl > div:first-child { border-top: 0; padding-top: 0; }
.a-dl dt { color: var(--ink-3); font-size: 13px; }
.a-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.a-pages { display: grid; gap: var(--s-4); position: sticky; top: 72px; }
.a-pages section { display: grid; gap: 2px; }
.a-pages h2 { margin: 0 0 4px; padding: 0 var(--s-3); font: 400 9px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.a-pages a { display: flex; align-items: center; gap: var(--s-2); padding: 8px var(--s-3); border-radius: var(--r-m); text-decoration: none; color: var(--ink-2); font-weight: 500; }
.a-pages a:hover { background: var(--surface); color: var(--ink); }
.a-pages a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand-alusso), 0 0 0 1px var(--line); }
.a-pages a b { margin-left: auto; font: 500 11px/18px var(--font-mono); color: var(--accent-strong); }

/* Kafelki stron treści (spis na wejściu do „Treści strony”) */
.a-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.a-tile { display: grid; grid-template-rows: 116px auto; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.a-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-pane); }
.a-tile__img { position: relative; background: var(--dark) center / cover no-repeat; }
.a-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; }
.a-tile__img .a-tag { position: absolute; left: 10px; top: 10px; }
.a-tile__body { display: grid; gap: 4px; padding: var(--s-4); }
.a-tile__body strong { font-size: 15px; }
.a-tile__body span { font-size: 13px; color: var(--ink-3); }
.a-tile__doc { display: grid; place-items: center; background: var(--a-head); border-bottom: 1px solid var(--line); color: var(--line-strong); }
.a-tile__doc svg { width: 34px; height: 34px; }

/* Zdjęcia produktu */
.a-imgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-4) var(--s-3); }
.a-imgs li { display: grid; gap: 6px; position: relative; }
.a-imgs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-m); display: block; background: var(--sunk); }
.a-imgs .a-pill { position: absolute; left: 6px; top: 6px; background: var(--surface); }
.a-imgs form { margin: 0; }
.a-imgs__alt { display: grid; gap: 2px; }
.a-imgs__alt input { min-height: 30px !important; padding: 4px 8px !important; font-size: 12px !important; }
.a-imgs__alt .a-btn--link { justify-self: start; font-size: 12px; }
.a-imgs__actions { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; }

/* Tymczasowe hasło do przekazania */
.a-secret { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); background: var(--dark); color: var(--on-dark); border-radius: var(--r-m); }
.a-secret code { font: 500 17px/24px var(--font-mono); letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }
.a-secret .a-btn { margin-left: auto; background: transparent; color: var(--on-dark); border-color: rgba(238, 242, 240, .3); }

/* Puste stany */
.a-empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-5); text-align: center; color: var(--ink-3); }
.a-empty svg { width: 36px; height: 36px; color: var(--line-strong); }
.a-empty strong { color: var(--ink); font-size: 16px; }
.a-empty p { margin: 0; max-width: 46ch; }

/* --- Logowanie: zdjęcie z filmu + formularz --- */
.a-login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); min-height: 100vh; background: var(--surface); }
.a-login__photo { position: relative; overflow: hidden; background: var(--dark); color: var(--on-photo); display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-7); }
.a-login__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.a-login__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 9, .55) 0%, rgba(8, 10, 9, .15) 35%, rgba(8, 10, 9, .82) 100%); }
.a-login__photo > *:not(img) { position: relative; z-index: 1; }
.a-login__photo .a-brand { border: 0; padding: 0; justify-content: flex-start; }
.a-login__cap { display: grid; gap: var(--s-2); max-width: 30ch; }
.a-login__cap span { font: 400 9.5px/14px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-on-dark); }
.a-login__cap strong { font: 600 34px/40px var(--font-sans); letter-spacing: -.015em; }
.a-login__form { display: grid; align-content: center; justify-items: center; padding: var(--s-7) var(--a-gut); }
.a-login__form form { width: 100%; max-width: 360px; display: grid; gap: var(--s-5); }
.a-login__form h1 { margin: 0; font: 600 26px/32px var(--font-sans); letter-spacing: -.01em; }
.a-login__form .a-head__sub { margin-top: 6px; }
.a-login__foot { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-3); }

/* --- Edytor punktów na zdjęciu wnętrza --- */
.a-scene { position: relative; cursor: crosshair; user-select: none; background: var(--dark); }
.a-scene img { display: block; width: 100%; height: auto; }
.a-scene__pt { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 21, 20, .78); color: #fff; border: 2px solid #fff; font: 600 11px/1 var(--font-mono); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); pointer-events: none; }
.a-scene__pt.is-active { background: var(--brand-alusso); color: #15120d; transform: scale(1.18); }
.a-pt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.a-pt b { min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); font: 600 11px/1 var(--font-mono); }
.a-points tr:has(input[name="aktywny"]:checked) td { background: color-mix(in srgb, var(--accent-tint) 55%, var(--surface)); }
.a-points tr:has(input[name="aktywny"]:checked) .a-pt b { background: var(--brand-alusso); color: #15120d; }

/* --- Wydruk zamówienia --- */
.a-print { max-width: 880px; overflow-x: auto; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-8); background: var(--surface); color: var(--ink); min-height: 100vh; display: grid; gap: var(--s-5); align-content: start; }
.a-print__bar { display: flex; gap: var(--s-2); }
.a-print__head { display: flex; justify-content: space-between; gap: var(--s-5); padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
.a-print__head p { margin: var(--s-2) 0 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.a-print__no { display: grid; justify-items: end; gap: 2px; text-align: right; font-size: 12px; color: var(--ink-2); }
.a-print__no strong { font: 600 22px/28px var(--font-mono); color: var(--ink); }
.a-print__no span:first-child { font: 400 9px/14px var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.a-print__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.a-print h2 { margin: 0 0 4px; font: 400 9px/14px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.a-print p { margin: 0; }
.a-print__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.a-print__table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ink); font: 400 9px/14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.a-print__table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.a-print__table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.a-print__table tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 600; }
.a-print__sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin-top: var(--s-7); }
.a-print__sign span { border-top: 1px solid var(--ink-3); padding-top: 4px; font-size: 11px; color: var(--ink-3); }
.a-print__foot { font-size: 11px; color: var(--ink-3); }
@media print {
  .a-body { background: #fff; }
  .a-print { padding: 0; max-width: none; }
  .a-print__bar { display: none; }
}

/* --- Telefon i tablet --- */
@media (max-width: 1100px) {
  .a-grid, .a-grid--even, .a-split { grid-template-columns: minmax(0, 1fr); }
  .a-pages { position: static; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 900px) {
  .a-app { grid-template-columns: minmax(0, 1fr); }
  .a-side { position: sticky; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); overflow: visible; }
  .a-brand { border: 0; padding: 0; gap: var(--s-2); }
  .a-brand img { width: 96px; height: auto; }
  .a-nav { order: 3; flex-basis: 100%; display: flex; gap: 2px; overflow-x: auto; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) 2px; scrollbar-width: none; }
  .a-nav__group { display: contents; }
  .a-nav__group > p { display: none; }
  .a-nav ul { display: contents; }
  .a-nav a { padding: 6px 10px; white-space: nowrap; font-size: 13px; }
  .a-nav a svg { display: none; }
  .a-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--brand-alusso); }
  .a-me { margin: 0 0 0 auto; padding: 0; background: none; border: 0; display: flex; gap: var(--s-3); }
  .a-me__name, .a-me__role { display: none; }
  .a-me .a-avatar { width: 30px; height: 30px; font-size: 11px; }
  .a-me__links { margin: 0; padding: 0; border: 0; gap: var(--s-3); }
  .a-top { position: static; }
  .a-login { grid-template-columns: minmax(0, 1fr); }
  .a-login__photo { min-height: 220px; padding: var(--s-5); }
  .a-login__cap strong { font-size: 24px; line-height: 30px; }
}
@media (max-width: 640px) {
  .a-form { grid-template-columns: minmax(0, 1fr); }
  .a-head h1 { font-size: 23px; line-height: 30px; }
  .a-page { padding-top: var(--s-5); }
  .a-card { padding: var(--s-4); }
  .a-savebar { margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); }
  .a-table th:first-child, .a-table td:first-child { padding-left: var(--s-4); }
  .a-table th:last-child, .a-table td:last-child { padding-right: var(--s-4); }
  .a-top__link span, .a-env { display: none; }
  .a-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .a-hide-sm { display: none; }
}

/* SEO: podgląd wyniku Google, lista stron, wybór obrazu */
.a-serp { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; font-family: Arial, "Helvetica Neue", sans-serif; color: #202124; }
.a-serp__site { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.a-serp__fav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #e3e5e8; }
.a-serp__fav img { width: 16px; height: auto; }
.a-serp__site b { display: block; font: 400 14px/20px Arial, sans-serif; color: #202124; }
.a-serp__site small { display: block; font: 400 12px/18px Arial, sans-serif; color: #4d5156; overflow-wrap: anywhere; }
.a-serp__title { margin: 0 0 4px; font: 400 20px/26px Arial, sans-serif; color: #1a0dab; overflow-wrap: anywhere; }
.a-serp__desc { margin: 0; font: 400 14px/22px Arial, sans-serif; color: #4d5156; overflow-wrap: anywhere; }
.a-serp-cell { max-width: 560px; }
.a-serp-cell__t { display: block; color: #1a0dab; font: 400 15px/21px Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-serp-cell__d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.a-seo-table td:first-child { min-width: 180px; }
.a-seo-table td:first-child .a-tag { margin-top: 4px; }
.a-table .is-over, .a-count.is-over { color: var(--st-bad); font-weight: 600; }
.a-issues { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; line-height: 17px; color: var(--ink-2); }
.a-issues li { position: relative; padding-left: 14px; }
.a-issues li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--st-work); }
.a-issues--bad li::before { background: var(--st-bad); }
.a-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s-3); max-height: 360px; overflow-y: auto; padding: 2px; }
.a-pick__item { position: relative; display: grid; gap: 4px; cursor: pointer; }
.a-pick__item input { position: absolute; opacity: 0; pointer-events: none; }
.a-pick__img { display: block; aspect-ratio: 1.91 / 1; border-radius: var(--r-m); background: var(--sunk); overflow: hidden; outline: 1px solid var(--line); outline-offset: 0; }
.a-pick__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-pick__cap { font-size: 11.5px; line-height: 15px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-pick__item input:checked + .a-pick__img { outline: 2px solid var(--brand-alusso); outline-offset: 2px; }
.a-pick__item input:checked ~ .a-pick__cap { color: var(--ink); font-weight: 600; }
.a-pick__item input:focus-visible + .a-pick__img { outline: 2px solid var(--ink); outline-offset: 2px; }
.a-pre { margin: 0; padding: var(--s-3) var(--s-4); background: var(--a-head); border: 1px solid var(--line); border-radius: var(--r-m); font: 400 12.5px/19px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.a-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.a-checklist li { position: relative; padding-left: 22px; }
.a-checklist li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 1.5px solid var(--st-ok); border-bottom: 1.5px solid var(--st-ok); transform: rotate(-45deg); }
.a-checklist b { color: var(--ink); font-weight: 600; }
.a-break { overflow-wrap: anywhere; word-break: break-word; max-width: 340px; }
.a-row-actions { white-space: nowrap; text-align: right; }
.a-row-actions form { display: inline; }
.a-row-actions .a-btn svg { width: 14px; height: 14px; }
details > summary.a-card__title { cursor: pointer; list-style-position: outside; }

/* --- Zdjęcia na tłach AI (Produkt → Zdjęcia na tłach) --- */
.a-ai { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.a-ai-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.a-ai-actions form { margin: 0; }
.a-pick--tall .a-pick__img { aspect-ratio: 3 / 4; }
.a-ai-bgs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.a-ai-sugg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.a-ai-sugg li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.a-ai-res img { object-fit: contain; }
.a-ai-res .a-pill { position: static; justify-self: start; }
.a-ai-res__ph { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: var(--r-m); background: var(--sunk); color: var(--ink-3); font-size: 12px; }
.a-ai-res__cap { font-size: 12px; line-height: 16px; }
@media (max-width: 1100px) { .a-ai { grid-template-columns: minmax(0, 1fr); } }