/* ===== Desempenho: Light / Leve ===== */
html[data-perf="light"] *,
html[data-perf="light"] *::before,
html[data-perf="light"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html[data-perf="light"] {
  --bg-deep: #0a0a0c;
  --bg-0: #0c0c10;
  --bg-1: #101015;
  --bg-2: #15151c;
  --bg-3: #1c1c24;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --shadow: none;
}

html[data-perf="light"] body,
html[data-perf="light"] #app,
html[data-perf="light"] .shell,
html[data-perf="light"] .settings-overlay {
  background: var(--bg-deep) !important;
}

/* Remove arte dos tema packs — menos GPU / memória */
html[data-perf="light"][data-pack] body::before {
  background-image: none !important;
  background-color: #0a0a0c !important;
}

html[data-perf="light"][data-pack] {
  --bg-0: #0c0c10;
  --bg-1: #101015;
  --bg-2: #15151c;
  --bg-3: #1c1c24;
}

html[data-perf="light"] .auth-card,
html[data-perf="light"] .call-overlay,
html[data-perf="light"] .modal,
html[data-perf="light"] .voice-tile,
html[data-perf="light"] .settings-overlay,
html[data-perf="light"] .srv-settings-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-perf="light"] .glow,
html[data-perf="light"] .hero-mark,
html[data-perf="light"] .pack-card::before {
  filter: none !important;
}

/* ===== Desempenho: Clean (mais vivo, sem lavar de branco) ===== */
html[data-perf="clean"] {
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

html[data-perf="clean"][data-pack] {
  --bg-0: rgba(6, 6, 10, 0.78);
  --bg-1: rgba(10, 10, 16, 0.72);
  --bg-2: rgba(14, 14, 22, 0.7);
  --bg-3: rgba(22, 22, 32, 0.68);
  --bg-hover: rgba(255, 255, 255, 0.07);
  --bg-active: rgba(255, 255, 255, 0.11);
  --border: rgba(255, 255, 255, 0.08);
}

/* Arte do pack mais visível, vinheta escura (não esbranquiçada) */
html[data-perf="clean"][data-pack] body::before {
  background-color: #030306;
  background-image:
    radial-gradient(ellipse 90% 70% at 70% 40%, transparent 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(95deg, rgba(2, 2, 6, 0.88) 0%, rgba(2, 2, 6, 0.42) 38%, rgba(2, 2, 6, 0.08) 68%, rgba(2, 2, 6, 0.22) 100%),
    var(--pack-bg, none);
  background-size: cover, cover, cover;
  background-position: center, center, center right;
  filter: saturate(1.18) contrast(1.06) brightness(0.92);
}

html[data-perf="clean"][data-pack="crimson-glitch"] {
  --accent: #ff3348;
  --accent-2: #ff6b7a;
  --accent-soft: rgba(255, 51, 72, 0.22);
}
html[data-perf="clean"][data-pack="cyber-teal"] {
  --accent: #2ef8d0;
  --accent-2: #1ae0b8;
  --accent-soft: rgba(46, 248, 208, 0.2);
}
html[data-perf="clean"][data-pack="sakura-haze"] {
  --accent: #ff8ac4;
  --accent-2: #f065a8;
  --accent-soft: rgba(255, 138, 196, 0.2);
}
html[data-perf="clean"][data-pack="void-ember"] {
  --accent: #ff9447;
  --accent-2: #ff7020;
  --accent-soft: rgba(255, 148, 71, 0.2);
}
html[data-perf="clean"][data-pack="neon-violet"] {
  --accent: #c08dff;
  --accent-2: #a66bff;
  --accent-soft: rgba(192, 141, 255, 0.22);
}
html[data-perf="clean"][data-pack="arctic-glass"] {
  --accent: #7ad0ff;
  --accent-2: #45b6f5;
  --accent-soft: rgba(122, 208, 255, 0.2);
}

/* Microanimações suaves */
@keyframes cleanRise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cleanSoftIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-perf="clean"] .channel-item,
html[data-perf="clean"] .server-pill,
html[data-perf="clean"] .member-row,
html[data-perf="clean"] .friend-row,
html[data-perf="clean"] .snav {
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

html[data-perf="clean"] .channel-item:hover,
html[data-perf="clean"] .member-row:hover,
html[data-perf="clean"] .friend-row:hover,
html[data-perf="clean"] .snav:hover {
  transform: translateX(2px);
}

html[data-perf="clean"] .server-pill:hover {
  transform: scale(1.06);
}

html[data-perf="clean"] .msg {
  animation: cleanRise 0.28s ease both;
}

html[data-perf="clean"] .settings-overlay,
html[data-perf="clean"] .modal-backdrop .modal {
  animation: cleanSoftIn 0.22s ease;
}

html[data-perf="clean"] .btn-primary,
html[data-perf="clean"] .btn-download,
html[data-perf="clean"] .chat-send {
  box-shadow: 0 0 0 1px var(--accent-soft), 0 8px 24px var(--accent-soft);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}

html[data-perf="clean"] .btn-primary:hover,
html[data-perf="clean"] .chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 28px var(--accent-soft);
}

html[data-perf="clean"] .chat-main,
html[data-perf="clean"] .srv-main {
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.25);
}

html[data-perf="clean"] .server-pill.active {
  box-shadow: 0 0 18px var(--accent-soft);
}

/* Cards da página Desempenho */
.perf-mode-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  margin-bottom: 12px;
  text-align: left;
  width: 100%;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.perf-mode-card:hover {
  background: var(--bg-hover);
}
.perf-mode-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.perf-mode-card .perf-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bg-3);
  color: var(--accent);
  flex-shrink: 0;
}
.perf-mode-card strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.perf-mode-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.perf-bullets {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.perf-bullets li { margin-bottom: 4px; }
.perf-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-3);
  font-size: 13px;
  color: var(--text-muted);
}
.perf-status.on {
  color: var(--accent);
  background: var(--accent-soft);
}