/*
 * © 2026 Ael-Host — feito por Fakkwel. Todos os direitos reservados.
 * Proibida a cópia, revenda ou distribuição deste código sem autorização do autor.
 */
/* =========================================================================
   Personalização extra: fundo em vídeo/GIF, sons, perfil (capa, moldura, bio),
   cor + emoji por bot e o editor de comandos sem código.
   (arquivo separado de propósito: não mexe nos outros CSS)
   ========================================================================= */

/* ---------- fundo com vídeo ou GIF ---------- */
#bg-media { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s; overflow: hidden; }
#bg-media.on { opacity: 1; }
#bg-media > video, #bg-media > img, #bg-media > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#bg-media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--dim, .35)); }
#bg-media .bg-media-fallback { position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, var(--accent-soft), transparent 55%), radial-gradient(circle at 85% 80%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%); }

.bgv-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raise); margin-bottom: 14px; }
.bgv-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: repeating-linear-gradient(45deg, var(--raise-2) 0 10px, transparent 10px 20px), var(--bg-2); display: grid; place-items: center; color: var(--faint); }
.bgv-thumb video, .bgv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgv-thumb .tag { position: absolute; left: 6px; bottom: 6px; z-index: 1; font: 600 10px var(--font-mono); letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; }
.bgv-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bgv-info b { font-family: var(--font-display); }
.bgv-info .hint { margin: 0; }
@media (max-width: 560px) {
  .bgv-card { grid-template-columns: 1fr; }
}

/* ---------- sons ---------- */
.snd-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.snd-pack { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raise); cursor: pointer; color: inherit; transition: border-color .15s, background .15s, transform .15s; min-width: 0; }
.snd-pack:hover { border-color: var(--line-2); transform: translateY(-1px); }
.snd-pack.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.snd-pack .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--raise-2); color: var(--accent); margin-bottom: 4px; }
.snd-pack .ic svg { width: 17px; height: 17px; }
.snd-pack b { font-size: 13.5px; }
.snd-pack span.small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.snd-pack .wave { display: flex; align-items: flex-end; gap: 2px; height: 14px; position: absolute; top: 14px; right: 12px; opacity: .5; }
.snd-pack .wave i { width: 3px; border-radius: 2px; background: var(--accent); }
.snd-pack.on .wave { opacity: 1; }
.snd-pack.on .wave i { animation: sndBar .9s ease-in-out infinite alternate; }
.snd-pack .wave i:nth-child(2) { animation-delay: -.3s; }
.snd-pack .wave i:nth-child(3) { animation-delay: -.6s; }
@keyframes sndBar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.snd-events { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 6px; }
.snd-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.snd-ev:last-child { border-bottom: 0; }
.snd-ev > svg { width: 16px; height: 16px; color: var(--muted); }
.snd-ev .t { font-size: 13px; min-width: 0; }
.snd-ev .t small { display: block; font-size: 11px; color: var(--faint); }
.snd-ev .pv { display: flex; gap: 4px; }
.snd-mute { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); margin-bottom: 12px; }
.snd-mute.on { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 10%, transparent); }
.snd-mute .grow b { display: block; font-size: 13px; }
.snd-mute .grow span { font-size: 12px; color: var(--muted); }
.snd-off-note { opacity: .55; pointer-events: none; }
@media (max-width: 760px) {
  .snd-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .snd-ev { grid-template-columns: auto minmax(0, 1fr) auto; }
  .snd-ev .pv { grid-column: 2 / 4; grid-row: 2; }
}

