.nc-root[hidden], .nc-reopen[hidden], .nc-cats[hidden], [data-nc-action][hidden] { display: none !important; }

.nc-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .45);
}

.nc-dialog {
  position: fixed; z-index: 9999;
  left: 50%; bottom: var(--zwinnie-space-4, 16px);
  transform: translateX(-50%);
  width: min(640px, calc(100vw - var(--zwinnie-space-8, 48px)));
  max-height: calc(100vh - var(--zwinnie-space-8, 48px));
  overflow-y: auto;
  padding: var(--zwinnie-space-6, 32px);
  background: var(--zwinnie-surface, #fff);
  color: var(--zwinnie-text, #1f2937);
  border: 1px solid var(--zwinnie-border, #e5e7eb);
  border-radius: var(--zwinnie-radius-lg, 12px);
  box-shadow: var(--zwinnie-shadow-lg, 0 16px 48px rgba(0,0,0,.18));
  font-family: var(--zwinnie-font-sans, system-ui, sans-serif);
}

.nc-title { margin: 0 0 var(--zwinnie-space-2, 8px); font-size: var(--zwinnie-fs-h3, 1.25rem); line-height: var(--zwinnie-lh-heading, 1.25); }
.nc-body  { margin: 0 0 var(--zwinnie-space-3, 12px); font-size: var(--zwinnie-fs-body, 1rem); color: var(--zwinnie-text-muted, #4b5563); }
.nc-policy { margin: 0 0 var(--zwinnie-space-4, 16px); font-size: var(--zwinnie-fs-sm, .875rem); }
.nc-policy a { color: var(--zwinnie-accent, #C2410C); }

.nc-cats { display: grid; gap: var(--zwinnie-space-3, 12px); margin-bottom: var(--zwinnie-space-4, 16px); }
.nc-cat { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--zwinnie-space-2, 8px); align-items: start; }
.nc-cat-name { font-weight: var(--zwinnie-fw-semibold, 600); }
.nc-cat-desc { grid-column: 2; font-size: var(--zwinnie-fs-sm, .875rem); color: var(--zwinnie-text-muted, #4b5563); }

.nc-actions { display: flex; flex-wrap: wrap; gap: var(--zwinnie-space-2, 8px); justify-content: flex-end; }

.nc-btn {
  padding: var(--zwinnie-space-2, 8px) var(--zwinnie-space-4, 16px);
  border-radius: var(--zwinnie-radius-md, 8px);
  font: inherit; font-weight: var(--zwinnie-fw-medium, 500);
  cursor: pointer;
  border: 1px solid var(--zwinnie-border-strong, #9ca3af);
  background: transparent; color: inherit;
}
.nc-btn-primary {
  background: var(--zwinnie-accent, #C2410C);
  border-color: var(--zwinnie-accent, #C2410C);
  color: var(--zwinnie-accent-contrast, #fff);
}
.nc-btn-primary:hover { background: var(--zwinnie-accent-hover, #9A3412); border-color: var(--zwinnie-accent-hover, #9A3412); }
.nc-btn:focus-visible, .nc-reopen:focus-visible { outline: 2px solid var(--zwinnie-focus, #C2410C); outline-offset: 2px; }

.nc-reopen {
  position: fixed; z-index: 9997;
  left: var(--zwinnie-space-4, 16px); bottom: var(--zwinnie-space-4, 16px);
  width: 40px; height: 40px;
  border-radius: var(--zwinnie-radius-pill, 999px);
  border: 1px solid var(--zwinnie-border, #e5e7eb);
  background: var(--zwinnie-surface, #fff);
  color: var(--zwinnie-text-muted, #4b5563);
  cursor: pointer;
}

/* Placeholder osadzen - uzywany w Task 5 */
.nc-embed {
  display: grid; place-items: center; gap: var(--zwinnie-space-3, 12px);
  padding: var(--zwinnie-space-6, 32px);
  text-align: center;
  background: var(--zwinnie-surface-alt, #f9fafb);
  border: 1px dashed var(--zwinnie-border-strong, #9ca3af);
  border-radius: var(--zwinnie-radius-md, 8px);
}
.nc-embed-note { font-size: var(--zwinnie-fs-xs, .75rem); color: var(--zwinnie-text-subtle, #6b7280); }

@media (prefers-reduced-motion: no-preference) {
  .nc-dialog { animation: nc-in .18s ease-out; }
  @keyframes nc-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}