/* =====================================================================
   Zenus Performance — Design System
   Tema escuro premium: glassmorphism ligeiro, gradientes discretos,
   microinterações e skeletons. Complementa o Tailwind (CDN).
   ===================================================================== */

:root {
  --z-bg: #07090f;
  --z-surface: rgba(255, 255, 255, 0.03);
  --z-surface-2: rgba(255, 255, 255, 0.055);
  --z-border: rgba(255, 255, 255, 0.07);
  --z-primary: #7c6cff;
  --z-primary-2: #4f8cff;
  --z-green: #10b981;
  --z-red: #f6465d;
  --z-yellow: #f0b90b;
  --z-text: #e7e9ee;
  --z-muted: #8b93a7;
}

html.light {
  --z-bg: #f4f6fb;
  --z-surface: #ffffff;
  --z-surface-2: #f1f3f9;
  --z-border: rgba(15, 23, 42, 0.08);
  --z-text: #0f172a;
  --z-muted: #5b6478;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--z-bg);
  color: var(--z-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv11';
  overflow-x: hidden;
}

/* Fundo com brilhos radiais discretos (estilo Stripe) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124, 108, 255, 0.13), transparent 60%),
    radial-gradient(700px 400px at -10% 30%, rgba(79, 140, 255, 0.09), transparent 60%),
    radial-gradient(600px 500px at 50% 110%, rgba(16, 185, 129, 0.06), transparent 60%);
  pointer-events: none;
}
html.light body::before { opacity: .5; }

::selection { background: rgba(124, 108, 255, 0.35); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139, 147, 167, 0.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 147, 167, 0.45); }

/* =====================================================================
   Componentes
   ===================================================================== */

/* Cartão glass */
.z-card {
  background: var(--z-surface);
  border: 1px solid var(--z-border);
  border-radius: 1.25rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .25s cubic-bezier(.22,.68,0,1.1), border-color .25s, box-shadow .25s;
}
html.light .z-card { box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04); }

.z-card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 108, 255, 0.35);
  box-shadow: 0 12px 40px -12px rgba(124, 108, 255, 0.25);
}

/* Botão primário com gradiente */
.z-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .875rem;
  padding: .625rem 1.25rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--z-primary), var(--z-primary-2));
  color: #fff;
  transition: transform .15s, box-shadow .2s, filter .2s;
  box-shadow: 0 4px 18px -4px rgba(124, 108, 255, 0.5);
}
.z-btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 8px 26px -6px rgba(124, 108, 255, 0.6); }
.z-btn:active { transform: translateY(0) scale(.98); }
.z-btn:disabled { opacity: .5; pointer-events: none; }

.z-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .875rem;
  padding: .625rem 1.25rem; border-radius: .75rem;
  background: var(--z-surface-2);
  border: 1px solid var(--z-border);
  color: var(--z-text);
  transition: background .2s, transform .15s, border-color .2s;
}
.z-btn-ghost:hover { background: rgba(124, 108, 255, 0.12); border-color: rgba(124,108,255,.3); transform: translateY(-1px); }

.z-btn-danger {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .875rem;
  padding: .625rem 1.25rem; border-radius: .75rem;
  background: rgba(246, 70, 93, 0.12);
  border: 1px solid rgba(246, 70, 93, 0.3);
  color: var(--z-red);
  transition: background .2s;
}
.z-btn-danger:hover { background: rgba(246, 70, 93, 0.22); }

