/* PimBox — signed-in application styles.
   Self-hosted only: no CDN, no webfonts, so a strict CSP (style-src/font-src 'self') holds.
   Single dark theme; base.html sets data-theme="dark" and color-scheme below makes native
   controls, scrollbars and autofill follow it.

   Design note: a PIM is a system of identifiers — SKU, EAN, offer id, code. Those get the
   mono face and a chip treatment, and the mono face also carries eyebrows, table headers and
   section labels so the "catalogue record" feel is consistent rather than decorative.
   Everything else stays quiet so identifiers and numbers are what the eye lands on. */

:root {
  /* Canvas — slate, slightly cool-green, deliberately not the default dashboard navy. */
  --bg: #0c1116;
  --bg-deep: #080c10;
  --surface: #131a21;
  --surface-2: #18212a;
  --fg: #e6edf3;
  --muted: #8b9aa7;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Copper is the action colour — this is a catalogue/packaging product, not another
     cornflower-blue dashboard. Sky stays for links, so actions and navigation read apart. */
  --accent: #e0913f;
  --accent-hover: #eda558;
  --on-accent: #1a1207;
  --sky: #7cb3e8;
  --ok: #5bd6a0;
  --warn: #e5b567;
  --danger: #f2607a;
  /* Data marks (dashboard charts): copper family, stepped into the chart lightness band
     (validated against --surface); one series per chart, so one hue. */
  --chart: #c97a2e;

  --radius: 10px;
  --radius-lg: 14px;
  --s1: 0.35rem;
  --s2: 0.6rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.25rem;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
  font-family: var(--sans);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 78% -14%, rgba(224, 145, 63, 0.10), transparent 70%),
    var(--bg);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.018em; line-height: 1.2; font-weight: 650; }
a { color: var(--sky); }

:where(a, button, input, select, textarea, summary, label):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  a, button, input, select, textarea {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
}

/* --- Identifiers: the signature treatment ------------------------------------- */
code, .id {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.1em 0.42em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: #cfe0ee;
  word-break: break-all;
}

/* --- Pre-auth cards (login, register, reset) ---------------------------------- */
.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 4rem 1rem;
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.auth-wrap.wide .card { max-width: 560px; }

.card h1 { margin: 0 0 var(--s1); font-size: 1.4rem; }
.card h2 {
  margin: var(--s5) 0 var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Forms -------------------------------------------------------------------- */
label { display: block; margin: var(--s3) 0 var(--s1); font-size: 0.85rem; color: var(--muted); }

input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
}
textarea { font: inherit; }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
::placeholder { color: rgba(139, 154, 167, 0.65); }

button, .btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.card button { width: 100%; margin-top: var(--s4); padding: 0.7rem 1rem; }
button:hover, .btn:hover { background: var(--accent-hover); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

button.small, .btn.small { padding: 0.35rem 0.7rem; font-size: 0.82rem; width: auto; margin: 0; }
button.danger { background: var(--danger); color: #2b0610; }
button.danger:hover { background: #f57a8f; }
button.ghost, .btn.ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg);
}
button.ghost:hover, .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
}

/* --- Messages ----------------------------------------------------------------- */
.muted { color: var(--muted); font-size: 0.9rem; }
.lead { color: var(--muted); margin: var(--s1) 0 var(--s4); max-width: 68ch; }

