/* ==================================================================
   Modal / caixa de diálogo — componente compartilhado (site, painel e instalador)
   Design "folha de vidro": vidro fosco no fundo, painel com filete de luz,
   ícone em tile, botões com profundidade e folha deslizante no celular.
   As cores vêm das variáveis --ui-* definidas por cada tema (claro, escuro, neon, Aurora, Ouro Real).
   ================================================================== */

html.modal-is-open { overflow: hidden; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--ui-accent, #F2B84B) 10%, transparent), transparent 70%),
    var(--ui-overlay, rgba(12, 10, 22, .62));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  opacity: 0;
  transition: opacity .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-backdrop.is-open { opacity: 1; }
.modal-backdrop.is-closing { opacity: 0; }

.modal {
  --modal-accent: var(--ui-accent, #F2B84B);
  --modal-accent-soft: var(--ui-accent-soft, rgba(242, 184, 75, .16));
  --modal-pad: 24px;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 880px);
  background: var(--ui-surface-raised, var(--ui-surface, #1E1B2E));
  color: var(--ui-text, #EDEBF5);
  border: 1px solid var(--ui-border-strong, rgba(255, 255, 255, .12));
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent),
    var(--ui-shadow-lg, 0 30px 80px -20px rgba(0, 0, 0, .55));
  font-family: var(--ui-font, inherit);
  transform: translateY(18px) scale(.965);
  opacity: .4;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1.1), opacity .2s ease;
  outline: none;
  overflow: hidden;
}
/* filete de luz no topo, na cor da variante */
.modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--modal-accent), transparent);
  opacity: .85;
  pointer-events: none;
}
.modal-backdrop.is-open .modal { transform: none; opacity: 1; }
.modal-backdrop.is-closing .modal { transform: translateY(10px) scale(.975); opacity: 0; }

.modal--sm { max-width: 440px; }
.modal--md { max-width: 580px; }
.modal--lg { max-width: 780px; }
.modal--xl { max-width: 1080px; }