/* Inputs */
.z-input, .z-select, .z-textarea {
  width: 100%;
  background: var(--z-surface-2);
  border: 1px solid var(--z-border);
  border-radius: .75rem;
  padding: .625rem .875rem;
  font-size: .875rem;
  color: var(--z-text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.z-input:focus, .z-select:focus, .z-textarea:focus {
  border-color: var(--z-primary);
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.18);
}
.z-input::placeholder, .z-textarea::placeholder { color: var(--z-muted); opacity: .7; }
.z-select option { background: #12151f; color: #e7e9ee; }
html.light .z-select option { background: #fff; color: #0f172a; }

.z-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--z-muted);
  margin-bottom: .375rem;
}

/* Badges */
.z-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600;
  padding: .25rem .625rem; border-radius: 99px;
  border: 1px solid transparent;
}
.z-badge-green  { background: rgba(16,185,129,.12);  color: #34d399; border-color: rgba(16,185,129,.25); }
.z-badge-red    { background: rgba(246,70,93,.12);   color: #f87184; border-color: rgba(246,70,93,.25); }
.z-badge-yellow { background: rgba(240,185,11,.12);  color: #f0b90b; border-color: rgba(240,185,11,.25); }
.z-badge-primary{ background: rgba(124,108,255,.12); color: #a89cff; border-color: rgba(124,108,255,.3); }
.z-badge-muted  { background: var(--z-surface-2);    color: var(--z-muted); border-color: var(--z-border); }

/* Sidebar */
.z-sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem;
  border-radius: .75rem;
  font-size: .875rem; font-weight: 500;
  color: var(--z-muted);
  transition: color .2s, background .2s, transform .15s;
  position: relative;
}
.z-sidebar-link i { width: 1.25rem; text-align: center; font-size: 1rem; transition: transform .2s; }
.z-sidebar-link:hover { color: var(--z-text); background: var(--z-surface-2); }
.z-sidebar-link:hover i { transform: scale(1.15); }
.z-sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(124,108,255,.22), rgba(79,140,255,.14));
  border: 1px solid rgba(124,108,255,.3);
}
html.light .z-sidebar-link.active { color: var(--z-primary); }
.z-sidebar-link.active::before {
  content: '';
  position: absolute; left: -1rem; top: 20%; bottom: 20%;
  width: 3px; border-radius: 99px;
  background: linear-gradient(180deg, var(--z-primary), var(--z-primary-2));
}

/* Tabela premium */
.z-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.z-table thead th {
  text-align: left;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--z-muted);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--z-border);
  white-space: nowrap;
}
.z-table tbody td { padding: .875rem 1rem; border-bottom: 1px solid var(--z-border); white-space: nowrap; }
.z-table tbody tr { transition: background .15s; }
.z-table tbody tr:hover { background: var(--z-surface-2); }
.z-table tbody tr:last-child td { border-bottom: none; }

/* =====================================================================
   Animações e microinterações
   ===================================================================== */

@keyframes z-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes z-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes z-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes z-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes z-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,108,255,.4); }
  50% { box-shadow: 0 0 0 8px rgba(124,108,255,0); }
}
@keyframes z-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-fade-up { animation: z-fade-up .5s cubic-bezier(.22,.68,0,1) both; }
.animate-fade-in { animation: z-fade-in .4s ease both; }
.animate-pop     { animation: z-pop .45s cubic-bezier(.22,.68,0,1.2) both; }

/* Entrada em cascata dos cartões */
.stagger > * { animation: z-fade-up .5s cubic-bezier(.22,.68,0,1) both; }
.stagger > *:nth-child(1) { animation-delay: .03s; }
.stagger > *:nth-child(2) { animation-delay: .08s; }
.stagger > *:nth-child(3) { animation-delay: .13s; }
.stagger > *:nth-child(4) { animation-delay: .18s; }
.stagger > *:nth-child(5) { animation-delay: .23s; }
.stagger > *:nth-child(6) { animation-delay: .28s; }
.stagger > *:nth-child(7) { animation-delay: .33s; }
.stagger > *:nth-child(8) { animation-delay: .38s; }

/* Skeleton loading */
.z-skeleton {
  border-radius: .75rem;
  background: linear-gradient(90deg, var(--z-surface-2) 25%, rgba(255,255,255,.09) 50%, var(--z-surface-2) 75%);
  background-size: 800px 100%;
  animation: z-shimmer 1.4s infinite linear;
}