.error, .notice {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  border-left: 3px solid;
}
.error { background: rgba(242, 96, 122, 0.10); border-color: var(--danger); color: #ffc3ce; }
.notice { background: rgba(124, 179, 232, 0.09); border-color: var(--sky); color: #cfe3f6; }

.empty {
  padding: var(--s5) var(--s3);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.qr { background: #fff; padding: 12px; border-radius: var(--radius); width: max-content; }
.qr svg { display: block; width: 180px; height: 180px; }

/* --- Badges & pills ----------------------------------------------------------- */
.badge, .pill {
  display: inline-block;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.badge { margin-left: var(--s1); }
.badge--active, .pill--ok { background: rgba(91, 214, 160, 0.15); color: var(--ok); }
.badge--error, .badge--needs_reconnect { background: rgba(242, 96, 122, 0.15); color: #ffb3c1; }
.badge--importing { background: rgba(229, 181, 103, 0.16); color: var(--warn); }
.badge--disconnected { background: rgba(139, 154, 167, 0.15); color: var(--muted); }
.pill--warn { background: rgba(229, 181, 103, 0.16); color: var(--warn); }

/* --- Tables ------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: 0.6rem 0.75rem; font-size: 0.88rem; }
.tbl th {
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}
.tbl tbody tr { border-top: 1px solid var(--line); }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.tbl form { margin: 0; }
.tbl td.err { color: #ffb3c1; max-width: 320px; word-break: break-word; font-size: 0.8rem; }

.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.row form { margin: 0; }
.row input, .row select, .row button { width: auto; margin: 0; }

.muted a.on { color: var(--fg); font-weight: 650; text-decoration: underline; }

/* --- Tabs (product editor) ----------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  margin: var(--s3) 0 var(--s4);
  border-bottom: 1px solid var(--line);
}
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0.45rem 0.7rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 6px 6px 0 0;
}
.tabs a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.03); }
.tabs a.on { color: var(--fg); font-weight: 650; border-bottom-color: var(--accent); }
.tabs__count {
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.tabs a.on .tabs__count { background: rgba(224, 145, 63, 0.18); color: #ffd9ac; }
.tabs__count--warn { background: rgba(229, 181, 103, 0.2); color: var(--warn); }

.crumbs { margin: 0 0 var(--s2); font-size: 0.88rem; }

/* --- Lists & media ------------------------------------------------------------ */
.accounts { list-style: none; padding: 0; margin: var(--s3) 0; }
.accounts li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.accounts form { margin: 0; }
/* A deliberately disconnected account: still listed, visibly inactive, one way back. */
.accounts li.account--disconnected > div:first-child { opacity: 0.55; }
.reconnect-banner { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3); flex-wrap: wrap; }

.imgs { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0; }
.imgs figure { margin: 0; }
.imgs img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Checkboxes ---------------------------------------------------------------
   `input { width: 100% }` above is right for text fields and wrong for boxes. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}

/* --- Merge suggestions --------------------------------------------------------
   One card = one candidate product. The head states *why* these offers are grouped,
   the list lets the user drop what doesn't belong, the name becomes the product name. */
.suggestion {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s3);
  margin: var(--s2) 0 var(--s3);
  background: var(--surface);
}
.suggestion__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.suggestion input[type="text"] { max-width: 46ch; }
.suggestion .actions { margin-top: var(--s3); }

.checks { list-style: none; padding: 0; margin: var(--s2) 0 var(--s3); }
.checks li + li { border-top: 1px solid var(--line); }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) 0.2rem;
  color: var(--fg);
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: 6px;
}
.check:hover { background: rgba(255, 255, 255, 0.03); }
.check input { margin-top: 0.28rem; }
.check__body { display: grid; gap: 0.15rem; min-width: 0; }
.check__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.check__meta .badge { margin-left: 0; }

/* Standalone field label above an input that isn't wrapping it. */
label.field { margin-bottom: var(--s1); }

/* --- Filter / inline action rows ---------------------------------------------- */
.filters { margin: var(--s3) 0; }
.filters input[type="search"], .filters input[type="text"] { min-width: min(30ch, 100%); }
.filters select { max-width: 34ch; }

/* --- Bulk action bar (sticks to the bottom while the user scans the table) ----- */
.bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: var(--s2);
  padding: var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 -10px 24px -20px rgba(0, 0, 0, 0.9);
}
.bulkbar__hint { margin: 0 0 var(--s2); color: var(--muted); font-size: 0.85rem; }
.bulkbar input, .bulkbar select, .bulkbar button { width: auto; margin: 0; }
.bulkbar input[type="text"] { min-width: min(28ch, 100%); }

/* Table cell that carries a title plus its identifier chip. */
.cell-title { display: block; font-weight: 600; color: var(--fg); }
a.cell-title { color: var(--sky); }
.tbl td code { font-size: 0.78em; }