/* ---------- molduras animadas da foto ---------- */
.av-frame { --fw: 3.5px; position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: var(--fw); isolation: isolate; flex: none; vertical-align: middle; }
.av-frame.sm { --fw: 2px; }
.av-frame.lg { --fw: 5px; }
.av-frame > .avatar { position: relative; z-index: 1; box-shadow: 0 0 0 1.5px var(--panel-solid, #111); }
.av-frame.sm > .avatar { box-shadow: 0 0 0 1px var(--panel-solid, #111); }
.av-frame::before, .av-frame::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.av-frame::before { inset: 0; z-index: 0; }
.av-frame::after { inset: -3px; z-index: -1; opacity: .7; filter: blur(6px); }

.av-frame[data-frame="gradient"]::before { background: conic-gradient(from 0deg, var(--accent), #a78bfa, #22d3ee, var(--accent)); animation: avSpin 4s linear infinite; }
.av-frame[data-frame="gradient"]::after { background: conic-gradient(from 0deg, var(--accent), #a78bfa, #22d3ee, var(--accent)); opacity: .35; animation: avSpin 4s linear infinite; }

.av-frame[data-frame="neon"]::before { background: var(--accent); box-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent); animation: avNeon 1.8s ease-in-out infinite; }
.av-frame[data-frame="neon"]::after { background: var(--accent); animation: avNeon 1.8s ease-in-out infinite; }

.av-frame[data-frame="ice"]::before { background: conic-gradient(from 200deg, #e0f2fe, #7dd3fc, #ffffff, #38bdf8, #bae6fd, #e0f2fe); animation: avSpin 7s linear infinite; }
.av-frame[data-frame="ice"]::after { background: #7dd3fc; opacity: .45; animation: avBreath 3s ease-in-out infinite; }

.av-frame[data-frame="orbit"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 70%, white); }
.av-frame[data-frame="orbit"]::after { inset: -2px; filter: none; opacity: 1; z-index: 2; background: radial-gradient(circle at 50% 0, #fff 0 2px, var(--accent) 2.5px 3.5px, transparent 4px); animation: avSpin 2.6s linear infinite; }

.av-frame[data-frame="gold"]::before { background: conic-gradient(from 0deg, #fde68a, #b45309, #fbbf24, #fff7cc, #d97706, #fde68a); animation: avSpin 5s linear infinite; }
.av-frame[data-frame="gold"]::after { background: #f5b301; opacity: .5; animation: avBreath 2.4s ease-in-out infinite; }

.av-frame[data-frame="fire"]::before { background: conic-gradient(from 0deg, #fde047, #f97316, #dc2626, #f97316, #fde047, #ef4444, #fde047); animation: avSpin 1.6s linear infinite; }
.av-frame[data-frame="fire"]::after { inset: -5px; background: radial-gradient(circle, #f97316 40%, #dc2626 65%, transparent 72%); opacity: .75; animation: avFlicker .35s steps(2) infinite alternate; }

.av-frame[data-frame="rainbow"]::before { background: conic-gradient(#ef4444, #f97316, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); animation: avSpin 3s linear infinite; }
.av-frame[data-frame="rainbow"]::after { background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #d946ef, #ef4444); opacity: .4; animation: avSpin 3s linear infinite reverse; }

.av-frame[data-frame="ael"]::before { background: conic-gradient(from 90deg, #450a0a, #ef233c, #7f1d1d, #ef233c, #450a0a); animation: avSpin 6s linear infinite; }
.av-frame[data-frame="ael"]::after { inset: -6px; background: radial-gradient(circle, rgba(239, 35, 60, .85) 45%, transparent 70%); opacity: .6; animation: avAel 2.8s ease-in-out infinite; }
.av-frame .av-eye { position: absolute; z-index: 3; right: 2%; top: 2%; width: 30%; height: 18%; min-width: 9px; min-height: 6px; border-radius: 50% / 60%; background: radial-gradient(circle at 50% 50%, #fff 0 12%, #ff4d5e 14% 34%, #7f0010 38% 60%, #1a0003 64%); box-shadow: 0 0 6px #ef233c, 0 0 14px rgba(239, 35, 60, .8); animation: avBlink 4.5s ease-in-out infinite; }
.av-frame.sm .av-eye { display: none; }

/* ----- molduras novas (v3.15) ----- */
.av-frame[data-frame="tracejado"]::before { background: repeating-conic-gradient(var(--accent) 0 14deg, transparent 14deg 24deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw) - 1px), #000 calc(100% - var(--fw))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw) - 1px), #000 calc(100% - var(--fw))); animation: avSpin 9s linear infinite; }
.av-frame[data-frame="tracejado"]::after { display: none; }

.av-frame[data-frame="duplo"]::before { background: conic-gradient(from 0deg, var(--accent) 0 40%, transparent 40% 50%, var(--accent) 50% 90%, transparent 90%); animation: avSpin 3.2s linear infinite; }
.av-frame[data-frame="duplo"]::after { inset: -5px; filter: none; opacity: .9; background: conic-gradient(from 90deg, color-mix(in oklab, var(--accent) 45%, white) 0 18%, transparent 18% 50%, color-mix(in oklab, var(--accent) 45%, white) 50% 68%, transparent 68%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: avSpin 4.5s linear infinite reverse; }

.av-frame[data-frame="radar"]::before { background: conic-gradient(from 0deg, transparent 0 55%, color-mix(in oklab, var(--accent) 35%, transparent) 75%, var(--accent) 99.5%, #fff 100%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent); animation: avSpin 2.2s linear infinite; }
.av-frame[data-frame="radar"]::after { background: var(--accent); opacity: .2; animation: avBreath 2.2s ease-in-out infinite; }

.av-frame[data-frame="aurora"]::before { background: conic-gradient(from 0deg, #22d3ee, #34d399, #a78bfa, #f0abfc, #22d3ee); filter: saturate(1.2); animation: avSpin 8s linear infinite, avHue 6s ease-in-out infinite; }
.av-frame[data-frame="aurora"]::after { background: conic-gradient(from 180deg, #34d399, #a78bfa, #22d3ee, #34d399); opacity: .5; animation: avSpin 8s linear infinite reverse; }

.av-frame[data-frame="pixel"]::before { border-radius: 22%; background: conic-gradient(#ef4444 0 12.5%, #f97316 0 25%, #facc15 0 37.5%, #22c55e 0 50%, #06b6d4 0 62.5%, #6366f1 0 75%, #d946ef 0 87.5%, #ec4899 0); animation: avPixel 2.4s steps(8) infinite; }
.av-frame[data-frame="pixel"] { border-radius: 22%; }
.av-frame[data-frame="pixel"] > .avatar { border-radius: 18%; }
.av-frame[data-frame="pixel"]::after { display: none; }

.av-frame[data-frame="plasma"]::before { background: conic-gradient(from 0deg, #7c3aed, #ec4899, #3b82f6, #a855f7, #7c3aed); animation: avSpin 2.4s linear infinite; }
.av-frame[data-frame="plasma"]::after { inset: -6px; background: radial-gradient(circle, #a855f7 42%, #ec4899 58%, transparent 70%); animation: avPlasma 1.4s ease-in-out infinite alternate; }

.av-frame[data-frame="galaxia"]::before { background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 15%, #fff 0 .8px, transparent 1.3px), radial-gradient(circle at 85% 70%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 35% 85%, #c4b5fd 0 1px, transparent 1.5px), conic-gradient(from 0deg, #0f172a, #4c1d95, #1e3a8a, #701a75, #0f172a); animation: avSpin 14s linear infinite; }
.av-frame[data-frame="galaxia"]::after { background: conic-gradient(#6d28d9, #1d4ed8, #be185d, #6d28d9); opacity: .55; animation: avSpin 14s linear infinite reverse; }

.av-frame[data-frame="cristal"]::before { background: repeating-conic-gradient(from 0deg, #ffffff 0 10deg, #a5f3fc 10deg 20deg, #e0e7ff 20deg 30deg, #67e8f9 30deg 40deg); animation: avSpin 10s linear infinite; }
.av-frame[data-frame="cristal"]::after { background: #a5f3fc; opacity: .5; animation: avBrilho 2.6s ease-in-out infinite; }

.av-frame[data-frame="raio"]::before { background: conic-gradient(from 0deg, #fde047, #60a5fa, #fff, #facc15, #3b82f6, #fde047); animation: avSpin 1.2s linear infinite, avRaio 1.7s steps(1) infinite; }
.av-frame[data-frame="raio"]::after { inset: -4px; background: #60a5fa; animation: avRaio 1.7s steps(1) infinite; }

.av-frame[data-frame="sakura"]::before { background: conic-gradient(from 0deg, #fbcfe8, #f472b6, #fff1f2, #f9a8d4, #fbcfe8); animation: avSpin 9s linear infinite; }
.av-frame[data-frame="sakura"]::after { inset: -7px; filter: none; opacity: 1; z-index: 2; background: radial-gradient(circle at 50% 4%, #f9a8d4 0 2.5px, transparent 3px), radial-gradient(circle at 96% 50%, #fbcfe8 0 2px, transparent 2.5px), radial-gradient(circle at 50% 96%, #f472b6 0 2.5px, transparent 3px), radial-gradient(circle at 4% 50%, #fce7f3 0 2px, transparent 2.5px); animation: avSpin 6s linear infinite; }

.av-frame[data-frame="toxico"]::before { background: conic-gradient(from 0deg, #a3e635, #16a34a, #d9f99d, #22c55e, #a3e635); animation: avSpin 3s linear infinite; }
.av-frame[data-frame="toxico"]::after { inset: -6px; background: radial-gradient(circle, #84cc16 45%, transparent 70%); animation: avAel 1.6s ease-in-out infinite; }

.av-frame[data-frame="sombra"]::before { background: conic-gradient(from 0deg, #000, #3f3f46, #09090b, #52525b, #000); animation: avSpin 7s linear infinite; }
.av-frame[data-frame="sombra"]::after { inset: -8px; background: radial-gradient(circle, rgba(0, 0, 0, .9) 45%, transparent 72%); opacity: .9; animation: avBreath 3.4s ease-in-out infinite; }

.av-frame[data-frame="coroa"]::before { background: conic-gradient(from 0deg, #fde68a, #b45309, #fbbf24, #fff7cc, #d97706, #fde68a); animation: avSpin 6s linear infinite; }
.av-frame[data-frame="coroa"]::after { background: #f5b301; opacity: .45; animation: avBreath 2.4s ease-in-out infinite; }
.av-frame[data-frame="chifres"]::before { background: conic-gradient(from 0deg, #7f1d1d, #ef4444, #450a0a, #dc2626, #7f1d1d); animation: avSpin 5s linear infinite; }
.av-frame[data-frame="chifres"]::after { inset: -5px; background: radial-gradient(circle, rgba(220, 38, 38, .8) 45%, transparent 70%); opacity: .55; animation: avAel 2.6s ease-in-out infinite; }
.av-frame[data-frame="aureola"]::before { background: conic-gradient(from 0deg, #fff, #fef9c3, #fde68a, #fff); animation: avSpin 8s linear infinite; }
.av-frame[data-frame="aureola"]::after { background: #fef08a; opacity: .5; animation: avBreath 3s ease-in-out infinite; }

/* enfeites por cima da foto (coroa, chifres, auréola) */
.av-frame .av-deco { position: absolute; z-index: 3; pointer-events: none; }
.av-frame[data-frame="coroa"] .av-deco { left: 50%; top: -24%; width: 46%; aspect-ratio: 1.6; transform: translateX(-50%) rotate(-8deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff7cc'/%3E%3Cstop offset='.5' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23b45309'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 34 L8 10 L20 22 L32 4 L44 22 L56 10 L60 34 Z' fill='url(%23g)' stroke='%2378350f' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='26' r='3.5' fill='%23ef4444'/%3E%3Ccircle cx='18' cy='28' r='2.5' fill='%2360a5fa'/%3E%3Ccircle cx='46' cy='28' r='2.5' fill='%2360a5fa'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); animation: avCoroa 3s ease-in-out infinite; }
.av-frame[data-frame="chifres"] .av-deco { left: 50%; top: -16%; width: 92%; aspect-ratio: 3.2; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 30'%3E%3Cpath d='M14 30 C10 18 12 8 4 2 C18 6 26 16 26 30 Z' fill='%23dc2626' stroke='%23450a0a' stroke-width='2'/%3E%3Cpath d='M82 30 C86 18 84 8 92 2 C78 6 70 16 70 30 Z' fill='%23dc2626' stroke='%23450a0a' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(239, 68, 68, .7)); }
.av-frame[data-frame="aureola"] .av-deco { left: 50%; top: -20%; width: 70%; aspect-ratio: 3.4; transform: translateX(-50%); border-radius: 50%; border: 3px solid #fde047; box-shadow: 0 0 8px #fde047, inset 0 0 5px #fef08a; animation: avAureola 2.4s ease-in-out infinite; }
.av-frame.sm .av-deco { display: none; }

@keyframes avPixel { to { filter: hue-rotate(360deg); } }
@keyframes avHue { 0%, 100% { filter: hue-rotate(0deg) saturate(1.2); } 50% { filter: hue-rotate(40deg) saturate(1.4); } }
@keyframes avPlasma { from { opacity: .4; transform: scale(.97); } to { opacity: .85; transform: scale(1.06); } }
@keyframes avBrilho { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
@keyframes avRaio { 0%, 86%, 92%, 100% { opacity: .55; } 88%, 94% { opacity: 1; filter: brightness(1.8); } }
@keyframes avCoroa { 0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); } 50% { transform: translateX(-50%) rotate(-5deg) translateY(-2px); } }
@keyframes avAureola { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }

@keyframes avSpin { to { transform: rotate(1turn); } }
@keyframes avNeon { 0%, 100% { opacity: .75; filter: none; } 50% { opacity: 1; filter: brightness(1.35); } }
@keyframes avBreath { 0%, 100% { opacity: .25; transform: scale(.96); } 50% { opacity: .6; transform: scale(1.04); } }
@keyframes avFlicker { from { opacity: .55; transform: scale(.98) translateY(1px); } to { opacity: .9; transform: scale(1.05) translateY(-1px); } }
@keyframes avAel { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes avBlink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
body.no-anim .av-frame::before, body.no-anim .av-frame::after, body.no-anim .av-eye, body.no-anim .av-deco { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .av-frame::before, .av-frame::after, .av-frame .av-eye, .av-frame .av-deco, .snd-pack.on .wave i { animation: none !important; }
}

/* avatar da barra lateral com moldura */
.rail-avatar.has-frame { border: 0; overflow: visible; background: transparent; display: grid; place-items: center; }
.rail-avatar.has-frame .av-frame { --fw: 3px; }
.rail-avatar.has-frame .avatar { width: 28px; height: 28px; font-size: 11px; }

/* ---------- perfil: capa, moldura e bio ---------- */
.profile-cover { isolation: isolate; }
.profile-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .35)); pointer-events: none; z-index: 0; }
.profile-cover .btn-row { z-index: 1; }
.profile-cover .btn-row .btn { position: static; }
.profile-id { align-items: flex-start; }
.profile-id > label { flex: none; }
.profile-id .t { padding-top: 54px; min-width: 0; flex: 1 1 260px; }
.profile-id > .btn { margin-top: 56px; }
@media (max-width: 640px) {
  .profile-id .t { padding-top: 0; flex-basis: 100%; }
  .profile-id > .btn { margin-top: 0; }
}
.profile-id .av-frame.lg { --fw: 6px; cursor: pointer; }
.profile-id .av-frame > .avatar { box-shadow: 0 0 0 2px var(--bg); }
.pf-bio { margin: 6px 0 0; max-width: 62ch; color: var(--text-2, var(--text)); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-bio.empty { color: var(--faint); font-style: italic; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.frame-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raise); cursor: pointer; color: inherit; font-size: 12px; position: relative; transition: border-color .15s, transform .15s; }
.frame-opt:hover { transform: translateY(-1px); border-color: var(--line-2); }
.frame-opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.frame-opt.locked { opacity: .7; }
.frame-opt .gem { position: absolute; top: 6px; right: 6px; font-size: 11px; }
.frame-opt .avatar { width: 44px; height: 44px; font-size: 16px; }
.frame-opt .none-ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--line-2); }
.frame-opt .none-ring .avatar { width: 42px; height: 42px; }
.bio-count { float: right; font: 11px var(--font-mono); color: var(--faint); }
.bio-count.warn { color: var(--warn, #f59e0b); }

/* recorte da capa */
.crop-stage { position: relative; width: 100%; aspect-ratio: 3 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); cursor: grab; touch-action: none; user-select: none; border: 1px solid var(--line); }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; pointer-events: none; }
.crop-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); border-radius: inherit; background: linear-gradient(transparent 33%, rgba(255,255,255,.07) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgba(255,255,255,.07) 66% calc(66% + 1px), transparent calc(66% + 1px)); }
.crop-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.crop-hint svg { width: 14px; height: 14px; }

/* ---------- cartão de usuário (suporte, loja) ---------- */
.ucard { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel-solid); }
.ucard-banner { height: 74px; background: linear-gradient(120deg, var(--accent-soft), color-mix(in oklab, var(--violet, #a78bfa) 28%, transparent)); position: relative; }
.ucard-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ucard-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 0 14px 12px; }
.ucard-av { margin-top: -26px; position: relative; z-index: 1; }
.ucard-av .avatar { width: 56px; height: 56px; font-size: 20px; box-shadow: 0 0 0 3px var(--panel-solid); }
.ucard-av .av-frame { --fw: 4px; }
.ucard-av .av-frame > .avatar { box-shadow: 0 0 0 1.5px var(--panel-solid); }
.ucard-main { padding-top: 8px; min-width: 0; }
.ucard-main h4 { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 15px var(--font-display); }
.ucard-main .sub { font: 12px var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucard-bio { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2, var(--text)); white-space: pre-wrap; overflow-wrap: anywhere; }
.ucard-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ucard-stats .badge { height: 22px; }
.ucard .plan-badge { font-size: 10.5px; height: 20px; }
/* versão compacta (topo do chamado) */
.ucard.mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-radius: 0; border-width: 0 0 1px; background: color-mix(in oklab, var(--panel-solid) 70%, transparent); }
.ucard.mini .ucard-banner { height: auto; min-height: 100%; }
.ucard.mini .ucard-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, color-mix(in oklab, var(--panel-solid) 92%, transparent)); }
.ucard.mini .ucard-body { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 10px 14px 10px 0; margin-left: -34px; position: relative; }
.ucard.mini .ucard-av { margin-top: 0; }
.ucard.mini .ucard-av .avatar { width: 48px; height: 48px; font-size: 17px; }
.ucard.mini .ucard-main { padding-top: 0; }
.ucard.mini .ucard-bio { grid-column: 2; margin-top: 3px; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ucard.mini .ucard-stats { grid-column: 2; margin-top: 6px; }
.ucard.mini .ucard-stats .badge { height: 20px; font-size: 11px; }
@media (max-width: 640px) {
  .ucard.mini { grid-template-columns: 56px minmax(0, 1fr); }
  .ucard.mini .ucard-body { margin-left: -28px; padding: 8px 10px 8px 0; }
  .ucard.mini .ucard-av .avatar { width: 40px; height: 40px; font-size: 15px; }
  .ucard.mini .ucard-bio { -webkit-line-clamp: 1; }
}
.store-seller { margin-top: 14px; }
.store-seller .ucard-banner { height: 64px; }

/* ---------- cor + emoji por bot ---------- */
.bot-av.tint { background: linear-gradient(135deg, color-mix(in oklab, var(--bc) 78%, white), var(--bc)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.bot-av.emo .bot-emo { font-size: 1.6em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.bot-av.emo:not(.tint) { background: var(--raise-2); }
.bot-av.ph.ring { box-shadow: 0 0 0 2px var(--panel-solid, #111), 0 0 0 4px var(--bc); }
.avatar.sm.bot-av.ph.ring { box-shadow: 0 0 0 1.5px var(--panel-solid, #111), 0 0 0 3px var(--bc); }
.bot-head .bot-av.ph.ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--bc); }
.bot-head .bot-av.emo .bot-emo { font-size: 1.5em; }
.side-bot-av { position: relative; flex: none; display: inline-grid; }
.side-bot-av .avatar { width: 22px; height: 22px; font-size: 10px; border-radius: 7px; }
.side-bot-av .avatar.ph.ring { box-shadow: 0 0 0 1.5px var(--panel-solid, #111), 0 0 0 3px var(--bc); }
.side-bot-av .dot-status { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--panel-solid, #111); }
.side-bot-av .dot-status.online { box-shadow: 0 0 0 2px var(--panel-solid, #111); }
.bot-card.has-color { border-color: color-mix(in oklab, var(--bc) 35%, var(--line)); }
.bot-card.has-color::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--bc), transparent 85%); }
.bot-card.has-color:hover { border-color: color-mix(in oklab, var(--bc) 65%, var(--line)); }
.bot-row.has-color { box-shadow: inset 3px 0 0 var(--bc); }

.look-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.look-prev { padding: 10px; border-radius: var(--r-lg); background: var(--raise); border: 1px solid var(--line); display: grid; place-items: center; }
.look-prev .avatar.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.look-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.look-fields .label { font-size: 12px; font-weight: 600; color: var(--muted); }
.look-colors .swatch { width: 28px; height: 28px; }
.swatch.none { background: repeating-linear-gradient(135deg, var(--raise-2) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--line-2); }
.look-emojis { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.look-emo { width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: var(--raise); cursor: pointer; font-size: 18px; display: grid; place-items: center; padding: 0; transition: transform .12s, border-color .12s; }
.look-emo:hover { transform: scale(1.1); }
.look-emo.on { border-color: var(--accent); background: var(--accent-soft); }
.look-emo.none { font: 600 12px var(--font-ui); color: var(--muted); }
.look-emo-input { width: 70px; height: 34px; text-align: center; font-size: 15px; padding: 0 6px; }
@media (max-width: 520px) {
  .look-pick { grid-template-columns: 1fr; }
  .look-prev { justify-self: start; }
  .look-emo { width: 36px; height: 36px; }
}
.nb-look { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.nb-look > b { display: block; margin-bottom: 10px; font-size: 13px; }

/* ---------- editor de comandos sem código ---------- */
.cmd-item .cmd-ov { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font: 600 10.5px var(--font-ui); color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }
.cmd-ov svg { width: 11px; height: 11px; }
.ce-head .cmd-ov { font: 600 11px var(--font-ui); color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; display: inline-flex; gap: 4px; align-items: center; }
.ce-name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.ce-name > span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line-2); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--raise-2); color: var(--muted); font-size: 14px; }
.ce-name > .input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }
.cmd-item .was { font: 11px var(--font-mono); color: var(--faint); margin-left: 4px; }
.cmd-item.hidden-cmd .name { opacity: .75; }
.ce-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--raise); border: 1px solid var(--line); margin-bottom: 14px; }
.ce-head .mono { font-size: 15px; font-weight: 600; }
.ce-head .grow { min-width: 0; }
.ce-head .grow small { display: block; color: var(--faint); font: 11px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; min-height: 42px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--input-bg, var(--raise)); cursor: text; }
.chips-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chips-input input { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent; height: 28px; padding: 0 4px; font: 13px var(--font-mono); }
.chip-x { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--raise-2); border: 1px solid var(--line); font: 12.5px var(--font-mono); }
.chip-x.orig { border-style: dashed; }
.chip-x button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.chip-x button:hover { background: var(--raise); color: var(--bad, #ef4444); }
.chip-x button svg { width: 12px; height: 12px; }
.perm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.perm-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raise); cursor: pointer; text-align: left; color: inherit; font-size: 12.5px; min-width: 0; }
.perm-opt svg { width: 17px; height: 17px; color: var(--muted); }
.perm-opt b { font-size: 13px; }
.perm-opt small { color: var(--faint); font-size: 11px; line-height: 1.3; }
.perm-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.perm-opt.on svg { color: var(--accent); }
.perm-opt:disabled { opacity: .45; cursor: not-allowed; }
.ce-note { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; }
.ce-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ce-foot-split { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.ce-foot-split .grow { flex: 1; }
.vip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 600 10.5px var(--font-mono); margin-left: 4px; }
.vip-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; margin: 8px 0 12px; }
.vip-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); font: 13px var(--font-mono); }
.vip-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-foot-split > .btn { flex: 1; justify-content: center; }
  .ce-foot-split .grow { display: none; }
}

[data-sound-panel] .hint svg { width: 14px; height: 14px; vertical-align: -2px; }
.store-seller > p { display: flex; align-items: center; gap: 6px; }
.store-seller > p svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .cmd-item { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 12px; }
  .cmd-item > .name { grid-column: 1; grid-row: 1; flex-wrap: wrap; }
  .cmd-item > label { grid-column: 2; grid-row: 1; }
  .cmd-item > .desc { grid-column: 1 / -1; }
  .cmd-item > .flags { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; }
  .cmd-item [data-cmd-edit] { margin-left: auto; }
}
/* a bio vazia NÃO é um "estado vazio" de painel (a classe .empty global dava 48px de espaço) */
.pf-bio.empty { padding: 0; text-align: left; border: 0; background: none; min-height: 0; display: block; }

/* desempenho: na escolha de moldura, as prévias só animam com o mouse em cima (e a escolhida) */
.frame-opt:not(.on):not(:hover) .av-frame::before, .frame-opt:not(.on):not(:hover) .av-frame::after,
.frame-opt:not(.on):not(:hover) .av-eye, .frame-opt:not(.on):not(:hover) .av-deco { animation-play-state: paused; }