:root {
  --bg: #0f172a;
  --card: #1e293b;
  --card-border: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;
  --input-bg: #0f172a;
  --heat-0: #4d5590;
  --heat-1: #6366f1;
  --heat-2: #7b7ef2;
  --heat-3: #9396f4;
  --heat-4: #b3b5f8;
}

html[data-theme="light"] {
  --bg: #f8fafc;
  --card: #ffffff;
  --card-border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #ca8a04;
  --input-bg: #f1f5f9;
  --heat-0: #a5a8f6;
  --heat-1: #8184f3;
  --heat-2: #6366f1;
  --heat-3: #4f46e5;
  --heat-4: #342fa8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
  overflow-wrap: break-word;
}

.preview-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: rgba(99,102,241,0.15);
  border-bottom: 1px solid var(--primary);
  font-size: 0.85rem;
  text-align: center;
}
.preview-banner .btn-secondary { padding: 4px 12px; font-size: 0.8rem; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
  gap: 10px;
}
.brand { color: var(--text); font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.brand-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nav-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: rgba(99,102,241,0.1);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.nav-wallet:hover { border-color: var(--primary); }
.nav-wallet-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--text); }

.nav-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  color: var(--muted);
  background: none;
  border: none;
  cursor: var(--hover-cursor, pointer);
  padding: 0;
}
.nav-icon-link:hover { color: var(--text); }
.nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.daily-goal-bar {
  padding: 8px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
}
.daily-goal-bar-label { font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.daily-goal-bar-label strong { color: var(--text); }
#daily-goal-done { color: var(--green); font-weight: 700; }
.daily-goal-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.daily-goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.daily-goal-bar.daily-goal-reached .daily-goal-bar-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.daily-goal-bar-pulse { animation: box-winner-pulse 0.6s ease; }

/* ---- taskbar hero: guerreiro derrota um "boss" (o cliente) a cada
   atendimento aprovado, ao vivo via WebSocket. Sprites (CC0) de Segel2D —
   github/opengameart "Adventurer and Slime game Sprites". Animação por troca
   de quadro (background-position), igual o oneko.js já faz com o gato. ---- */
.boss-battle-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
}
.boss-battle-bar[hidden] { display: none; }
.boss-battle-arena {
  position: relative;
  width: 220px;
  height: 44px;
  flex-shrink: 0;
}
.boss-battle-hero, .boss-battle-boss {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
}
.boss-battle-hero { left: 0; transition: left 0.9s linear; }
.boss-battle-hero.boss-battle-flip { transform: scaleX(-1); }
.boss-battle-boss { right: 0; }
.boss-battle-status {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-icon-link.logout-btn:hover { color: var(--red); }
.nav-icon { display: block; }

.theme-switcher { position: relative; }
.theme-toggle-btn {
  background: none; border: none; color: var(--muted);
  font-size: 1.15rem; cursor: var(--hover-cursor, pointer); padding: 0; line-height: 1;
}
.theme-toggle-btn:hover { color: var(--text); }
.theme-menu {
  position: absolute;
  top: 130%;
  right: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px;
  min-width: 150px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 20;
}
.theme-menu-title {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 4px 8px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 8px;
  border-radius: 6px;
  cursor: var(--hover-cursor, pointer);
  font-size: 0.9rem;
  font-family: inherit;
}
.theme-option:hover { background: rgba(148, 163, 184, 0.15); }
.theme-option.active { background: var(--primary); color: white; }

.presence-wrap { position: relative; }
.presence-pill {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: var(--hover-cursor, pointer);
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.presence-pill:hover { color: var(--text); }
.presence-dropdown {
  position: absolute;
  top: 130%;
  right: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px;
  min-width: 160px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 20;
}
.presence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 0.85rem;
  color: var(--text);
  border-radius: 6px;
  white-space: nowrap;
}
.presence-item.presence-empty { color: var(--muted); }
.presence-avatar { flex-shrink: 0; }

.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  max-width: 320px;
}
.toast {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast-visible { opacity: 1; transform: translateX(0); }

.who-link { display: flex; align-items: center; text-decoration: none; }
.who-link:hover .avatar { outline: 2px solid var(--primary); }
.link-btn { background: none; border: none; color: var(--muted); cursor: var(--hover-cursor, pointer); font-size: 0.95rem; padding: 0; }
.link-btn:hover { color: var(--red); }
.inline { display: inline; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card-border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xxs { width: 16px; height: 16px; }
.avatar-frame-wrap-xxs .avatar-frame-ring {
  inset: -2px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 88px; height: 88px; }

.avatar-frame-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-frame-wrap .avatar { position: relative; z-index: 1; }
.avatar-frame-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  pointer-events: none;
}
.avatar-frame-wrap-sm .avatar-frame-ring {
  inset: -3px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.avatar-frame-wrap-lg .avatar-frame-ring {
  inset: -7px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.avatar-frame-charm {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.85rem;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.7));
  z-index: 2;
}
.avatar-frame-charm-sm { font-size: 0.65rem; top: -3px; right: -3px; }
.avatar-frame-charm-lg { font-size: 1.7rem; top: -8px; right: -8px; }

.avatar-xl { width: 120px; height: 120px; }
.avatar-frame-wrap-xl .avatar-frame-ring {
  inset: -9px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
}
.avatar-frame-charm-xl { font-size: 2.2rem; top: -10px; right: -10px; }

.avatar-frame-img {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* comum */
.avatar-frame-bronze {
  background: conic-gradient(from 0deg, #78350f, #b45309, #92400e, #b45309, #78350f);
  box-shadow: 0 0 8px rgba(180,83,9,0.5);
}
/* raro */
.avatar-frame-prata {
  background: conic-gradient(from 0deg, #94a3b8, #f8fafc, #cbd5e1, #f8fafc, #94a3b8);
  box-shadow: 0 0 10px rgba(203,213,225,0.55);
}
/* epico */
.avatar-frame-ouro {
  background: conic-gradient(from 0deg, #a16207, #fde047, #eab308, #fde047, #a16207);
  box-shadow: 0 0 12px rgba(234,179,8,0.6);
  animation: avatar-frame-spin 10s linear infinite;
}
.avatar-frame-gelo {
  background: conic-gradient(from 0deg, #0e7490, #ecfeff, #67e8f9, #cffafe, #0e7490);
  box-shadow: 0 0 12px rgba(103,232,249,0.6);
  animation: avatar-frame-spin 9s linear infinite reverse;
}
/* lendario */
.avatar-frame-diamante {
  background: conic-gradient(from 0deg, #0369a1, #ffffff, #38bdf8, #e0f2fe, #0369a1);
  box-shadow: 0 0 16px rgba(56,189,248,0.75);
  animation: avatar-frame-spin 5s linear infinite, avatar-frame-glow-pulse 2s ease-in-out infinite;
}
.avatar-frame-fogo {
  background: conic-gradient(from 0deg, #7c2d12, #f97316, #fde047, #f97316, #7c2d12);
  box-shadow: 0 0 16px rgba(249,115,22,0.75);
  animation: avatar-frame-spin 3s linear infinite, avatar-frame-glow-pulse 1.2s ease-in-out infinite;
}
@keyframes avatar-frame-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes avatar-frame-glow-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

.rarity-badge { padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.rarity-comum { background: rgba(148,163,184,0.15); color: var(--muted); }
.rarity-raro { background: rgba(59,130,246,0.15); color: #3b82f6; }
.rarity-epico { background: rgba(168,85,247,0.15); color: #a855f7; }
.rarity-lendario { background: linear-gradient(90deg, rgba(249,115,22,0.2), rgba(234,179,8,0.2)); color: #f97316; }

.perfil-banner-zone {
  position: relative;
  margin: -20px -20px 20px -20px;
  padding: 20px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.perfil-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.perfil-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.7));
}
.perfil-banner-content { position: relative; z-index: 2; }
/* Fundo arbitrário (upload do usuário) atrás do texto — força cores claras
   fixas aqui dentro em vez de herdar --text/--muted do tema, senão o texto
   escuro do tema claro fica ilegível em cima do véu escuro. */
.perfil-banner-zone.has-banner .perfil-banner-content,
.perfil-banner-zone.has-banner .perfil-banner-content h3,
.perfil-banner-zone.has-banner .perfil-banner-content h4 {
  color: #f8fafc;
}
.perfil-banner-zone.has-banner .perfil-banner-content .muted {
  color: rgba(248,250,252,0.75);
}
.perfil-banner-zone.has-banner .perfil-banner-content .btn-secondary {
  color: #f8fafc;
  border-color: rgba(248,250,252,0.4);
  background: rgba(0,0,0,0.2);
}
.perfil-banner-zone.has-banner .perfil-banner-content .btn-secondary:hover {
  border-color: #f8fafc;
  color: #f8fafc;
}
.perfil-banner-zone.has-banner .perfil-banner-content .link-btn {
  color: rgba(248,250,252,0.75);
}
.perfil-current { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.perfil-name { font-weight: 700; font-size: 1.05rem; }
.perfil-name-form { display: flex; gap: 8px; margin-bottom: 4px; }
.perfil-name-form input {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 4px 8px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  max-width: 220px;
}
.avatar-preset-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.avatar-preset-form { margin: 0; }
.avatar-preset-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--hover-cursor, pointer);
  padding: 0;
}
.avatar-preset-btn.selected { border-color: var(--primary); }
.avatar-upload-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.avatar-upload-form input[type="file"] { color: var(--text); font-size: 0.85rem; }

.perfil-account-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.perfil-account-form input {
  padding: 8px 10px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  max-width: 220px;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-wide { max-width: 1100px; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
}
.card h3 { margin-top: 0; }

.section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.section-head h3 { margin: 0; }
.btn-secondary {
  background: none; border: 1px solid var(--card-border); color: var(--text);
  padding: 8px 14px; border-radius: 8px; font-weight: 600; cursor: var(--hover-cursor, pointer); font-size: 0.85rem;
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.period-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.period-card {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
}
.period-medal { font-size: 1.8rem; line-height: 1; }
.period-points { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }
.period-label { font-size: 0.85rem; opacity: 0.9; margin-top: 2px; }
.period-rank { font-size: 0.78rem; margin-top: 4px; opacity: 0.85; }
@media (max-width: 480px) {
  .period-cards { grid-template-columns: 1fr; }
}

.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}
.tab.active { background: var(--primary); color: white; border-color: var(--primary); }

.perfil-tabs { margin-top: 20px; }
.tab-panel[hidden] { display: none; }

.month-filter { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.month-filter-field { display: flex; align-items: center; gap: 6px; }
.month-filter label { display: inline-block; margin: 0; font-size: 0.85rem; white-space: nowrap; }
.month-filter select,
.month-filter input[type="date"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}
.month-filter .btn-secondary { margin: 0; }

.muted { color: var(--muted); }

textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.field-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
label { display: block; margin: 12px 0 6px; font-size: 0.9rem; color: var(--muted); }
.hint { font-size: 0.8rem; }

.btn-primary {
  margin-top: 16px;
  background: var(--primary);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: var(--hover-cursor, pointer);
  width: 100%;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--primary); }

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 32px; width: 100%; max-width: 380px; }
.auth-card h1 { margin: 0 0 4px; font-size: 1.3rem; }
.subtitle { color: var(--muted); margin: 0 0 10px; }
.alt-link { text-align: center; margin-top: 16px; color: var(--muted); }
.alt-link a { color: var(--primary); }
.error { color: var(--red); background: rgba(239,68,68,0.1); padding: 8px 12px; border-radius: 8px; }
.success { color: var(--green); background: rgba(34,197,94,0.1); padding: 8px 12px; border-radius: 8px; }

.submission-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.submission { position: relative; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 34px 12px 14px; }
.notification-unread { border-color: var(--primary); background: rgba(99,102,241,0.06); }
.notification-link { color: var(--text); text-decoration: none; display: block; }
.notification-link:hover { color: var(--primary); }
.cancel-x-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.cancel-x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: var(--hover-cursor, pointer);
  padding: 0;
}
.cancel-x-btn:hover { color: white; background: var(--red); }
.submission-client { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.submission-desc { margin-bottom: 6px; }
.submission-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.date { color: var(--muted); }
.badge { padding: 3px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.badge-pendente { background: rgba(234,179,8,0.15); color: var(--yellow); }
.badge-aprovado { background: rgba(34,197,94,0.15); color: var(--green); }
.badge-rejeitado { background: rgba(239,68,68,0.15); color: var(--red); }
.badge-refazer { background: rgba(249,115,22,0.15); color: #f97316; }
.badge-cancelado { background: rgba(148,163,184,0.15); color: var(--muted); }
.badge-disponivel { background: rgba(99,102,241,0.15); color: var(--primary); }
.review-note { margin-top: 6px; font-size: 0.85rem; color: var(--muted); }

.review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.review-actions form { display: flex; gap: 6px; align-items: center; }
.note-input { width: 160px; }
.points-input { width: 64px; text-align: center; }
.btn-approve, .btn-reject, .btn-rework {
  border: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; cursor: var(--hover-cursor, pointer); color: white;
}
.btn-approve { background: var(--green); }
.btn-reject { background: var(--red); }
.btn-rework { background: #f97316; }

.confetti-burst { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(var(--rot, 360deg)); opacity: 0; }
}

.rank-motivation {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(99,102,241,0.08);
  font-size: 0.9rem;
}

.avatar-online-wrap { position: relative; display: inline-flex; }
.avatar-online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--card);
}
.avatar-online-dot-xl { width: 18px; height: 18px; border-width: 3px; bottom: 2px; right: 2px; }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 8px 0 20px; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 33%; max-width: 220px; }
.podium-people { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* So no empate (2+ pessoas): abre espaco abaixo do bloco avatar+nome. As
   colunas do podio se alinham pela BASE (.podium { align-items: flex-end }),
   entao aumentar a distancia ate .podium-points empurra o bloco de
   avatar+nome pra CIMA — e e exatamente isso que da folga pro personagem
   (que fica ancorado no degrau, por baixo) nao cobrir o nome. Medido: sem
   isso a sobreposicao era de ~19px; 22px de folga cobre com margem. */
.podium-people:has(> .podium-person + .podium-person) { margin-bottom: 22px; }
.podium-person { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.podium-person .podium-name { font-size: 0.78rem; }
.podium-name {
  font-weight: 700; font-size: 0.9rem; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-points { font-weight: 700; color: #facc15; font-size: 0.85rem; }
.podium-platform {
  width: 100%; height: 0; border-radius: 10px 10px 0 0; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 8px; margin-top: 6px;
  transition: height 0.6s ease;
}
.podium-rank-num { font-size: 1.6rem; font-weight: 800; }
.podium-col-1 .podium-platform { background: linear-gradient(180deg, #fde68a, #ca8a04); }
.podium-col-1 .podium-rank-num { color: #78350f; }
.podium-col-2 .podium-platform { background: linear-gradient(180deg, #e2e8f0, #64748b); }
.podium-col-2 .podium-rank-num { color: #334155; }
.podium-col-3 .podium-platform { background: linear-gradient(180deg, #fdba74, #9a3412); }
.podium-col-3 .podium-rank-num { color: #fff7ed; }
/* A altura de cada degrau e uma variavel porque duas coisas dependem dela: a
   propria plataforma e o "chao" onde o personagem pisa. Manter as duas presas
   a mesma variavel evita que saiam de sincronia (inclusive no breakpoint
   estreito, que so redefine as variaveis). */
.podium-col-1 { --podium-step: 92px; }
.podium-col-2 { --podium-step: 64px; }
.podium-col-3 { --podium-step: 46px; }
.podium.podium-grown .podium-platform { height: var(--podium-step); }

.ranking-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ranking-row {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 14px;
}
.ranking-row.me { border-color: var(--primary); background: rgba(99,102,241,0.08); }
.pos { color: var(--muted); width: 32px; }
.rank-emoji { font-size: 1.3rem; }
.rank-name { flex: 1; font-weight: 600; }
.rank-points { font-weight: 700; }
.rank-points-bar-track {
  flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--input-bg);
  border: 1px solid var(--card-border); overflow: hidden; margin-top: 2px; order: 10;
}
.rank-points-bar-fill {
  height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #7c3aed);
  border-radius: 999px; transition: width 0.8s ease;
}

.month-podium-scroll { overflow-x: auto; }
.month-podium-grid { display: grid; grid-template-columns: repeat(7, minmax(48px, 1fr)); gap: 4px; min-width: 400px; }
.month-podium-weekday { text-align: center; font-size: 0.7rem; text-transform: uppercase; padding-bottom: 2px; }
.month-podium-cell {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 4px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.month-podium-cell-blank { border: none; }
.month-podium-cell-quiet { opacity: 0.45; }
.month-podium-day { font-size: 0.7rem; color: var(--muted); align-self: flex-start; }
.month-podium-count {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--primary);
}
.month-podium-mini { display: flex; justify-content: center; gap: 2px; }
.month-podium-mini-person { position: relative; display: inline-flex; cursor: default; }
.month-podium-mini-medal {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 0.55rem;
  line-height: 1;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.9));
}
.month-podium-cell-clickable { cursor: var(--hover-cursor, pointer); transition: border-color 0.12s ease; }
.month-podium-cell-clickable:hover,
.month-podium-cell-clickable:focus-visible { border-color: var(--primary); }
.month-podium-hint { margin: 10px 0 0; font-size: 0.8rem; }

.day-ranking-modal {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  padding: 20px;
  max-width: 480px;
  width: 90vw;
}
.day-ranking-modal::backdrop { background: rgba(0,0,0,0.55); }
.day-ranking-modal-body { max-height: 60vh; overflow-y: auto; }
.day-ranking-title { margin: 0 0 12px; }
.day-ranking-modal-close { margin-top: 16px; width: 100%; }

.level-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(99,102,241,0.12);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.level-card { display: flex; flex-direction: column; gap: 10px; }
.level-card-compact { padding: 16px 20px; }
.level-card-top { display: flex; align-items: center; gap: 14px; }
.level-card h3 { margin: 0 0 2px; }
.level-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.level-card-compact .level-card-top { gap: 12px; }
.level-card-compact .level-progress-track { flex: 1; margin: 0; }
.level-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.level-progress-label { margin: 0; font-size: 0.82rem; }

.section-sub { margin-top: 22px; font-size: 1rem; }

.heatmap-wrap { overflow-x: auto; overflow-y: visible; padding: 6px 4px; }

/* Personagem ao lado do heatmap no perfil. O heatmap encolhe (min-width: 0 pra
   ele poder rolar dentro do flex em vez de esticar a linha) e o personagem
   mantem largura fixa; em tela estreita a linha quebra e o personagem vai pra
   baixo. */
.perfil-constancia-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.perfil-constancia-heatmap { flex: 1 1 320px; min-width: 0; }
.perfil-personagem-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.perfil-personagem-card .section-sub { margin: 0; }

/* Previa do personagem: camadas 32x48 empilhadas, uma por peca equipada. */
.character-preview {
  position: relative;
  image-rendering: pixelated;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  overflow: hidden;
}
.character-preview-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.character-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.6rem;
}
/* No hover card o personagem fica encostado na direita, sem disputar espaco
   com o nome e o nivel. */
.hover-card-top .character-preview { margin-left: auto; flex: 0 0 auto; }

/* No podio o personagem fica de pe ao lado direito do avatar, com os pes na
   superficie do degrau. Fica fora do fluxo de proposito: assim nao empurra o
   avatar/medalha pra cima e as colunas de quem tem e de quem nao tem
   personagem continuam alinhadas.
   O :only-child cobre o empate — com duas ou mais pessoas na mesma coluna elas
   dividiriam a mesma posicao absoluta e ficariam sobrepostas, entao ali o
   personagem volta pro fluxo, acima do avatar. */
.podium-col { position: relative; }
.podium {
  --podium-avatar-half: 60px;
}
.podium-person .character-preview { background: none; }
.podium-person:only-child .character-preview {
  position: absolute;
  /* -2px = so um respiro sobre a borda do avatar, sem cobrir o rosto */
  left: calc(50% + var(--podium-avatar-half) - 2px);
  bottom: 0;
  z-index: 2;
  /* sobe junto com a plataforma, que tem transition de 0.6s */
  transition: bottom 0.6s ease;
}
/* Sem somar o margin-top da plataforma: ele fica ACIMA dela, entao o topo do
   degrau ja esta exatamente em bottom: var(--podium-step). Medido no
   navegador — com o +6px os pes ficavam 6px flutuando. */
/* Empate: o personagem tambem fica AO LADO do avatar, nao acima dele. Sai do
   fluxo (como no caso solo) pra nao esticar a coluna — senao a coluna do 2o
   lugar empatado ficaria mais alta que a do campeao.
   Aqui a ancora e a propria pessoa, nao a coluna: cada uma tem o seu.
   top 16px = 88px do avatar-lg menos os 72px da caixa do personagem, o que
   deixa os pes na base do avatar. O scale encolhe pra caber duas pessoas na
   coluna, ancorado embaixo a esquerda pra nao descolar os pes. */
/* Empate: os pes tambem tem que encostar no degrau, exatamente como no caso
   solo — por isso a ancora e .podium-col (ja e position:relative), NAO a
   pessoa. A primeira tentativa usava position:relative na .podium-person e
   top:16px, o que ancorava o personagem no proprio bloco da pessoa (avatar +
   nome), sem nenhuma relacao com a plataforma abaixo — ele ficava flutuando
   no ar em vez de pisar no degrau.
   --podium-tie-outer = distancia do centro da coluna ate a borda EXTERNA de
   cada avatar, com os dois avatares lado a lado: avatar-lg (88px) + metade do
   gap entre eles (8px / 2 = 4px) = 92px. Os personagens apontam pra FORA a
   partir dai: o da primeira pessoa vai pra esquerda, o da segunda pra
   direita — assim nao caem um em cima do outro nem invadem o avatar vizinho.
   O scale nao muda a caixa (48x72) usada no calculo de left/right, so o
   tamanho visual: a origem do scale fica na borda que serve de ancora, pra
   ela nao se mover quando encolhe. */
.podium {
  /* Testado ao vivo em 92/64/52px sobre o empate real (GABRIEL x Guilherme
     Bifani). 92 (borda externa do avatar) deixava os dois muito na ponta da
     coluna; 60 aproxima do centro sem sobrepor os avatares — os personagens
     ficam abaixo deles (avatar no topo da coluna, personagem em pe no
     degrau), entao mesmo a distancia horizontal ficando pequena nao ha
     colisao visual. */
  --podium-tie-outer: 60px;
}
.podium-person:not(:only-child) .character-preview {
  position: absolute;
  bottom: 0;
  transform: scale(0.667);
  z-index: 2;
  transition: bottom 0.6s ease;
}
.podium.podium-grown .podium-person:not(:only-child) .character-preview {
  bottom: var(--podium-step);
}
.podium-person:not(:only-child):first-child .character-preview {
  right: calc(50% + var(--podium-tie-outer));
  transform-origin: bottom right;
}
.podium-person:not(:only-child):last-child .character-preview {
  left: calc(50% + var(--podium-tie-outer));
  transform-origin: bottom left;
}

.podium.podium-grown .podium-person:only-child .character-preview {
  bottom: var(--podium-step);
}

.character-builder-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(5, 12px);
  grid-auto-flow: column;
  grid-auto-columns: 12px;
  gap: 3px;
  width: max-content;
}
.heatmap-cell {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: none;
  padding: 0;
  cursor: default;
  background: var(--heat-0);
}
.heatmap-cell[data-level="1"] { background: var(--heat-1); }
.heatmap-cell[data-level="2"] { background: var(--heat-2); }
.heatmap-cell[data-level="3"] { background: var(--heat-3); }
.heatmap-cell[data-level="4"] { background: var(--heat-4); }
.heatmap-cell:hover, .heatmap-cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.78rem; }
.heatmap-legend-swatch { cursor: default; }
.heatmap-legend-swatch:hover, .heatmap-legend-swatch:focus-visible { outline: none; }

/* Tooltip único e flutuante (position: fixed, calculado em JS por heatmap.js) —
   evita qualquer problema de célula vizinha cobrindo ou de corte nas bordas do
   grid, já que ele vive fora da grade, direto no <body>. */
.heatmap-float-tip {
  position: fixed;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 0.72rem;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 9998;
}
.heatmap-float-tip[hidden] { display: none; }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.badge-item {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  background: rgba(99,102,241,0.06);
}
.badge-item.locked { opacity: 0.5; background: none; }
.badge-emoji { font-size: 1.8rem; line-height: 1; margin-bottom: 6px; }
.badge-label { font-weight: 600; font-size: 0.85rem; }
.badge-info { font-size: 0.78rem; color: var(--primary); font-weight: 700; margin-top: 2px; }
.badge-desc { font-size: 0.72rem; margin-top: 4px; }

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.reward-card {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
  background: rgba(99,102,241,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reward-preview { display: flex; justify-content: center; margin-bottom: 2px; }
.reward-cost { font-weight: 700; color: var(--primary); }
.reward-title { font-weight: 600; }
.reward-desc { font-size: 0.82rem; }
.reward-card form { margin-top: auto; }
.reward-use-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.reward-use-form input { flex: 1; min-width: 180px; }
.reward-kind-choice { display: flex; flex-direction: column; gap: 6px; font-weight: 400; font-size: 0.9rem; }
.reward-kind-choice label { display: flex; align-items: center; gap: 6px; }
.frame-choice-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: flex-start; }
.frame-choice-list button:disabled { opacity: 0.6; cursor: default; border-color: var(--primary); color: var(--primary); }
.frame-choice-list .btn-secondary { padding: 5px 10px; font-size: 0.78rem; }
.frame-choice-list .rarity-badge { padding: 1px 6px; font-size: 0.62rem; }
.frame-choice-list .btn-preview { border-style: dashed; }
.tab-hint { margin-top: -6px; margin-bottom: 10px; font-size: 0.8rem; }
.frame-owned-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px;
  min-width: 88px;
  background: rgba(99,102,241,0.06);
}
.frame-owned-card[data-frame-code], .frame-owned-card[data-banner-code] { cursor: pointer; }
.frame-owned-card[data-frame-code]:hover, .frame-owned-card[data-banner-code]:hover { border-color: var(--primary); }
.frame-owned-card.equipped { border-color: var(--primary); background: rgba(99,102,241,0.16); }
.frame-owned-card.equipped::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.badge-new {
  position: absolute;
  top: -6px;
  left: -6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.frame-owned-label { font-weight: 600; font-size: 0.75rem; text-align: center; }
.frame-owned-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  font-size: 0.72rem;
  font-weight: 700;
}
.tab.active .tab-count { background: rgba(255,255,255,0.3); }

/* ---- temas de barra ---- */
.theme-swatch { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); }
.theme-swatch-sm { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }

.theme-swatch-meia-noite, .topbar[data-topbar-theme="meia-noite"] {
  background: #0b1330;
}
.topbar[data-topbar-theme="meia-noite"] { border-bottom-color: #334155; }
.topbar[data-topbar-theme="meia-noite"] .brand,
.topbar[data-topbar-theme="meia-noite"] .nav-icon-link,
.topbar[data-topbar-theme="meia-noite"] .nav-wallet-item { color: #cbd5e1; }
.topbar[data-topbar-theme="meia-noite"] .nav-icon-link:hover { color: #93c5fd; }
.topbar[data-topbar-theme="meia-noite"] .nav-wallet { border-color: #334155; background: rgba(59,130,246,0.12); }

.theme-swatch-cyberpunk, .topbar[data-topbar-theme="cyberpunk"] {
  background: linear-gradient(120deg, #1a0b2e, #4c1d95, #2d1b4e);
}
.topbar[data-topbar-theme="cyberpunk"] { border-bottom-color: #a855f7; }
.topbar[data-topbar-theme="cyberpunk"] .brand,
.topbar[data-topbar-theme="cyberpunk"] .nav-icon-link,
.topbar[data-topbar-theme="cyberpunk"] .nav-wallet-item { color: #e9d5ff; }
.topbar[data-topbar-theme="cyberpunk"] .nav-icon-link:hover { color: #22d3ee; }
.topbar[data-topbar-theme="cyberpunk"] .nav-wallet { border-color: #a855f7; background: rgba(168,85,247,0.15); }

.theme-swatch-por-do-sol, .topbar[data-topbar-theme="por-do-sol"] {
  background: linear-gradient(120deg, #7c2d12, #ea580c, #db2777, #7c3aed);
}
.topbar[data-topbar-theme="por-do-sol"] { border-bottom-color: #f59e0b; }
.topbar[data-topbar-theme="por-do-sol"] .brand,
.topbar[data-topbar-theme="por-do-sol"] .nav-icon-link,
.topbar[data-topbar-theme="por-do-sol"] .nav-wallet-item { color: #fef3c7; }
.topbar[data-topbar-theme="por-do-sol"] .nav-icon-link:hover { color: #fde047; }
.topbar[data-topbar-theme="por-do-sol"] .nav-wallet { border-color: #f59e0b; background: rgba(245,158,11,0.18); }

.theme-swatch-floresta, .topbar[data-topbar-theme="floresta"] {
  background: linear-gradient(120deg, #052e16, #14532d, #166534);
}
.topbar[data-topbar-theme="floresta"] { border-bottom-color: #22c55e; }
.topbar[data-topbar-theme="floresta"] .brand,
.topbar[data-topbar-theme="floresta"] .nav-icon-link,
.topbar[data-topbar-theme="floresta"] .nav-wallet-item { color: #dcfce7; }
.topbar[data-topbar-theme="floresta"] .nav-icon-link:hover { color: #a3e635; }
.topbar[data-topbar-theme="floresta"] .nav-wallet { border-color: #22c55e; background: rgba(34,197,94,0.15); }

.theme-swatch-vulcanico, .topbar[data-topbar-theme="vulcanico"] {
  background: linear-gradient(120deg, #0a0a0a, #7c2d12, #ea580c, #7c2d12, #0a0a0a);
  background-size: 250% 250%;
}
.theme-swatch-vulcanico { animation: topbar-theme-shift 6s ease-in-out infinite; }
.topbar[data-topbar-theme="vulcanico"] {
  border-bottom-color: #f97316;
  --topbar-glow: rgba(249,115,22,0.55);
  animation: topbar-theme-shift 10s ease-in-out infinite, topbar-legend-glow 2.4s ease-in-out infinite;
}
.topbar[data-topbar-theme="vulcanico"] .brand,
.topbar[data-topbar-theme="vulcanico"] .nav-icon-link,
.topbar[data-topbar-theme="vulcanico"] .nav-wallet-item { color: #fed7aa; }
.topbar[data-topbar-theme="vulcanico"] .nav-icon-link:hover { color: #fde047; }
.topbar[data-topbar-theme="vulcanico"] .nav-wallet { border-color: #f97316; background: rgba(249,115,22,0.18); }

.theme-swatch-aurora, .topbar[data-topbar-theme="aurora"] {
  background: linear-gradient(120deg, #0f766e, #7c3aed, #db2777, #0f766e);
  background-size: 250% 250%;
}
.theme-swatch-aurora { animation: topbar-theme-shift 6s ease-in-out infinite; }
.topbar[data-topbar-theme="aurora"] {
  border-bottom-color: #a855f7;
  --topbar-glow: rgba(217,70,239,0.5);
  animation: topbar-theme-shift 10s ease-in-out infinite, topbar-legend-glow 2.4s ease-in-out infinite;
}
.topbar[data-topbar-theme="aurora"] .brand,
.topbar[data-topbar-theme="aurora"] .nav-icon-link,
.topbar[data-topbar-theme="aurora"] .nav-wallet-item { color: #ecfeff; }
.topbar[data-topbar-theme="aurora"] .nav-icon-link:hover { color: #f0abfc; }
.topbar[data-topbar-theme="aurora"] .nav-wallet { border-color: #a855f7; background: rgba(217,70,239,0.15); }

.theme-swatch-holografico, .topbar[data-topbar-theme="holografico"] {
  background: linear-gradient(120deg, #6d28d9, #be185d, #b45309, #15803d, #0e7490, #6d28d9);
  background-size: 300% 300%;
}
.theme-swatch-holografico { animation: topbar-theme-shift 5s ease-in-out infinite; }
.topbar[data-topbar-theme="holografico"] {
  border-bottom-color: #f0abfc;
  --topbar-glow: rgba(240,171,252,0.5);
  animation: topbar-theme-shift 7s ease-in-out infinite, topbar-legend-glow 2.4s ease-in-out infinite;
}
.topbar[data-topbar-theme="holografico"] .brand,
.topbar[data-topbar-theme="holografico"] .nav-icon-link,
.topbar[data-topbar-theme="holografico"] .nav-wallet-item { color: #f8fafc; }
.topbar[data-topbar-theme="holografico"] .nav-icon-link:hover { color: #67e8f9; }
.topbar[data-topbar-theme="holografico"] .nav-wallet { border-color: #f0abfc; background: rgba(240,171,252,0.18); }

.theme-swatch-galaxia, .topbar[data-topbar-theme="galaxia"] {
  background:
    radial-gradient(circle at 20% 30%, rgba(236,72,153,0.4), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(56,189,248,0.35), transparent 50%),
    linear-gradient(120deg, #030014, #1e0a3c, #0a0118);
  background-size: 200% 200%, 200% 200%, 200% 200%;
}
.theme-swatch-galaxia { animation: topbar-theme-shift 8s ease-in-out infinite; }
.topbar[data-topbar-theme="galaxia"] {
  border-bottom-color: #7c3aed;
  --topbar-glow: rgba(124,58,237,0.55);
  animation: topbar-theme-shift 14s ease-in-out infinite, topbar-legend-glow 2.4s ease-in-out infinite;
}
.topbar[data-topbar-theme="galaxia"] .brand,
.topbar[data-topbar-theme="galaxia"] .nav-icon-link,
.topbar[data-topbar-theme="galaxia"] .nav-wallet-item { color: #e9d5ff; }
.topbar[data-topbar-theme="galaxia"] .nav-icon-link:hover { color: #f472b6; }
.topbar[data-topbar-theme="galaxia"] .nav-wallet { border-color: #7c3aed; background: rgba(124,58,237,0.18); }

.theme-swatch-ouro-real, .topbar[data-topbar-theme="ouro-real"] {
  background: linear-gradient(120deg, #451a03, #92400e, #d97706, #fbbf24, #92400e, #451a03);
  background-size: 250% 250%;
}
.theme-swatch-ouro-real { animation: topbar-theme-shift 6s ease-in-out infinite; }
.topbar[data-topbar-theme="ouro-real"] {
  border-bottom-color: #fbbf24;
  --topbar-glow: rgba(251,191,36,0.55);
  animation: topbar-theme-shift 10s ease-in-out infinite, topbar-legend-glow 2.4s ease-in-out infinite;
}
.topbar[data-topbar-theme="ouro-real"] .brand,
.topbar[data-topbar-theme="ouro-real"] .nav-icon-link,
.topbar[data-topbar-theme="ouro-real"] .nav-wallet-item { color: #fef3c7; }
.topbar[data-topbar-theme="ouro-real"] .nav-icon-link:hover { color: #fde047; }
.topbar[data-topbar-theme="ouro-real"] .nav-wallet { border-color: #fbbf24; background: rgba(251,191,36,0.18); }

@keyframes topbar-theme-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes topbar-legend-glow {
  0%, 100% { box-shadow: 0 2px 10px -2px var(--topbar-glow); }
  50% { box-shadow: 0 2px 20px 1px var(--topbar-glow); }
}

/* ---- wallpapers ---- */
.app-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.wallpaper-swatch { width: 64px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background-size: cover; background-position: center; }
.wallpaper-swatch-sm { width: 36px; height: 22px; border-radius: 6px; flex-shrink: 0; }

.app-wallpaper-estelar {
  background:
    radial-gradient(circle at 20% 20%, #fff 0.5px, transparent 0.5px) 0 0/22px 22px,
    radial-gradient(circle at 60% 70%, #fff 0.5px, transparent 0.5px) 0 0/30px 30px,
    linear-gradient(160deg, #0b1330, #050814);
}
.app-wallpaper-ondas {
  background: linear-gradient(160deg, #082f49, #0e7490, #082f49);
}
.app-wallpaper-nebulosa {
  background:
    radial-gradient(circle at 25% 30%, rgba(236,72,153,0.35), transparent 50%),
    radial-gradient(circle at 75% 60%, rgba(124,58,237,0.35), transparent 50%),
    linear-gradient(160deg, #1e0a3c, #030014);
}
.app-wallpaper-aurora-polar {
  background: linear-gradient(160deg, #022c22, #064e3b, #4c1d95, #022c22);
  background-size: 200% 200%;
}
.app-wallpaper.app-wallpaper-aurora-polar,
.app-wallpaper-aurora-polar.wallpaper-swatch,
.app-wallpaper-aurora-polar.wallpaper-swatch-sm {
  animation: topbar-theme-shift 16s ease-in-out infinite;
}

/* ---- banners de perfil ---- */
.banner-swatch { width: 96px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background-size: cover; background-position: center; }
.banner-swatch-sm { width: 48px; height: 22px; border-radius: 6px; flex-shrink: 0; }

.profile-banner-aurora {
  background: linear-gradient(120deg, #022c22, #0f766e, #022c22);
}
.profile-banner-oceano {
  background: linear-gradient(120deg, #0c2340, #0369a1, #082f49);
}
.profile-banner-nebulosa {
  background:
    radial-gradient(circle at 30% 40%, rgba(236,72,153,0.4), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(124,58,237,0.4), transparent 55%),
    linear-gradient(120deg, #1e0a3c, #030014);
}
.profile-banner-dourado {
  background: linear-gradient(120deg, #78350f, #b45309, #eab308, #78350f);
  background-size: 200% 200%;
}
.profile-banner-dourado.perfil-banner-bg,
.profile-banner-dourado.hover-card-banner,
.profile-banner-dourado.banner-swatch,
.profile-banner-dourado.banner-swatch-sm {
  animation: topbar-theme-shift 16s ease-in-out infinite;
}

/* ---- previews genéricos de cosmético (pet/partículas) ---- */
.emoji-preview { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--input-bg); border: 1px solid var(--card-border); margin: 0 auto; }
.emoji-preview-sm { width: 22px; height: 22px; font-size: 0.85rem; flex-shrink: 0; }

/* ---- pet customizado (miniatura do quadro "idle" do spritesheet) ---- */
.pet-swatch { width: 40px; height: 40px; border-radius: 999px; background-size: cover; background-position: center; image-rendering: pixelated; background-color: var(--input-bg); border: 1px solid var(--card-border); margin: 0 auto; }
.pet-swatch-sm { width: 22px; height: 22px; flex-shrink: 0; }

/* ---- nome animado ---- */
.name-effect {
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.name-effect-oceano { background-image: linear-gradient(90deg, #38bdf8, #14b8a6); }
.name-effect-sunset { background-image: linear-gradient(90deg, #f97316, #ec4899); }
.name-effect-galatico { background-image: linear-gradient(90deg, #a855f7, #6366f1, #ec4899); }
.name-effect-prisma {
  background-image: linear-gradient(90deg, #f87171, #facc15, #4ade80, #38bdf8, #a855f7, #f87171);
  background-size: 300% 100%;
  animation: name-prisma-shift 4s linear infinite;
}
@keyframes name-prisma-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---- cursor personalizado ---- */
.cursor-swatch {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--card-border);
  background-size: 24px 24px; background-position: center; background-repeat: no-repeat;
  margin: 0 auto;
}
.cursor-swatch-sm { width: 22px; height: 22px; border-radius: 6px; background-size: 16px 16px; flex-shrink: 0; }
.cursor-swatch-ponto-azul { background-image: url('/cursors/ponto-azul.svg'); }
.cursor-swatch-ponto-roxo { background-image: url('/cursors/ponto-roxo.svg'); }
.cursor-swatch-estrela { background-image: url('/cursors/estrela.svg'); }
.cursor-swatch-diamante { background-image: url('/cursors/diamante.svg'); }

/* ---- card de perfil ao passar o mouse ---- */
.hover-card {
  position: fixed;
  z-index: 50;
  width: 260px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.hover-card.hover-card-visible { opacity: 1; transform: translateY(0); }
.hover-card-banner {
  margin: -14px -14px 10px -14px;
  height: 64px;
  border-radius: 12px 12px 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hover-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hover-card-name { font-weight: 700; }
.hover-card-level { font-size: 0.8rem; }
.hover-card-progress { margin-bottom: 10px; }
.hover-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; margin-bottom: 8px; }
.hover-card-badge-emoji { font-size: 1.2rem; line-height: 1; }
.hover-card-badge-more { font-size: 0.75rem; }
.hover-card-showcase { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--card-border); }
.hover-card-showcase-icon { width: 22px; height: 22px; margin: 0; }

.activity-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.activity-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--card-border); padding-bottom: 8px; font-size: 0.9rem;
}
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-who { display: flex; align-items: center; gap: 8px; }

.kb-search { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.kb-search input[type="text"] { flex: 1; min-width: 180px; }
.kb-search select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}
.kb-search .btn-secondary { white-space: nowrap; }

.kb-group { margin-bottom: 22px; }
.kb-group:last-child { margin-bottom: 0; }
.kb-category {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 10px;
}
/* Dentro de um <summary> o titulo nao precisa da margem que ele tem quando e
   cabecalho solto — ela desalinharia a contagem e a seta. */
.loja-group-summary .kb-category { margin: 0; }

.kb-list { display: flex; flex-direction: column; gap: 10px; }
.kb-item {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.kb-item summary {
  cursor: var(--hover-cursor, pointer);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}
.kb-item summary::-webkit-details-marker { display: none; }

.loja-group-summary {
  cursor: var(--hover-cursor, pointer);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.loja-group-summary::-webkit-details-marker { display: none; }
/* h4 entra por causa dos grupos da loja do supervisor, que reaproveitam
   .loja-group mas usam .kb-category (h4) no lugar do h3. */
.loja-group-summary h3,
.loja-group-summary h4 { flex: 1; }
.loja-group-count {
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  padding: 2px 9px;
}
.loja-group-summary::after {
  content: '▾';
  color: var(--muted);
  transition: transform 0.15s ease;
}
.loja-group[open] > .loja-group-summary::after { transform: rotate(180deg); }
.loja-group > .loja-group-summary ~ * { margin-top: 14px; }

/* Subgrupo dentro de um grupo da loja (as subcategorias de peca de
   personagem). O seletor de seta e de margem acima usa filho direto (>) de
   proposito: sem isso a seta do subgrupo fechado ja apareceria girada,
   herdando o [open] do grupo pai. */
.loja-subgroup {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 12px;
}
.loja-subgroup + .loja-subgroup { margin-top: 12px; }
.loja-subgroup > .loja-group-summary h4 {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
}
.loja-subgroup[open] > .loja-group-summary::after { transform: rotate(180deg); }
.loja-subgroup > .loja-group-summary ~ * { margin-top: 12px; }
.kb-title { font-weight: 600; }
.kb-meta { font-size: 0.78rem; white-space: nowrap; }
.kb-content { margin-top: 10px; white-space: pre-wrap; line-height: 1.5; }
.kb-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---- tutoriais do ERP ---- */
.tutorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tutorial-card {
  display: flex; flex-direction: column; border: 1px solid var(--card-border); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: inherit; background: var(--card);
}
.tutorial-card:hover { border-color: var(--primary); }
.tutorial-card-thumb { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg); }
.tutorial-card-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.tutorial-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tutorial-card-title { font-weight: 600; }

.tutorial-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.tutorial-step { border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; }
.tutorial-step-number { font-weight: 700; color: var(--primary); font-size: 0.85rem; margin-bottom: 6px; }
.tutorial-step-text { white-space: pre-wrap; line-height: 1.5; margin-bottom: 10px; }
.tutorial-step-image { max-width: 100%; border-radius: 8px; border: 1px solid var(--card-border); display: block; }
.tutorial-step-image-sm { max-width: 220px; margin-bottom: 8px; }
.tutorial-steps-editable .tutorial-step { display: flex; flex-direction: column; }

.tutorial-builder { margin: 20px 0; display: flex; flex-direction: column; gap: 18px; }
.tutorial-builder-block { border: 1px dashed var(--card-border); border-radius: 10px; padding: 14px; }
.tutorial-builder-block h4 { margin: 0 0 6px; }
.tutorial-builder-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.tb-video { width: 100%; max-height: 420px; background: #000; border-radius: 8px; margin-top: 10px; }

.tutorial-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; }
.tb-frame { border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; grid-column: 1 / -1; max-width: 200px; }
.tb-frame:has(.tb-editor) { grid-column: 1 / -1; max-width: none; }
.tb-frame-thumb { width: 100%; border-radius: 6px; cursor: pointer; display: block; }
.tb-frame-actions { margin-top: 6px; }
.tb-editor { margin-top: 12px; }
.tb-editor-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tb-tool-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tb-color-input { width: 36px; height: 32px; padding: 2px; border-radius: 6px; border: 1px solid var(--card-border); cursor: pointer; background: none; }
.tb-editor-canvas-wrap { position: relative; max-width: 100%; }
.tb-editor-canvas, .tb-editor-overlay { max-width: 100%; height: auto; display: block; border-radius: 8px; }
.tb-editor-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

.tutorial-step-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.typing-result-banner p { margin: 0; font-size: 1.05rem; }
.typing-result-banner.typing-result-prova { border-color: var(--primary); background: rgba(99, 102, 241, 0.08); }

.typing-header-actions { display: flex; align-items: center; gap: 8px; }
.typing-header-actions .btn-primary { margin-top: 0; }
.typing-mode-note { margin: -4px 0 14px; }

.typing-stats { display: flex; gap: 28px; margin-bottom: 16px; flex-wrap: wrap; }
.typing-stat { display: flex; flex-direction: column; align-items: center; }
.typing-stat span { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.typing-stat label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.typing-text-wrap { position: relative; }
.typing-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  z-index: 2;
}
/* Sem isso, o atributo "hidden" (definido via JS quando a contagem termina) não
   esconde o elemento: a regra acima (display: flex) e a regra padrão do navegador
   pro [hidden] ([hidden] { display: none }) têm a mesma especificidade, e CSS de
   autor sempre vence empate contra o CSS padrão do navegador — a contagem ficaria
   cobrindo o texto pra sempre. */
.typing-countdown[hidden] { display: none; }

.typing-text {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  line-height: 1.8;
  white-space: pre-wrap;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  margin-bottom: 14px;
}
.typing-char { color: var(--muted); }
.typing-char.correct { color: var(--text); }
.typing-char.incorrect { color: var(--red); background: rgba(239, 68, 68, 0.15); border-radius: 2px; }
.typing-char.current { outline: 2px solid var(--primary); border-radius: 2px; }

.typing-input-row input#typing-input {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
}

.typing-history { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.typing-history li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--card-border); padding-bottom: 6px; font-size: 0.9rem; }
.typing-history li:last-child { border-bottom: none; padding-bottom: 0; }

.quiz-admin-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.difficulty-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
.difficulty-badge.difficulty-facil { color: var(--green); background: rgba(34, 197, 94, 0.14); }
.difficulty-badge.difficulty-medio { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.difficulty-badge.difficulty-dificil { color: var(--red); background: rgba(239, 68, 68, 0.14); }

.quiz-question { margin: 14px 0; }
.quiz-question-text { font-size: 1.1rem; font-weight: 600; margin: 10px 0 0; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: var(--hover-cursor, pointer);
}
button.quiz-option:hover { border-color: var(--primary); }
.quiz-option-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card-border);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.quiz-option-review { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.quiz-option-review-correct { color: var(--green); font-weight: 600; }

.quiz-option-input { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.quiz-option-input-label { display: inline-block; margin: 0; width: 20px; text-align: center; font-weight: 700; color: var(--text); }
.quiz-option-input input[type="text"] { flex: 1; }
.quiz-option-input input[type="radio"] { width: auto; }

.broadcast-video-wrap { position: relative; margin-bottom: 12px; }
.broadcast-video {
  width: 100%;
  max-height: 80vh;
  min-height: 320px;
  border-radius: 12px;
  background: #000;
  display: block;
}
.broadcast-fullscreen-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: rgba(15, 23, 42, 0.65);
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  cursor: var(--hover-cursor, pointer);
  display: flex;
  align-items: center;
  justify-content: center;
}
.broadcast-fullscreen-btn:hover { background: rgba(15, 23, 42, 0.85); }
.broadcast-viewer-count { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; }
.broadcast-hint { margin-top: 16px; font-size: 0.8rem; }

@media (max-width: 600px) {
  .container { padding: 14px; gap: 14px; }
  .topbar { padding: 12px 14px; }
  .topbar nav { gap: 12px; }
  .card { padding: 16px; }

  .note-input { width: auto; flex: 1; min-width: 0; }
  .points-input { width: 56px; }
  .review-actions form { flex-wrap: wrap; }

  .auth-card { padding: 22px; }

  .typing-stats { gap: 18px; }
  .perfil-current { gap: 12px; }

  .level-card-compact { padding: 14px; }

  .month-filter { flex-direction: column; align-items: stretch; }
  .month-filter-field { width: 100%; }
  .month-filter-field select,
  .month-filter-field input[type="date"] { flex: 1; min-width: 0; }
  .month-filter > .btn-secondary { width: 100%; }

  .podium { gap: 6px; }
  .avatar-xl { width: 72px; height: 72px; }
  .avatar-frame-wrap-xl .avatar-frame-ring {
    inset: -6px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  }
  .avatar-frame-charm-xl { font-size: 1.4rem; top: -6px; right: -6px; }
  .podium-name { font-size: 0.78rem; }
  .podium-col-1 { --podium-step: 60px; }
  .podium-col-2 { --podium-step: 42px; }
  .podium-col-3 { --podium-step: 30px; }
  /* o avatar cai pra 72px aqui, entao o personagem se aproxima do centro e
     encolhe — ancorado pelos pes, pra continuar pisando no degrau */
  .podium { --podium-avatar-half: 36px; }
  .podium-person:only-child .character-preview {
    transform: scale(0.7);
    transform-origin: bottom left;
  }
}

.settings-agent-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.settings-agent-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: var(--hover-cursor, pointer); }
.settings-agent-item:hover { background: rgba(148, 163, 184, 0.15); }
.settings-agent-item input[type="checkbox"] { width: auto; flex: none; }
.settings-agent-email { margin-left: auto; font-size: 0.8rem; }

.settings-bits-form { max-width: 360px; }
.settings-bits-history-title { margin: 20px 0 8px; font-size: 0.95rem; }
.settings-bits-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-bits-history li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(148, 163, 184, 0.08); }
.settings-bits-history-meta { font-size: 0.78rem; }

.box-open-card { text-align: center; }
.box-reel-viewport {
  position: relative;
  overflow: hidden;
  height: 150px;
  margin: 16px auto;
  max-width: 560px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--input-bg);
}
.box-reel-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 2; transform: translateX(-50%); }
.box-reel-marker::before, .box-reel-marker::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; }
.box-reel-marker::before { top: -1px; border-top: 8px solid var(--primary); }
.box-reel-marker::after { bottom: -1px; border-bottom: 8px solid var(--primary); }
.box-reel-track { display: flex; align-items: center; gap: 8px; padding: 12px; will-change: transform; }
.box-reel-item { flex: none; width: 90px; border: 1px solid var(--card-border); border-radius: 10px; padding: 6px; background: var(--card); text-align: center; }
.box-reel-item-title { font-size: 0.62rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-reel-item-winner { animation: box-winner-pulse 0.6s ease; }
@keyframes box-winner-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.rarity-glow-comum { box-shadow: 0 0 0 2px rgba(148,163,184,0.35); }
.rarity-glow-raro { box-shadow: 0 0 10px 2px rgba(59,130,246,0.5); border-color: #3b82f6; }
.rarity-glow-epico { box-shadow: 0 0 14px 3px rgba(168,85,247,0.6); border-color: #a855f7; }
.rarity-glow-lendario { box-shadow: 0 0 18px 4px rgba(249,115,22,0.65); border-color: #f97316; }
.box-result { margin-top: 20px; }
.box-result-label { margin: 0 0 8px; color: var(--muted); }
.box-result-preview { display: inline-block; padding: 10px; border-radius: 12px; border: 1px solid var(--card-border); }
.box-result-title { font-size: 1.2rem; font-weight: 700; margin: 10px 0 16px; }
.box-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.box-test-banner {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed #eab308;
  background: rgba(234,179,8,0.1);
  color: #eab308;
  font-size: 0.85rem;
}

.chat-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--card-border); }
.chat-bubble-content { white-space: pre-wrap; line-height: 1.5; }
.chat-bubble-user { align-self: flex-end; background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); }
.chat-bubble-assistant { align-self: flex-start; background: var(--card); }
.chat-bubble-sources { margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
.chat-bubble-error { margin-top: 6px; font-size: 0.75rem; color: var(--red); }
.chat-input-form { display: flex; gap: 8px; }
.chat-input-form input[type="text"] { flex: 1; }
.chat-input-form button { flex: none; width: auto; margin-top: 0; }

.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 500; }
.chat-widget-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: var(--hover-cursor, pointer); box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.chat-widget-toggle:hover { background: var(--primary-hover); }
.chat-widget-toggle .nav-icon { width: 24px; height: 24px; }
.chat-widget-panel {
  position: absolute; right: 0; bottom: 68px;
  width: 360px; max-width: calc(100vw - 40px);
  height: 480px; max-height: calc(100vh - 120px);
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-widget-panel[hidden] { display: none; }
.chat-widget-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--card-border); font-weight: 600;
  flex-shrink: 0;
}
.chat-widget-header-actions { display: flex; align-items: center; gap: 10px; }
.chat-widget-link { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.chat-widget-close { background: none; border: none; color: var(--muted); cursor: var(--hover-cursor, pointer); font-size: 1rem; line-height: 1; padding: 2px; }
.chat-widget-close:hover { color: var(--text); }
.chat-widget-thread { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-widget-thread .chat-bubble { max-width: 88%; font-size: 0.85rem; padding: 8px 12px; }
.chat-widget-empty { text-align: center; margin: auto; font-size: 0.82rem; }
.chat-widget-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--card-border); flex-shrink: 0; }
.chat-widget-form input[type="text"] { flex: 1; }
.chat-widget-form button { flex: none; width: auto; margin-top: 0; white-space: nowrap; }

@media (max-width: 420px) {
  .chat-widget { right: 12px; bottom: 12px; }
  .chat-widget-toggle { width: 44px; height: 44px; }
  .chat-widget-toggle .nav-icon { width: 20px; height: 20px; }
  .chat-widget-panel {
    right: -8px; bottom: 56px;
    width: calc(100vw - 24px);
    height: min(420px, calc(100vh - 96px));
  }
  .chat-widget-header { padding: 10px 12px; font-size: 0.9rem; }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid var(--card-border);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg);
}
.loading-block .spinner { width: 26px; height: 26px; border-width: 3px; color: var(--primary); }