/* Barra de progresso / XP */
.z-progress {
  height: .5rem; border-radius: 99px;
  background: var(--z-surface-2);
  overflow: hidden;
}
.z-progress > div {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--z-primary), var(--z-primary-2));
  transition: width 1s cubic-bezier(.22,.68,0,1);
  position: relative;
}
.z-progress > div::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  background-size: 200px 100%;
  animation: z-shimmer 2s infinite linear;
}
.z-progress-green > div { background: linear-gradient(90deg, #10b981, #34d399); }

/* Score ring (anel do Score Zenus) */
.z-ring { position: relative; }
.z-ring svg { transform: rotate(-90deg); }
.z-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.z-ring .ring-bg { stroke: var(--z-surface-2); }
.z-ring .ring-val { transition: stroke-dashoffset 1.2s cubic-bezier(.22,.68,0,1), stroke .5s; }

/* Heatmap do calendário */
.z-heat-cell {
  aspect-ratio: 1;
  border-radius: .6rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: .72rem;
  border: 1px solid var(--z-border);
  background: var(--z-surface);
  transition: transform .15s, box-shadow .2s;
  cursor: default;
  min-height: 3rem;
}
.z-heat-cell:hover { transform: scale(1.06); z-index: 2; box-shadow: 0 6px 20px -6px rgba(0,0,0,.5); }

/* Checkbox premium */
.z-check {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1rem;
  border-radius: .875rem;
  border: 1px solid var(--z-border);
  background: var(--z-surface);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .1s;
  user-select: none;
}
.z-check:hover { border-color: rgba(124,108,255,.35); }
.z-check:active { transform: scale(.99); }
.z-check input { display: none; }
.z-check .box {
  width: 1.375rem; height: 1.375rem; flex-shrink: 0;
  border-radius: .45rem;
  border: 2px solid var(--z-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s cubic-bezier(.22,.68,0,1.4);
  font-size: .7rem; color: #fff;
}
.z-check .box i { opacity: 0; transform: scale(0); transition: all .2s cubic-bezier(.22,.68,0,1.6); }
.z-check input:checked + .box {
  background: linear-gradient(135deg, var(--z-green), #34d399);
  border-color: transparent;
}
.z-check input:checked + .box i { opacity: 1; transform: scale(1); }
.z-check input:checked ~ .txt { color: var(--z-text); }

/* Toast de conquista */
.z-achievement-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(240,185,11,.16), rgba(124,108,255,.16)), #12151f;
  border: 1px solid rgba(240,185,11,.4);
  box-shadow: 0 20px 60px -10px rgba(240,185,11,.3);
  animation: z-pop .5s cubic-bezier(.22,.68,0,1.3) both;
}
.z-achievement-toast .icon {
  font-size: 2rem; color: var(--z-yellow);
  animation: z-float 2s ease-in-out infinite;
}

/* Chat */
.z-bubble {
  max-width: 78%;
  padding: .75rem 1rem;
  border-radius: 1.1rem;
  font-size: .875rem;
  line-height: 1.5;
  animation: z-fade-up .3s ease both;
  word-break: break-word;
}
.z-bubble-me {
  margin-left: auto;
  background: linear-gradient(135deg, var(--z-primary), var(--z-primary-2));
  color: #fff;
  border-bottom-right-radius: .3rem;
}
.z-bubble-them {
  background: var(--z-surface-2);
  border: 1px solid var(--z-border);
  border-bottom-left-radius: .3rem;
}

/* Typing indicator da IA */
.z-typing span {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--z-muted);
  margin-right: 3px;
  animation: z-typing 1.2s infinite;
}
.z-typing span:nth-child(2) { animation-delay: .15s; }
.z-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes z-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Números grandes dos KPI */
.z-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1280px) { .z-kpi-value { font-size: 1.85rem; } }

/* Modal (SweetAlert2 override para o tema) */
.swal2-popup {
  background: #12151f !important;
  color: var(--z-text) !important;
  border: 1px solid var(--z-border) !important;
  border-radius: 1.25rem !important;
}
html.light .swal2-popup { background: #fff !important; }
.swal2-title { color: var(--z-text) !important; font-size: 1.25rem !important; }
.swal2-html-container { color: var(--z-muted) !important; }

/* Level chip */
.z-level-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 99px;
  font-size: .75rem; font-weight: 700;
  background: linear-gradient(135deg, rgba(124,108,255,.2), rgba(79,140,255,.14));
  border: 1px solid rgba(124,108,255,.4);
  color: #a89cff;
}

/* Streak flame */
.z-streak { color: #ff9f43; }
.z-streak i { animation: z-float 1.6s ease-in-out infinite; }

/* Responsivo: sidebar mobile */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed; inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-105%);
    transition: transform .3s cubic-bezier(.22,.68,0,1);
  }
  #sidebar.open { transform: translateX(0); }
}

/* Reduz animações para quem prefere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}