/* Paket naplate. Uses the site's CSS variables; fallbacks only for standalone preview. */
.pn {
  --pn-bg: var(--bg, #fff);
  --pn-fg: var(--fg, #111);
  --pn-muted: var(--muted, #5c5c5c);
  --pn-accent: var(--accent, #1f5eff);
  --pn-ink: var(--accent-ink, #006b4f);
  --pn-line: var(--line, #d9d9d9);
  --pn-card: var(--card, #f6f6f6);
  color: var(--pn-fg);
  display: grid;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}
.pn *, .pn *::before, .pn *::after { box-sizing: border-box; }
.pn[aria-busy="true"] { cursor: progress; }

.pn-card {
  position: relative;
  display: grid;
  gap: .85rem;
  padding: 1.25rem;
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: 12px;
}
.pn-step { margin: 0; font-size: 1.05rem; }
.pn-grid { display: grid; gap: .85rem 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pn-field { display: grid; gap: .35rem; align-content: start; }
.pn-field > label { font-weight: 600; }
.pn input[type="text"], .pn input[type="date"] {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  font: inherit;
  color: var(--pn-fg);
  background: var(--pn-bg);
  border: 1px solid var(--pn-line);
  border-radius: 8px;
}
.pn :focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 2px; }

.pn-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pn-file:focus-visible + .pn-drop { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.pn-drop {
  display: grid;
  gap: .35rem;
  justify-items: center;
  text-align: center;
  padding: 1.75rem 1rem;
  background: var(--pn-bg);
  border: 2px dashed var(--pn-line);
  border-radius: 12px;
  cursor: pointer;
}
.pn-drop span { color: var(--pn-muted); font-size: .95rem; }
.pn-drop.pn-over { border-color: var(--pn-accent); }
.pn-filename { font-weight: 600; color: var(--pn-fg) !important; overflow-wrap: anywhere; }
.pn-privacy { margin: 0; font-weight: 600; color: var(--pn-ink); }
.pn-hint { margin: 0; font-size: .9rem; color: var(--pn-muted); }
.pn-link {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--pn-ink);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
  min-height: 2.75rem;
}

.pn-actions { display: flex; }
.pn-btn {
  min-height: 2.75rem;
  padding: .6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--pn-bg);
  background: var(--pn-fg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.pn-btn:disabled { opacity: .45; cursor: not-allowed; }
.pn-status { margin: 0; }
.pn-status:empty, .pn-error:empty { display: none; }
.pn-error { margin: 0; color: #c62828; }
.pn-progress { width: 100%; height: .5rem; accent-color: var(--pn-accent); }

.pn-preview:empty { display: none; }
.pn-preview { display: grid; gap: .75rem; }
.pn-scroll { overflow-x: auto; }
.pn-table { width: 100%; border-collapse: collapse; }
.pn-table caption { caption-side: top; text-align: left; font-weight: 600; padding: 0 0 .5rem; color: var(--pn-fg); }
.pn-table th, .pn-table td {
  padding: .5rem .5rem .5rem 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  border-bottom: 1px solid var(--pn-line);
  vertical-align: top;
}
.pn-table thead th { font-size: .85rem; color: var(--pn-muted); font-weight: 600; text-align: right; }
.pn-table thead th:first-child, .pn-table tbody th, .pn-table tfoot th { text-align: left; }
.pn-table tbody th { font-weight: 400; overflow-wrap: anywhere; min-width: 9rem; }
.pn-table td { text-align: right; white-space: nowrap; }
.pn-table tfoot th, .pn-table tfoot td { font-weight: 700; }

.pn-checks summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.pn-issues { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; max-height: 20rem; overflow-y: auto; }
.pn-err strong { color: #c62828; }
.pn-warn strong { color: #b26a00; }
p.pn-warn {
  margin: 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  border: 1px solid var(--pn-line);
  border-left: 3px solid #b26a00;
  border-radius: 0 8px 8px 0;
  background: var(--pn-card);
}
.pn-ok { margin: 0; color: var(--pn-ink); font-weight: 600; }
.pn-note { margin: 0; font-size: .9rem; color: var(--pn-muted); }
.pn-bridge {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--pn-accent);
  background: var(--pn-card);
  border-radius: 0 8px 8px 0;
}
.pn-bridge a { color: var(--pn-ink); font-weight: 600; }

@media (max-width: 480px) {
  .pn-card { padding: 1rem; }
  .pn-btn { width: 100%; }
  .pn-table { font-size: .9rem; }
}