.modal--danger  { --modal-accent: var(--ui-danger, #E5484D);  --modal-accent-soft: var(--ui-danger-soft, rgba(229, 72, 77, .14)); }
.modal--warning { --modal-accent: var(--ui-warning, #D9822B); --modal-accent-soft: var(--ui-warning-soft, rgba(217, 130, 43, .14)); }
.modal--success { --modal-accent: var(--ui-success, #2E9E6A); --modal-accent-soft: var(--ui-success-soft, rgba(46, 158, 106, .14)); }
.modal--info    { --modal-accent: var(--ui-info, #3E7BFA);    --modal-accent-soft: var(--ui-info-soft, rgba(62, 123, 250, .14)); }

.modal-handle { display: none; }

.modal-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--modal-pad) var(--modal-pad) 4px;
  flex: none;
}
.modal-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--modal-accent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--modal-accent) 22%, transparent), color-mix(in srgb, var(--modal-accent) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--modal-accent) 28%, transparent);
}
.modal-icon .modal-svg { width: 22px; height: 22px; }
.modal-titles { flex: 1; min-width: 0; padding-top: 2px; }
.modal-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ui-text, #EDEBF5);
  text-wrap: balance;
}
.modal-subtitle {
  margin: 3px 0 0;
  font-size: .875rem;
  color: var(--ui-muted, #A29FB5);
}
.modal-close {
  flex: none;
  width: 36px;
  height: 36px;
  margin: -2px -6px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted, #A29FB5);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.modal-close:hover { background: var(--ui-hover, rgba(255, 255, 255, .07)); color: var(--ui-text, #EDEBF5); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 2px solid var(--ui-focus, var(--modal-accent)); outline-offset: 1px; }
.modal-close .modal-svg { width: 18px; height: 18px; }

.modal-body {
  padding: 12px var(--modal-pad) var(--modal-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}
/* Sem rodapé: o corpo fecha o painel */
.modal-header + .modal-body { padding-left: calc(var(--modal-pad) + 60px); }
.modal--md .modal-header + .modal-body,
.modal--lg .modal-header + .modal-body,
.modal--xl .modal-header + .modal-body,
.modal--theme .modal-header + .modal-body { padding-left: var(--modal-pad); }
.modal-header:not(:has(.modal-icon)) + .modal-body { padding-left: var(--modal-pad); }

.modal-message { color: var(--ui-text-soft, #C9C6D9); font-size: .95rem; line-height: 1.65; }
.modal-message p { margin: 0 0 .65em; }
.modal-message p:last-child { margin-bottom: 0; }
.modal-message code {
  font-size: .85em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--ui-hover, rgba(255, 255, 255, .07));
}
.modal-message strong { color: var(--ui-text, #EDEBF5); }

.modal-details {
  margin: 14px 0 0;
  padding: 12px 14px 12px 32px;
  border-radius: 14px;
  background: var(--ui-subtle, rgba(255, 255, 255, .04));
  border: 1px solid var(--ui-border, rgba(255, 255, 255, .08));
  color: var(--ui-text-soft, #C9C6D9);
  font-size: .875rem;
}
.modal-details li + li { margin-top: 4px; }

.modal-content { margin-top: 4px; }

.modal-fields { display: grid; gap: 16px; margin-top: 16px; }
.modal-field { display: grid; gap: 7px; }
.modal-field--check { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.modal-field--check .modal-hint,
.modal-field--check .modal-field-error { grid-column: 2; }
.modal-label { font-size: .8125rem; font-weight: 600; color: var(--ui-text, #EDEBF5); letter-spacing: .01em; }
.modal-required { color: var(--ui-danger, #E5484D); }
.modal-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid var(--ui-input-border, var(--ui-border-strong, rgba(255, 255, 255, .15)));
  background: var(--ui-input-bg, rgba(255, 255, 255, .04));
  color: var(--ui-text, #EDEBF5);
  font: inherit;
  font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea.modal-input { min-height: 96px; resize: vertical; line-height: 1.5; }
.modal-input::placeholder { color: var(--ui-muted, #A29FB5); opacity: .8; }
.modal-input:hover:not(:focus) { border-color: var(--ui-muted, #A29FB5); }
.modal-input:focus {
  outline: none;
  border-color: var(--modal-accent);
  box-shadow: 0 0 0 4px var(--modal-accent-soft);
}
.modal-input[aria-invalid="true"] { border-color: var(--ui-danger, #E5484D); box-shadow: 0 0 0 4px var(--ui-danger-soft, rgba(229, 72, 77, .14)); }
.modal-input.is-valid { border-color: var(--ui-success, #2E9E6A); }
.modal-check { width: 18px; height: 18px; accent-color: var(--modal-accent); }
.modal-hint { margin: 0; font-size: .8125rem; color: var(--ui-muted, #A29FB5); }
.modal-field-error { margin: 0; font-size: .8125rem; color: var(--ui-danger, #E5484D); font-weight: 600; }

.modal-require {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: var(--ui-danger-soft, rgba(229, 72, 77, .1));
  border: 1px dashed color-mix(in srgb, var(--ui-danger, #E5484D) 45%, transparent);
  display: grid;
  gap: 8px;
}
.modal-require-word {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--ui-hover, rgba(255, 255, 255, .07));
  letter-spacing: 0;
}

.modal-error {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--ui-danger-soft, rgba(229, 72, 77, .12));
  border: 1px solid color-mix(in srgb, var(--ui-danger, #E5484D) 35%, transparent);
  color: var(--ui-danger, #E5484D);
  font-size: .875rem;
  font-weight: 600;
}

.modal-footer {
  flex: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px var(--modal-pad);
  border-top: 1px solid var(--ui-border, rgba(255, 255, 255, .08));
  background: color-mix(in srgb, var(--ui-subtle, rgba(255, 255, 255, .04)) 70%, transparent);
}
.modal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: inherit;
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.modal-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.modal-btn:focus-visible { outline: 2px solid var(--ui-focus, var(--modal-accent)); outline-offset: 2px; }
.modal-btn:disabled { opacity: .5; cursor: not-allowed; }

.modal-btn--ghost { background: transparent; color: var(--ui-text-soft, #C9C6D9); }
.modal-btn--secondary {
  background: var(--ui-subtle, rgba(255, 255, 255, .06));
  color: var(--ui-text, #EDEBF5);
  border-color: var(--ui-border-strong, rgba(255, 255, 255, .14));
}
.modal-btn--ghost:hover:not(:disabled), .modal-btn--secondary:hover:not(:disabled) { background: var(--ui-hover, rgba(255, 255, 255, .09)); color: var(--ui-text, #EDEBF5); }

.modal-btn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent-hover, #F5C66A) 92%, #fff), var(--ui-accent, #F2B84B));
  color: var(--ui-accent-contrast, #1A1405);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 1px 2px rgba(0, 0, 0, .15),
    0 10px 22px -12px color-mix(in srgb, var(--ui-accent, #F2B84B) 75%, transparent);
}
.modal-btn--primary:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.modal-btn--danger {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-danger, #E5484D) 88%, #fff), var(--ui-danger, #E5484D));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 22px -12px color-mix(in srgb, var(--ui-danger, #E5484D) 80%, transparent);
}
.modal-btn--danger:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.modal-btn--warning {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-warning, #D9822B) 88%, #fff), var(--ui-warning, #D9822B));
  color: #1b1103;
}
.modal-btn--warning:hover:not(:disabled) { filter: brightness(1.06); }

.modal-btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: modal-spin .7s linear infinite;
}
.modal-btn.is-loading .modal-btn-spinner { display: inline-block; }
.modal.is-loading { pointer-events: none; }
.modal.is-loading .modal-footer { opacity: .85; }
@keyframes modal-spin { to { transform: rotate(360deg); } }

/* Celular: folha que sobe da parte de baixo, com alça para arrastar */
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal,
  .modal--sm, .modal--md, .modal--lg, .modal--xl {
    --modal-pad: 20px;
    max-width: none;
    margin: 0;
    border-radius: 26px 26px 0 0;
    border-bottom: 0;
    transform: translateY(100%);
    opacity: 1;
    max-height: 92dvh;
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .34s cubic-bezier(.2, .9, .25, 1);
  }
  .modal-backdrop.is-open .modal { transform: none; }
  .modal-backdrop.is-closing .modal { transform: translateY(100%); opacity: 1; }
  .modal-handle {
    display: block;
    flex: none;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    margin: 10px auto 0;
    background: var(--ui-border-strong, rgba(255, 255, 255, .22));
  }
  .modal::before { top: 0; }
  .modal-header { padding: 12px var(--modal-pad) 0; }
  .modal-body, .modal-header + .modal-body { padding: 12px var(--modal-pad) 18px; }
  .modal-footer {
    padding: 12px var(--modal-pad) 16px;
    flex-direction: column-reverse;
    background: transparent;
  }
  .modal-btn { width: 100%; min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { transition: none !important; }
  .modal-btn-spinner { animation-duration: 1.6s; }
  .modal-close:hover { transform: none; }
}

/* ==================================================================
   DS 4 "Sala escura": a janela é uma superfície sólida que flutua sobre a sala escurecida.
   Sem vidro, sem filete de luz e sem halo de cor; cantos de 16px; botões no formato do sistema.
   ================================================================== */
.modal-backdrop {
  background: var(--ui-overlay, rgba(12, 10, 8, .66));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity .16s ease;
}
.modal {
  border-radius: 16px;
  box-shadow: var(--ui-shadow-lg, 0 28px 70px -24px rgba(0, 0, 0, .6));
  transform: translateY(8px);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), opacity .16s ease;
}
.modal::before { display: none; }
.modal-header h2, .modal-title { font-family: var(--font-display, inherit); font-weight: var(--display-weight, 750); letter-spacing: var(--display-track, 0); }
.modal-icon { border-radius: 10px; box-shadow: none; background: var(--modal-accent-soft); }
.modal-close { border-radius: 8px; }
.modal-close:hover { transform: none; }
.modal-btn { border-radius: 8px; box-shadow: none; font-weight: 600; }
.modal-btn:active:not(:disabled) { transform: none; }
.modal-btn--primary { box-shadow: none; background: var(--ui-accent); color: var(--ui-accent-contrast); }
.modal-btn--primary:hover:not(:disabled) { box-shadow: none; transform: none; filter: none; background: var(--ui-accent-hover, var(--ui-accent)); }
.modal-input { border-radius: 8px; }
.modal-input:focus { box-shadow: 0 0 0 1px var(--ui-text, currentColor); border-color: var(--ui-text, currentColor); }
@media (max-width: 640px) {
  .modal { border-radius: 16px 16px 0 0; }
}