/* --- Stat tiles --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s2);
  margin: var(--s3) 0 var(--s4);
}
.stat {
  display: block;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}
.stat span {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
a.stat:hover { border-color: var(--accent); background: var(--surface-2); }
.alerts { display: grid; gap: var(--s2); margin: var(--s3) 0; }

/* --- Impersonation banner ----------------------------------------------------- */
.imp-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  background: #7c4a12;
  border-bottom: 1px solid #a9691f;
  color: #ffe9cf;
  font-size: 0.88rem;
}
.imp-banner form { margin: 0; }
.imp-banner button { padding: 0.3rem 0.7rem; font-size: 0.82rem; background: #ffe9cf; color: #5a3409; }

/* --- App shell ---------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s2) var(--s3);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.shell__toggle { display: none; }
.shell__main { min-width: 0; display: flex; flex-direction: column; }

.side {
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  padding: var(--s4) var(--s3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.side__brand {
  display: block;
  margin: 0 0.7rem var(--s5);
  color: var(--fg);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.side__brand span { color: var(--accent); }
.side__nav { display: grid; gap: 1px; }
.side__group {
  margin: var(--s4) 0.7rem var(--s1);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #748491;
}
.side__group:first-of-type { margin-top: 0; }
.side__nav a {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: #c3d0da;
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 2px solid transparent;
}
.side__nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg); }
.side__nav a.on {
  background: rgba(224, 145, 63, 0.12);
  border-left-color: var(--accent);
  color: #ffd9ac;
  font-weight: 600;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 58px;
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--line);
  background: rgba(12, 17, 22, 0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar form { margin: 0; }
.topbar__spacer { margin-right: auto; }
.topbar__burger { display: none; cursor: pointer; font-size: 1.25rem; margin: 0; }
.topbar__user {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content { width: 100%; max-width: 1180px; padding: var(--s5) var(--s4) 4rem; }
.content > h1 { margin: 0 0 var(--s1); font-size: 1.55rem; }
.content > h2 {
  margin: var(--s5) 0 var(--s2);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.content .card { max-width: none; padding: var(--s4); margin-bottom: var(--s3); box-shadow: none; }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; }

@media (max-width: 880px) {
  .shell { display: block; }
  .side {
    display: none;
    position: fixed;
    z-index: 20;
    width: 258px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
  }
  .shell__toggle:checked ~ .side { display: block; }
  .topbar__burger { display: inline-block; }
  .topbar { padding: 0 var(--s3); gap: var(--s2); }
  .topbar__user { display: none; }
  .content { padding: var(--s4) var(--s3) 3rem; }
  .card { padding: var(--s4); }
}

/* Keyset pagination link under long lists (products, offers). */
.pager { margin: 0.75rem 0 1.25rem; }

/* --- Product quality ------------------------------------------------------------ */
/* Score chip: the number is what matters, colour only backs it up (good / mid / bad). */
.score {
  display: inline-block;
  min-width: 2.4rem;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}
.score--good { background: rgba(91, 214, 160, 0.15); color: var(--ok); }
.score--mid { background: rgba(229, 181, 103, 0.16); color: var(--warn); }
.score--bad { background: rgba(242, 96, 122, 0.15); color: #ffb3c1; }
.check-inline { display: inline-flex; align-items: center; gap: var(--s1); color: var(--muted); font-size: 0.88rem; }
.add-product { margin-top: var(--s4); }
.add-product summary { cursor: pointer; color: var(--sky); }
.quality-panel {
  display: grid;
  gap: var(--s2);
  margin: var(--s3) 0;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.quality-panel__head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.quality-panel__facts { color: var(--muted); font-size: 0.85rem; font-family: var(--mono); }
.quality-panel ul { margin: 0; padding-left: 1.1rem; }
.quality-panel li { margin: 0.2rem 0; }

/* --- Dashboard charts ------------------------------------------------------------ */
.stat span small { font-size: 0.55em; font-weight: 600; color: var(--muted); }
.issue-bars { list-style: none; margin: var(--s2) 0 var(--s4); padding: 0; display: grid; gap: var(--s1); }
.issue-bars__row {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(5rem, auto) 1fr;
  align-items: center;
  gap: var(--s3);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
}
.issue-bars__row:hover { background: var(--surface-2); }
.issue-bars__label { font-weight: 600; }
.issue-bars__value { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.85rem; }
.issue-bars__bar { display: block; }
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--s3);
  margin: var(--s3) 0 var(--s4);
}
.chart {
  margin: 0;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.chart figcaption { margin-bottom: var(--s2); font-weight: 600; font-size: 0.9rem; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-mark { fill: var(--chart); }
.chart-mark:hover { fill: var(--accent-hover); }
.chart-track { fill: var(--surface-2); }
.chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.chart-dot:hover { fill: var(--accent-hover); }
.chart-label { fill: var(--muted); font-size: 9px; font-family: var(--mono); }
.chart-label--strong { fill: var(--fg); font-weight: 700; }
@media (max-width: 640px) {
  .issue-bars__row { grid-template-columns: 1fr auto; }
  .issue-bars__bar { grid-column: 1 / -1; }
}

/* --- Product view ------------------------------------------------------------------
   A product is a catalogue record: the header reads like an index card (cover, number,
   identifiers, counts), the sidebar is the quality control sheet, and the description is
   previewed on a light sheet - the way the buyer sees it on Allegro, not as raw HTML. */
.pv { display: grid; gap: var(--s3); }
.pv-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pv-hint { color: var(--muted); font-size: 0.88rem; margin: 0 0 var(--s3); max-width: 70ch; }
.pv-h2 { margin: var(--s5) 0 var(--s2); font-size: 1.05rem; }

.pv-record {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: start;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pv-record__cover {
  width: 132px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pv-record__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-record__nocover {
  display: grid;
  place-content: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.pv-record__nocover span { color: var(--sky); }
.pv-record__eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pv-record__no { color: var(--accent); font-weight: 700; }
.pv-record__name { margin: 0.25rem 0 var(--s2); font-size: 1.6rem; overflow-wrap: anywhere; }
.pv-ids { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0 0 var(--s2); }
.pv-ids div { display: flex; align-items: center; gap: var(--s1); }
.pv-ids dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted); }
.pv-ids dd { margin: 0; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.pv-record__facts { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 0; font-size: 0.88rem; color: var(--muted); }
.pv-record__facts > * + *::before { content: "·"; margin: 0 0.55rem; color: var(--line-strong); }
.pv-record__facts a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.pv-record__facts a:hover { color: var(--sky); }
.pv-record__act { display: grid; justify-items: end; gap: var(--s1); max-width: 15rem; }
.pv-record__act form { margin: 0; }
.pv-record__note { margin: 0; font-size: 0.78rem; color: var(--muted); text-align: right; }

.pv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4); align-items: start; }
.pv-main > .tabs { margin-top: 0; }
.pv-side { position: sticky; top: var(--s3); display: grid; gap: var(--s3); }

.pv-form { display: grid; gap: var(--s3); }
.pv-field label, .pv-grid label { margin-top: 0; }
.pv-field--narrow { max-width: 22rem; }
.pv-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s1); flex-wrap: wrap; }
.pv-field__meta { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.pv-field__help { margin: var(--s1) 0 0; font-size: 0.8rem; color: var(--muted); }
.pv-field__help .over, [data-count-for].over { color: var(--danger); font-weight: 700; }
.pv-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.pv-aside-action { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
textarea.code { font-family: var(--mono); font-size: 0.82rem; line-height: 1.5; }

.pv-edit { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3); background: var(--surface); }
.pv-edit[open] { padding-bottom: var(--s3); }
.pv-edit summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.pv-edit .notice { margin-top: var(--s2); }

/* The description sheet: Allegro renders descriptions dark-on-white, so the preview does too. */
.desc-sheet {
  --ink: #1d232a;
  max-height: 34rem;
  overflow: auto;
  padding: 1.75rem 2rem;
  background: #fbfaf7;
  color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
  font-size: 0.95rem;
  line-height: 1.6;
}
.desc-sheet__section + .desc-sheet__section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #e6e2da; }
.desc-sheet__section--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.desc-sheet h1 { font-size: 1.35rem; margin: 0 0 0.6rem; color: var(--ink); }
.desc-sheet h2 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--ink); }
.desc-sheet p { margin: 0 0 0.7rem; }
.desc-sheet ul, .desc-sheet ol { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.desc-sheet__img img { display: block; width: 100%; height: auto; border-radius: 6px; }

.pv-params td { vertical-align: middle; }
.pv-params td:first-child { width: 45%; }
.pv-params input { margin: 0; }
.pv-params .pill { margin-left: var(--s1); }
.pv-params__new td { background: rgba(255, 255, 255, 0.015); }

.pv-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); }
.pv-tile { display: grid; gap: var(--s1); }
.pv-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.pv-tile:first-child img { border-color: var(--accent); }
.pv-tile__meta { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pv-tile__meta form { margin: 0 0 0 auto; }
.pv-tile__no { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.pv-tile--add form {
  display: grid;
  gap: var(--s2);
  align-content: center;
  justify-items: center;
  aspect-ratio: 1;
  padding: var(--s3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}
.pv-tile--add label { margin: 0; color: var(--fg); font-weight: 600; }
.pv-tile--add label span { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.pv-tile--add input[type="file"] { font-size: 0.75rem; padding: 0.3rem; }

.pv-price { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s4); align-items: start; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); }
.pv-grid__check { display: flex; align-items: end; }
.pv-price__result { padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pv-price__result strong { display: block; margin: var(--s1) 0; font-size: 2rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pv-price__result p { margin: 0; font-size: 0.8rem; }

.pv-publish { display: flex; justify-content: space-between; gap: var(--s4); align-items: start; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pv-publish p { margin: 0 0 var(--s1); }
.pv-sendlist { margin: 0 0 var(--s2); padding-left: 1.1rem; }
.pv-drift { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }

/* Quality control sheet. */
.qc { padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.qc__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.qc__list { list-style: none; margin: 0; padding: 0; display: grid; }
.qc__item {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  gap: 0.15rem var(--s1);
  align-items: baseline;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}
.qc__mark { font-weight: 800; text-align: center; }
.qc__item--ok .qc__mark { color: var(--ok); }
.qc__item--bad .qc__mark { color: var(--danger); }
.qc__label { font-size: 0.88rem; font-weight: 600; }
.qc__item--ok .qc__label { color: var(--muted); font-weight: 500; }
.qc__value { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); text-align: right; max-width: 8.5rem; }
.qc__meter { grid-column: 2 / -1; display: block; margin-top: 0.15rem; }
.qc__fill--ok { fill: var(--ok); }
.qc__fill--bad { fill: var(--chart); }
.qc__fix { grid-column: 2 / -1; font-size: 0.78rem; line-height: 1.4; text-decoration: none; }
.qc__fix::after { content: " →"; }
.qc__fix:hover { text-decoration: underline; }

.pv-danger { padding: var(--s2) var(--s3); border: 1px solid rgba(242, 96, 122, 0.25); border-radius: var(--radius); }
.pv-danger summary { cursor: pointer; color: #ffb3c1; font-size: 0.85rem; }
.pv-danger p { font-size: 0.8rem; }

@media (max-width: 1100px) {
  .pv-layout { grid-template-columns: minmax(0, 1fr); }
  .pv-side { position: static; order: -1; }
  .pv-danger { order: 2; }
}
@media (max-width: 760px) {
  .pv-record { grid-template-columns: 84px minmax(0, 1fr); padding: var(--s3); gap: var(--s3); }
  .pv-record__cover { width: 84px; }
  .pv-record__name { font-size: 1.25rem; }
  .pv-record__act { grid-column: 1 / -1; justify-items: stretch; max-width: none; }
  .pv-record__act button { width: 100%; }
  .pv-record__note { text-align: left; }
  .pv-record__facts { flex-direction: column; }
  .pv-record__facts > * + *::before { content: none; }
  .pv-price { grid-template-columns: minmax(0, 1fr); }
  .pv-publish { flex-direction: column; }
  .desc-sheet { padding: 1.1rem; }
  .desc-sheet__section--split { grid-template-columns: minmax(0, 1fr); }
}

/* Heading / list summary with an action on the right (export links). */
.section-head, .list-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.section-head h2 { margin-bottom: var(--s1); }
.list-meta p { margin: 0; }
.list-meta { margin: var(--s2) 0 var(--s3); }

/* --- Upcoming integrations ------------------------------------------------------------
   In the menu they sit under "Integracje" but read as not-yet-available: dimmer, with a
   "wkrótce" tag, and they lead to the description on the accounts page, not to a feature. */
.side__nav a.side__soon { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); color: #7d8c98; }
.side__nav a.side__soon span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  opacity: 0.85;
}
.upcoming { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.upcoming h2 { margin: 0 0 var(--s1); }
.upcoming__list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s3);
}
.upcoming__card {
  padding: var(--s3);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.upcoming__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.upcoming__head strong { font-size: 1.05rem; }
.upcoming__kind { margin: 0.2rem 0 var(--s2); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.upcoming__card p:last-child { margin: 0; font-size: 0.88rem; color: #c3d0da; }