/* public/assets/css/ui-feedback.css */
:root{
  --ui-bg: rgba(6, 7, 14, .62);
  --ui-card: #121327;
  --ui-line: rgba(255,255,255,.10);
  --ui-ink: #f5f7ff;
  --ui-muted: rgba(245,247,255,.72);
  --ui-brand: #5a2a6d;   /* roxo */
  --ui-accent: #d3121b;  /* vermelho CTA */
  --ui-radius: 18px;
  --ui-shadow: 0 24px 80px rgba(0,0,0,.55);
}

/* ==== MODAL ==== */
.ui-modal-backdrop{
  position: fixed;
  inset: 0;
  background: var(--ui-bg);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.ui-modal-backdrop.is-open{ display:flex; }

.ui-modal{
  width: min(520px, 100%);
  background: linear-gradient(180deg, rgba(90,42,109,.28), rgba(18,19,39,.98));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  transform: translateY(10px);
  opacity: .0;
  transition: transform .18s ease, opacity .18s ease;
}

.ui-modal-backdrop.is-open .ui-modal{
  transform: translateY(0);
  opacity: 1;
}

.ui-modal-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ui-badge{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(211,18,27,.14);
  border: 1px solid rgba(211,18,27,.28);
}

.ui-modal-title{
  margin:0;
  color: var(--ui-ink);
  font: 800 16px/1.2 system-ui, -apple-system, Segoe UI, Inter, Arial;
}

.ui-modal-body{
  padding: 12px 16px 16px 16px;
  color: var(--ui-muted);
  font: 500 14px/1.5 system-ui, -apple-system, Segoe UI, Inter, Arial;
}

.ui-modal-actions{
  display:flex;
  gap:10px;
  padding: 0 16px 16px 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ui-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ui-ink);
  border-radius: 14px;
  padding: 10px 14px;
  font: 800 13px/1 system-ui, -apple-system, Segoe UI, Inter, Arial;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}

.ui-btn:hover{ filter: brightness(1.08); }
.ui-btn:active{ transform: translateY(1px); }

.ui-btn.primary{
  border-color: rgba(211,18,27,.35);
  background: linear-gradient(180deg, rgba(211,18,27,.92), rgba(154,8,18,.92));
}

.ui-btn.secondary{
  border-color: rgba(90,42,109,.40);
  background: linear-gradient(180deg, rgba(90,42,109,.80), rgba(60,25,75,.80));
}

/* ==== TOAST ==== */
.ui-toasts{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  z-index: 9999;
}

.ui-toast{
  width: min(360px, calc(100vw - 32px));
  background: rgba(18,19,39,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  padding: 12px 12px;
  color: var(--ui-ink);
  display:flex;
  gap: 10px;
  align-items: flex-start;
  transform: translateY(8px);
  opacity: 0;
  animation: uiToastIn .18s ease forwards;
}

.ui-toast small{
  display:block;
  color: var(--ui-muted);
  font-weight: 600;
  margin-top: 2px;
}

.ui-dot{
  width: 10px; height: 10px; border-radius: 999px;
  margin-top: 4px;
  background: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(211,18,27,.12);
}

.ui-toast.success .ui-dot{
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

@keyframes uiToastIn{
  to{ transform: translateY(0); opacity: 1; }
}