/* Wspólne komunikaty (toasty) i okna potwierdzenia z kreator-ui.js: zamiast okien przeglądarki. */
.kreator-toasts {
  position: fixed; left: 50%; bottom: 18px; z-index: 1000; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(560px, calc(100vw - 32px)); pointer-events: none;
}
.kreator-toast {
  max-width: 100%; padding: 9px 16px; border-radius: 10px; background: #1c1c1c; color: #f9f9f9; border: 1px solid rgba(241, 225, 221, .2);
  font: 15px/1.4 'Alegreya', Georgia, serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  pointer-events: auto; cursor: pointer; animation: kreator-toast-in .18s ease-out; transition: opacity .2s ease;
}
.kreator-toast.leaving { opacity: 0; }
@keyframes kreator-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

dialog.kreator-modal {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 22px 24px;
  border: 1px solid rgba(59, 44, 38, .3); border-radius: 14px; background: #f1e1dd; color: #3b2c26;
  font: 16px/1.45 'Alegreya', Georgia, serif; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
dialog.kreator-modal::backdrop { background: rgba(43, 33, 30, .35); }
/* Selektory z dialog.kreator-modal przebijają globalne style dialogów w aplikacjach (np. dialog form { display: flex }) */
dialog.kreator-modal form { display: block; margin: 0; }
dialog.kreator-modal .kreator-modal-title { margin: 0 0 8px; font: 700 24px/1.2 'UnifrakturMaguntia', 'Alegreya SC', Georgia, serif; color: #741b30; }
dialog.kreator-modal .kreator-modal-text { margin: 0 0 20px; font: inherit; color: inherit; }
dialog.kreator-modal .kreator-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
dialog.kreator-modal .kreator-btn {
  font: inherit; font-weight: 400; padding: 7px 16px; border: 1px solid rgba(59, 44, 38, .35); border-radius: 8px;
  background: #fbf6f3; color: #3b2c26; cursor: pointer;
}
dialog.kreator-modal .kreator-btn:hover { border-color: #741b30; background: rgba(116, 27, 48, .12); }
dialog.kreator-modal .kreator-btn.kreator-btn-primary { background: #741b30; border-color: #741b30; color: #f9f9f9; }
dialog.kreator-modal .kreator-btn.kreator-btn-primary:hover { background: #8c2339; }
dialog.kreator-modal .kreator-btn.kreator-btn-danger { background: #734332; border-color: #734332; color: #f9f9f9; }
dialog.kreator-modal .kreator-btn.kreator-btn-danger:hover { background: #5f3728; }
.kreator-modal :focus-visible, .kreator-toast:focus-visible { outline: 2px solid #741b30; outline-offset: 2px; }

@media print { .kreator-toasts, dialog.kreator-modal { display: none !important; } }

dialog.kreator-modal .kreator-modal-input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 8px 10px; border: 1px solid rgba(59, 44, 38, .35); border-radius: 8px; background: #fbf6f3; color: #3b2c26; font: 16px/1.4 'Alegreya', Georgia, serif; }
dialog.kreator-modal .kreator-modal-input:focus { outline: 2px solid #741b30; outline-offset: 1px; }

dialog.kreator-modal .kreator-choice-list { display: grid; gap: 6px; margin: 0 0 16px; }
/* Trzy kolumny potrzebują szerszego okna, bo nazwy umiejętności (np. Coordination) nie mieszczą się w wąskim polu; na telefonie są dwie */
dialog.kreator-modal:has(.kreator-choice-list--cols-3) { width: min(520px, calc(100vw - 32px)); }
dialog.kreator-modal .kreator-choice-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { dialog.kreator-modal .kreator-choice-list--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
dialog.kreator-modal .kreator-choice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(59, 44, 38, .3); border-radius: 8px; background: #fbf6f3; color: #3b2c26; cursor: pointer; }
dialog.kreator-modal .kreator-choice span { min-width: 0; overflow-wrap: anywhere; }
dialog.kreator-modal .kreator-choice:has(input:checked) { border-color: #741b30; box-shadow: inset 0 0 0 1px #741b30; }
dialog.kreator-modal .kreator-choice.is-off { opacity: .45; cursor: default; }
dialog.kreator-modal .kreator-choice input { accent-color: #741b30; margin: 0; }
dialog.kreator-modal .kreator-btn:disabled { opacity: .45; cursor: default; }