/* Custom Modal — eigenständiges CSS für V2-Refresh-Layouts.
   Vorher lebten diese Regeln nur in style.css; das Refresh-Layout lädt aber
   nur v2-refresh-tokens.css + v2-refresh.css → Modal war stylesless.
   2026-05-07 separates File. */

.custom-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  opacity: 0; transition: opacity 0.2s ease;
  padding: 1rem;
}
.custom-modal-overlay.modal-visible { opacity: 1; }
.custom-modal-overlay.modal-closing  { opacity: 0; }

.custom-modal {
  background: var(--surface, #fff);
  color: var(--ink, #1a1a1a);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 560px; width: 100%;
  padding: 1.5rem; position: relative;
  transform: scale(0.9) translateY(-20px);
  transition: transform 0.2s ease;
  max-height: 90vh; overflow-y: auto;
}
.modal-visible .custom-modal { transform: scale(1) translateY(0); }
.modal-closing .custom-modal  { transform: scale(0.9) translateY(-20px); }

.modal-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: none; border: none;
  font-size: 1.5rem; color: var(--mute, #6b7280);
  cursor: pointer; padding: 0.25rem 0.5rem;
  line-height: 1; border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: var(--surface-2, #f3f4f6); color: var(--ink, #1a1a1a); }

.modal-icon { display: flex; justify-content: center; margin-bottom: 1rem; }
/* !important nötig: globaler `body.v2-refresh svg`-Reset (v2-refresh.css)
   hat höhere Specificity und ließe das Icon sonst auf Container-Breite
   wachsen → riesiger schwarzer Halbmond. */
.modal-icon svg { width: 48px !important; height: 48px !important; }
.modal-icon-warning { color: var(--amber, #d97706); }
.modal-icon-error   { color: var(--danger, #dc2626); }
.modal-icon-success { color: var(--success, #059669); }
.modal-icon-info    { color: var(--purple, #7c3aed); }

.modal-title {
  text-align: center; font-size: 1.125rem; font-weight: 600;
  margin: 0 0 0.75rem; color: var(--ink, #1a1a1a);
}
.modal-message {
  font-size: 0.9375rem; color: var(--ink-2, #374151);
  line-height: 1.5; margin-bottom: 1.25rem;
}
.modal-message code {
  background: var(--surface-2, #f3f4f6);
  padding: 1px 6px; border-radius: 3px; font-size: 0.85em;
}

.modal-input {
  width: 100%; padding: 0.5rem 0.75rem;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; font-size: 14px; font-family: inherit;
  margin-bottom: 1rem;
}
.modal-input:focus {
  outline: none; border-color: var(--amber, #d97706);
  box-shadow: 0 0 0 2px rgba(217,119,6,0.18);
}

.modal-buttons {
  display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap;
}
.modal-buttons .btn { min-height: 36px; }