:root{
  --pbn-bg:#0b0f19;
  --pbn-bg-hover:#111827;
  --pbn-accent:#2563eb;
  --pbn-border:#d1d5db;
  --pbn-panel:#ffffff;
  --pbn-muted:#374151; /* ciemniejszy status */
  --pbn-text:#0f172a;
  --pbn-error:#b91c1c;
}

.pbn-wrap{display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:start}
@media (max-width:1024px){.pbn-wrap{grid-template-columns:1fr}}
.pbn-panel{border:1px solid var(--pbn-border);border-radius:14px;padding:18px;background:var(--pbn-panel);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.pbn-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media (max-width:560px){.pbn-grid{grid-template-columns:1fr}}
.pbn-field{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--pbn-text)}
.pbn-field input{padding:10px 12px;border:1px solid var(--pbn-border);border-radius:10px;font-size:15px;color:var(--pbn-text);background:#fff}
.pbn-field input:focus{outline:3px solid rgba(37,99,235,.25);border-color:var(--pbn-accent)}
.pbn-btn{background:var(--pbn-bg);color:#fff;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:600;font-size:15px;transition:background .15s ease}
.pbn-btn:hover{background:var(--pbn-bg-hover)}
.pbn-btn:disabled{opacity:.55;cursor:not-allowed}
.pbn-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pbn-status{font-size:14px;color:var(--pbn-muted);margin-top:10px}
.pbn-status.error{color:var(--pbn-error)}
.pbn-canvas-col{border:1px dashed var(--pbn-border);border-radius:14px;padding:12px;background:#f8fafc}
.pbn-canvas{max-width:100%;height:auto;display:block;margin:auto;image-rendering:auto}