/* ─── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  --bg: #07070f;
  --bg-2: #0e0e1c;
  --bg-3: #141428;
  --surface: #12122040;
  --surface-solid: #161626;
  --border: #2a2a4a;
  --border-glow: #6d28d9;
  --purple: #8b5cf6;
  --purple-dark: #6d28d9;
  --purple-light: #a78bfa;
  --purple-bright: #c084fc;
  --pink: #e879f9;
  --pink-glow: rgba(232,121,249,0.15);
  --gray: #6b7280;
  --gray-light: #9ca3af;
  --text: #e8e8f0;
  --text-muted: #8888aa;
  --text-dim: #7a7a9e;
  --green: #22c55e;
  --red: #ef4444;
  --gold: #fbbf24;
  --blue: #3b82f6;
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --glow: 0 0 20px rgba(139,92,246,0.25);
  --glow-strong: 0 0 40px rgba(139,92,246,0.5);
  --glow-pink: 0 0 30px rgba(232,121,249,0.3);
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;min-height:100vh;overflow-x:hidden;width:100%}
a{color:var(--purple-light);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--purple-bright)}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit}
ul{list-style:none}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--purple-dark);border-radius:3px}

/* ─── PARTICLES ──────────────────────────────────────────────────────────── */
.scanlines{position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);pointer-events:none;z-index:9999}
.particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:var(--purple);animation:float linear infinite}
@keyframes float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) scale(1);opacity:0}}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.main-content{padding-top:64px;position:relative;z-index:1}
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.page-inner{padding-top:3rem;padding-bottom:4rem}

/* ─── GRADIENT TEXT ──────────────────────────────────────────────────────── */
.gradient-text{background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── NAVBAR ─────────────────────────────────────────────────────────────── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(7,7,15,0.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);height:64px;transition:var(--transition)}
.navbar.scrolled{background:rgba(7,7,15,0.98);box-shadow:0 4px 32px rgba(0,0,0,0.5)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:0.6rem;color:var(--text);flex-shrink:0;font-family:var(--font-display)}
/* Logo do olho que segue o mouse na navbar (base fixa + pupila que se move por cima) */
.eye-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0}
.eye-logo-base{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.eye-logo-pupil{position:absolute;top:50%;left:50%;width:38%;height:38%;object-fit:contain;pointer-events:none;user-select:none;transform:translate(-50%,-50%);transition:transform .05s linear}
.nav-logo-eye:hover .eye-logo-base{filter:drop-shadow(0 0 6px rgba(139,92,246,.6))}
.logo-dc{background:linear-gradient(135deg,var(--purple),var(--pink));color:white;font-family:var(--font-display);font-weight:700;font-size:1.1rem;padding:0.3rem 0.6rem;border-radius:6px;letter-spacing:1px;box-shadow:var(--glow)}
.logo-dc.big{font-size:2rem;padding:0.5rem 1rem}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:2px;text-transform:uppercase}
.nav-links{display:flex;gap:0.25rem;flex:1}
.nav-link{padding:0.4rem 0.8rem;border-radius:var(--radius);font-size:0.9rem;color:var(--text-muted);transition:var(--transition);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--purple-light);background:rgba(139,92,246,0.1)}
.nav-vip{color:var(--gold)!important}
.nav-vip:hover{background:rgba(251,191,36,0.1)!important;color:var(--gold)!important}
.nav-actions{display:flex;align-items:center;gap:0.75rem;margin-left:auto;flex-shrink:0}
.nav-user{display:flex;align-items:center;gap:0.5rem;padding:0.3rem 0.75rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:var(--transition)}
.nav-user:hover{border-color:var(--purple);background:rgba(139,92,246,0.1)}
.nav-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.nav-username{font-size:0.875rem;color:var(--text);font-weight:500}
.role-tag{font-size:0.75rem;font-family:var(--font-display)}
.notif-btn{position:relative;font-size:1.2rem;padding:0.4rem;border-radius:var(--radius);transition:var(--transition);display:flex;align-items:center}
.notif-btn:hover{background:rgba(139,92,246,0.15)}
.notif-badge{position:absolute;top:-2px;right:-4px;background:var(--red);color:white;font-size:0.65rem;font-weight:700;padding:0 4px;border-radius:10px;min-width:16px;text-align:center}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:0.3rem 0.6rem;border-radius:var(--radius);cursor:pointer;margin-left:auto}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.6rem 1.2rem;border-radius:var(--radius);font-weight:600;font-size:0.9rem;cursor:pointer;border:1px solid transparent;transition:var(--transition);text-align:center;white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:white;border-color:var(--purple);box-shadow:0 4px 15px rgba(139,92,246,0.3)}
.btn-primary:hover{box-shadow:0 6px 25px rgba(139,92,246,0.5);color:white}
.btn-purple{background:linear-gradient(135deg,#7c3aed,var(--pink));color:white;border-color:#7c3aed;box-shadow:0 4px 15px rgba(232,121,249,0.3)}
.btn-purple:hover{box-shadow:0 6px 25px rgba(232,121,249,0.5);color:white}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--purple);color:var(--purple-light);background:rgba(139,92,246,0.08)}
.btn-discord{background:#5865f2;color:white;border-color:#5865f2}
.btn-discord:hover{background:#4752c4;color:white;box-shadow:0 4px 20px rgba(88,101,242,0.4)}
.btn-admin{background:rgba(139,92,246,0.15);color:var(--purple-light);border-color:var(--purple-dark)}
.btn-admin:hover{background:rgba(139,92,246,0.25);color:white}
.btn-green{background:rgba(34,197,94,0.15);color:var(--green);border-color:rgba(34,197,94,0.3)}
.btn-green:hover{background:var(--green);color:white}
.btn-red{background:rgba(239,68,68,0.15);color:var(--red);border-color:rgba(239,68,68,0.3)}
.btn-red:hover{background:var(--red);color:white}
.btn-lg{padding:0.85rem 2rem;font-size:1.05rem;border-radius:var(--radius-lg)}
.btn-sm,.btn-xs{padding:0.3rem 0.7rem;font-size:0.8rem}
.btn-xs{padding:0.2rem 0.5rem;font-size:0.75rem}
.btn-full{width:100%;justify-content:center}

/* ─── ALERTS ─────────────────────────────────────────────────────────────── */
.alert{padding:0.875rem 1.25rem;border-radius:var(--radius);margin:1rem 0;font-size:0.9rem;border:1px solid;display:flex;align-items:center;gap:0.75rem}
.alert-error{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#fca5a5}
.alert-success{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:#86efac}
.alert-warning{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.3);color:#fde68a}
.alert-link{color:inherit;font-weight:700;text-decoration:underline}

/* ─── SECTION TITLE ──────────────────────────────────────────────────────── */
.section-title{font-family:var(--font-display);font-size:2rem;font-weight:700;text-align:center;margin-bottom:2.5rem}
.page-head{margin-bottom:2rem}
.page-head h1{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--purple-light)}
.page-head p{color:var(--text-muted);margin-top:0.25rem}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero{min-height:90vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:2rem}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 60% 50%,rgba(109,40,217,0.2) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 20% 50%,rgba(232,121,249,0.1) 0%,transparent 60%)}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none' stroke='%238b5cf6' stroke-width='0.2' stroke-opacity='0.15'/%3E%3C/svg%3E") repeat;opacity:0.4}
.hero-content{max-width:620px;position:relative;z-index:2;animation:fadeInLeft 0.8s ease}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.3);padding:0.4rem 1rem;border-radius:100px;font-size:0.85rem;color:var(--purple-light);font-family:var(--font-mono);letter-spacing:1px;margin-bottom:1.25rem}
.hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.1;margin-bottom:1rem}
.hero-sub{color:var(--text-muted);font-size:1.1rem;margin-bottom:1.5rem;max-width:480px}
.hero-server{display:inline-flex;align-items:center;gap:0.75rem;background:var(--bg-3);border:1px solid var(--border);padding:0.5rem 1rem;border-radius:100px;margin-bottom:2rem;font-size:0.9rem}
.server-ip{font-family:var(--font-mono);color:var(--purple-light);font-size:0.85rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem}
.hero-visual{position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:2;animation:fadeInRight 0.8s ease}
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:280px}
.city-block{height:40px;background:linear-gradient(to top,var(--purple-dark),transparent);border-radius:4px;animation:cityPulse 3s ease-in-out infinite}
@keyframes cityPulse{0%,100%{opacity:0.4;transform:scaleY(0.7)}50%{opacity:1;transform:scaleY(1)}}
.stats-float{position:absolute;bottom:-60px;left:0;right:0;display:flex;gap:0.75rem;justify-content:center}
.stat-chip{background:rgba(14,14,28,0.9);border:1px solid var(--border);padding:0.75rem 1.25rem;border-radius:var(--radius-lg);text-align:center;backdrop-filter:blur(10px)}
.stat-n{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--purple-bright)}

/* ─── FEATURES ───────────────────────────────────────────────────────────── */
.features-section{padding:5rem 0;position:relative;z-index:1}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.feature-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;transition:var(--transition);animation:fadeInUp 0.6s ease both}
.feature-card:hover{border-color:var(--purple);transform:translateY(-4px);box-shadow:var(--glow)}
.feature-icon{font-size:2.5rem;margin-bottom:1rem}
.feature-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--purple-light);margin-bottom:0.5rem}
.feature-card p{color:var(--text-muted);font-size:0.9rem}

/* ─── ONLINE SECTION ─────────────────────────────────────────────────────── */
.online-section{padding:3rem 0;position:relative;z-index:1}
.online-grid{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}
.player-chip{display:inline-flex;align-items:center;gap:0.5rem;background:var(--bg-2);border:1px solid var(--border);padding:0.4rem 0.85rem;border-radius:100px;font-size:0.85rem}
.player-chip .lvl{color:var(--purple-light);font-size:0.75rem}

/* ─── STATUS DOTS ────────────────────────────────────────────────────────── */
.server-dot,.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.online{background:var(--green);box-shadow:0 0 6px var(--green)}
.offline{background:var(--red);box-shadow:0 0 6px var(--red)}

/* ─── AUTH PAGE ──────────────────────────────────────────────────────────── */
.auth-page{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1}
.auth-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem;width:100%;max-width:480px;box-shadow:var(--shadow);position:relative;z-index:2}

/* ── Campo de senha com botão de mostrar/ocultar ("olhinho") ────────────── */
.pwd-field-wrap{position:relative}
.pwd-field-wrap input{padding-right:2.75rem}
.pwd-toggle-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.1rem;line-height:1;padding:.35rem;opacity:.75;transition:opacity .15s}
.pwd-toggle-btn:hover{opacity:1}

/* ── Personagens cartoon da tela de login ────────────────────────────────
   3 bonequinhos em CSS puro (nada de arte de terceiros) espiando por trás
   do card, seguindo o mouse com os olhos, reagindo ao nick/senha e virando
   de costas quando a senha fica visível. */
.login-chars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.login-char{position:absolute;bottom:-18px;width:110px;height:170px;transition:transform .3s ease}
.lc-left{left:2%}
.lc-right{right:2%}
.lc-center{left:50%;bottom:-40px;transform:translateX(-50%);opacity:.55;filter:blur(.3px)}
@media (max-width:900px){ .lc-left{left:-18px} .lc-right{right:-18px} .lc-center{display:none} }
@media (max-width:640px){ .login-char{display:none} }

.lc-front,.lc-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;transition:opacity .25s ease;backface-visibility:hidden}
.lc-back{opacity:0}
.login-char.turned{transform:scale(1.03)}
.login-char.turned .lc-front{opacity:0}
.login-char.turned .lc-back{opacity:1}
.login-char.lc-peek.turned .lc-front{opacity:.85;transform:rotateY(35deg)}
.login-char.lc-peek.turned .lc-back{opacity:.3}

.lc-body{width:78px;height:80px;border-radius:24px 24px 0 0;background:var(--body);margin-top:-6px}
.lc-head{position:relative;width:62px;height:62px;border-radius:50%;background:var(--skin);box-shadow:inset 0 -6px 10px rgba(0,0,0,.08)}
.lc-hair{position:absolute;top:-8px;left:-2px;right:-2px;height:26px;border-radius:50% 50% 0 0;background:var(--hair)}
.lc-cap{position:absolute;top:-14px;left:-8px;right:-8px;height:24px;border-radius:50% 50% 0 0;background:var(--acc);z-index:2}
.lc-cap::after{content:'';position:absolute;bottom:-4px;left:6px;width:34px;height:8px;border-radius:0 0 8px 8px;background:var(--acc)}
.lc-band{position:absolute;top:6px;left:-4px;right:-4px;height:11px;background:var(--acc);z-index:2}

.lc-eye{position:absolute;top:24px;width:15px;height:15px;border-radius:50%;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;transition:height .18s,top .18s}
.lc-eye-l{left:9px}
.lc-eye-r{right:9px}
.lc-pupil{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#151018;transition:transform .06s linear}
.lc-brow{position:absolute;top:15px;width:15px;height:3px;border-radius:2px;background:var(--hair);transition:transform .2s}
.lc-brow-l{left:8px;transform:rotate(-6deg)}
.lc-brow-r{right:8px;transform:rotate(6deg)}
.lc-mouth{position:absolute;top:45px;left:50%;width:16px;height:5px;margin-left:-8px;border-radius:0 0 8px 8px;border-bottom:2.5px solid rgba(0,0,0,.35);transition:all .2s}

/* Focando no nick: olhos arregalam e o personagem "inclina" (rotate leve) pra baixo, prestando atenção */
.login-char.lc-focus{transform:translateY(-4px) rotate(-2deg)}
.login-char.lc-focus .lc-eye{height:17px;top:23px}
.login-char.lc-focus .lc-brow{transform:rotate(0) translateY(-1px)}

/* Digitando a senha: sorriso sacana + sobrancelha erguida, "eu sei sua senha" */
.login-char.lc-sneaky .lc-brow-r{transform:rotate(-14deg) translateY(-3px)}
.login-char.lc-sneaky .lc-mouth{width:20px;height:8px;margin-left:-10px;border-bottom:2.5px solid rgba(0,0,0,.4);border-radius:0 0 12px 4px;transform:rotate(-4deg)}

/* De costas: só o "capacete" de cabelo visto por trás, sem rosto */
.lc-back-head{width:62px;height:62px;border-radius:50%;background:var(--hair);opacity:.9}
.lc-back-body{width:78px;height:80px;border-radius:24px 24px 0 0;background:var(--body);margin-top:-6px}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-header h1{font-family:var(--font-display);font-size:1.8rem;font-weight:700;margin-bottom:0.5rem}
.auth-header p{color:var(--text-muted);font-size:0.9rem}
.login-methods{display:flex;flex-direction:column;gap:1rem}
.divider{text-align:center;position:relative;color:var(--text-dim);font-size:0.85rem}
.divider::before,.divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
.divider::before{left:0}
.divider::after{right:0}
.auth-note{text-align:center;color:var(--text-muted);font-size:0.85rem;margin-top:1.5rem}

/* ─── FORMS ──────────────────────────────────────────────────────────────── */
.auth-form,.admin-form{display:flex;flex-direction:column;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:0.4rem}
.form-group label{font-size:0.875rem;font-weight:500;color:var(--text-muted)}
.form-group input,.form-group select,.form-group textarea{background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:0.65rem 0.875rem;border-radius:var(--radius);font-size:16px;transition:var(--transition);width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-dim)}
.input-disabled{opacity:0.6;cursor:not-allowed}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.select-sm{background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:0.3rem 0.5rem;border-radius:var(--radius);font-size:0.8rem}

/* ─── WHITELIST ──────────────────────────────────────────────────────────── */
.wl-steps{display:flex;align-items:center;margin:2rem 0;gap:0}
.wl-step{display:flex;flex-direction:column;align-items:center;gap:0.3rem;flex:1;font-size:0.8rem;color:var(--text-dim);transition:var(--transition)}
.wl-step-num{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;transition:var(--transition)}
.wl-step.active .wl-step-num{border-color:var(--purple);background:var(--purple);color:white;box-shadow:var(--glow)}
.wl-step.active{color:var(--text)}
.wl-step.done .wl-step-num{border-color:var(--green);background:var(--green);color:white}
.wl-step-line{flex:1;height:2px;background:var(--border)}
.wl-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;margin:1rem 0;animation:fadeInUp 0.4s ease}
.wl-card h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:var(--purple-light)}
.wl-card .form-group{margin-bottom:1rem}
.wl-progress-bar{height:6px;background:var(--border);border-radius:3px;margin:0.75rem 0 1.5rem;overflow:hidden}
.wl-progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:3px;transition:width 0.5s ease}
.wl-question-box{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;position:relative}
.wl-q-label{font-size:0.8rem;color:var(--text-dim);margin-bottom:0.5rem;font-family:var(--font-mono)}
.wl-question{font-size:1.05rem;font-weight:500;color:var(--text);line-height:1.5}
.wl-record-area{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;background:var(--bg-3);border-radius:var(--radius-lg);margin-bottom:1rem}
.record-status{font-size:0.9rem;color:var(--text-muted)}
.btn-record{display:flex;align-items:center;gap:0.75rem;padding:0.875rem 2rem;background:rgba(139,92,246,0.15);border:2px solid var(--purple);color:var(--purple-light);border-radius:100px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition)}
.btn-record:hover{background:rgba(139,92,246,0.25)}
.record-dot{width:12px;height:12px;border-radius:50%;background:var(--red);transition:var(--transition)}
.record-dot.recording{animation:blink 0.8s ease infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 8px var(--red)}50%{opacity:0.4;box-shadow:none}}
.record-time{font-family:var(--font-mono);font-size:1.2rem;color:var(--purple-light)}
.audio-preview audio{width:100%;margin-top:0.5rem}
.wl-nav-btns{display:flex;gap:1rem;justify-content:space-between;margin-top:1rem}
.wl-summary{display:flex;flex-direction:column;gap:0.5rem;margin:1rem 0}
.summary-item{display:flex;gap:0.75rem;padding:0.5rem 0.75rem;background:var(--bg-3);border-radius:var(--radius);font-size:0.85rem}
.q-idx{color:var(--text-dim);font-weight:700;flex-shrink:0}
.q-status{margin-left:auto;flex-shrink:0}

/* ─── MIC TEST ───────────────────────────────────────────────────────────── */
.mic-test{text-align:center;padding:2rem;border:2px dashed var(--border);border-radius:var(--radius-xl);margin:1.5rem 0;transition:var(--transition)}
.mic-test:hover{border-color:var(--purple)}
.mic-icon{font-size:3rem;margin-bottom:0.75rem}
.mic-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:50px;margin-top:1rem}
.mic-bar{width:6px;height:4px;background:var(--border);border-radius:3px;transition:height 0.1s}

/* ─── STATUS BANNERS ─────────────────────────────────────────────────────── */
.status-banner{text-align:center;padding:3rem;border-radius:var(--radius-xl);border:1px solid;max-width:600px;margin:2rem auto}
.status-approved{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.3)}
.status-rejected{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3)}
.status-pending{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.3)}
.status-phase2{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.3)}
.status-icon{font-size:3rem;margin-bottom:1rem}
.status-banner h2{font-family:var(--font-display);font-size:1.75rem;margin-bottom:1rem}
.status-banner p{color:var(--text-muted);margin-bottom:0.75rem}
.status-banner code{background:var(--bg-3);padding:0.25rem 0.75rem;border-radius:var(--radius);font-family:var(--font-mono);color:var(--purple-light)}

/* ─── DASHBOARD ──────────────────────────────────────────────────────────── */
.dashboard-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;padding:1.5rem 2rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl)}
.dash-user{display:flex;align-items:center;gap:1rem}
.dash-avatar{width:72px;height:72px;border-radius:50%;border:3px solid var(--purple);object-fit:cover}
.dash-user h1{font-family:var(--font-display);font-size:1.75rem;font-weight:700}
.dash-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.role-badge,.nick-badge{display:inline-flex;align-items:center;gap:0.3rem;padding:0.25rem 0.75rem;border-radius:100px;border:1px solid;font-size:0.8rem;font-weight:600;margin-right:0.5rem;margin-top:0.4rem}
.nick-badge{background:rgba(139,92,246,0.1);color:var(--purple-light);border-color:rgba(139,92,246,0.3)}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.dash-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;transition:var(--transition)}
.dash-card:hover{border-color:var(--purple-dark)}
.dash-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--purple-light);margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
.char-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.char-stat{background:var(--bg-3);border-radius:var(--radius);padding:0.75rem;display:flex;flex-direction:column}
.char-stat span{font-size:0.75rem;color:var(--text-dim)}
.char-stat strong{font-family:var(--font-display);font-size:1.1rem;color:var(--purple-light)}
.wl-status-badge{padding:0.75rem;border-radius:var(--radius);text-align:center;font-weight:600;font-size:1rem}
.wl-pending{background:rgba(251,191,36,0.1);color:var(--gold)}
.wl-approved{background:rgba(34,197,94,0.1);color:var(--green)}
.wl-rejected{background:rgba(239,68,68,0.1);color:var(--red)}
.wl-phase2{background:rgba(139,92,246,0.1);color:var(--purple-light)}

/* ─── NOTIFICAÇÕES ───────────────────────────────────────────────────────── */
.notif-item,.notif-card{background:var(--bg-3);border-radius:var(--radius);padding:0.75rem;margin-bottom:0.5rem;border-left:3px solid var(--border);font-size:0.85rem}
.notif-card{padding:1rem;margin-bottom:0.75rem}
.notif-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.4rem}
.notif-card-header small{color:var(--text-dim);font-size:0.75rem}
.notif-unread{border-left-color:var(--purple);background:rgba(139,92,246,0.06)}
.notif-whitelist{border-left-color:var(--green)}
.notif-punishment{border-left-color:var(--red)}
.notif-system{border-left-color:var(--blue)}
.notif-info{border-left-color:var(--gray)}

/* ─── ADMIN ──────────────────────────────────────────────────────────────── */
.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:2rem}
.admin-sidebar{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1rem;height:fit-content;position:sticky;top:80px}
.admin-nav-item{display:block;padding:0.65rem 1rem;border-radius:var(--radius);color:var(--text-muted);transition:var(--transition);font-size:0.9rem;margin-bottom:0.25rem}
.admin-nav-item:hover,.admin-nav-item.active{background:rgba(139,92,246,0.15);color:var(--purple-light)}
.admin-content{min-width:0}
.admin-content h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--purple-light);margin-bottom:1.5rem}
.admin-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}
.admin-table{width:100%;border-collapse:collapse;font-size:0.875rem}
.admin-table th{background:var(--bg-3);padding:0.75rem 1rem;text-align:left;color:var(--text-dim);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border)}
.admin-table td{padding:0.75rem 1rem;border-bottom:1px solid rgba(42,42,74,0.5);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:rgba(139,92,246,0.04)}
.tbl-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;margin-right:0.5rem}
.action-btns{display:flex;gap:0.4rem;flex-wrap:wrap}
.status-badge{padding:0.2rem 0.6rem;border-radius:100px;font-size:0.75rem;font-weight:600;text-transform:uppercase}
.status-pending{background:rgba(251,191,36,0.15);color:var(--gold)}
.status-approved{background:rgba(34,197,94,0.15);color:var(--green)}
.status-rejected{background:rgba(239,68,68,0.15);color:var(--red)}
.status-phase2{background:rgba(139,92,246,0.15);color:var(--purple-light)}
.panel-section{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1.5rem}
.panel-section h3{font-family:var(--font-display);font-size:1.15rem;color:var(--purple-light);margin-bottom:1rem}
.pages-list{display:flex;flex-direction:column;gap:0.5rem;margin-top:1rem}
.page-item{display:flex;align-items:center;gap:1rem;padding:0.65rem 1rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius)}

/* ─── RANKING ────────────────────────────────────────────────────────────── */
.rank-tabs{display:flex;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap}
.rank-table-wrap{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border)}
.rank-table{width:100%;border-collapse:collapse}
.rank-table th{background:rgba(139,92,246,0.15);padding:1rem;text-align:left;color:var(--purple-light);font-family:var(--font-display);font-weight:700;border-bottom:1px solid var(--border)}
.rank-table td{padding:0.875rem 1rem;border-bottom:1px solid rgba(42,42,74,0.5);color:var(--text-muted)}
.rank-top td{background:rgba(139,92,246,0.05);color:var(--text)}
.rank-1 td:first-child,.rank-2 td:first-child,.rank-3 td:first-child{font-size:1.2rem}
.rank-pos{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--purple-light)}
.tab-btn{padding:0.5rem 1rem;border-radius:var(--radius);border:1px solid var(--border);color:var(--text-muted);font-size:0.875rem;font-weight:600;transition:var(--transition);cursor:pointer}
.tab-btn:hover,.tab-btn.active{background:var(--purple);border-color:var(--purple);color:white;text-decoration:none;box-shadow:var(--glow)}

/* ─── LOJA ───────────────────────────────────────────────────────────────── */
.shop-tabs{display:flex;gap:0.75rem;margin-bottom:2.5rem}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem;position:relative;z-index:1}
.shop-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;text-align:center;position:relative;transition:transform .12s ease-out,box-shadow .35s ease,border-color .35s ease;overflow:hidden}
.shop-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--vip-color,var(--purple));z-index:2}
.shop-card:hover{border-color:var(--vip-color,var(--purple));box-shadow:0 28px 60px -14px rgba(0,0,0,.5),0 0 44px -10px var(--vip-color,rgba(139,92,246,.4))}
.shop-card-featured,.shop-card.shop-card-featured{border-color:rgba(139,92,246,0.5);box-shadow:var(--glow)}
.vip-badge-top{position:absolute;top:0.75rem;right:0.75rem;background:var(--vip-color,var(--purple));color:white;font-size:0.7rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:100px}
.shop-icon{font-size:2.5rem;margin-bottom:1rem}
.shop-name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--vip-color,var(--purple-light));margin-bottom:0.75rem}
.shop-price{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text);margin-bottom:1rem}
.shop-price span{font-size:1rem;color:var(--text-muted)}
.shop-benefits{text-align:left;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:0.4rem}
.shop-benefits li{font-size:0.875rem;color:var(--text-muted);padding:0.2rem 0}

/* ─── EFEITOS 3D DOS CARDS VIP (/loja) ────────────────────────────────────── */
.shop-page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.shop-balance{display:inline-flex;align-items:center;gap:.45rem;background:var(--bg-3);border:1px solid var(--border);border-radius:999px;padding:.55rem 1.1rem;font-family:var(--font-display);font-size:.95rem;white-space:nowrap}
.shop-balance strong{color:#fbbf24}
.shop-balance.pulse{animation:balancePulse .6s ease}
@keyframes balancePulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

.shop-grid-wrap{position:relative}
.floating-coin{position:absolute;pointer-events:none;z-index:0;opacity:.55;filter:drop-shadow(0 0 6px rgba(250,204,21,.45));animation-name:floatCoin;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes floatCoin{0%{transform:translateY(0) rotate(0deg);opacity:.4}50%{transform:translateY(-22px) rotate(14deg);opacity:.8}100%{transform:translateY(0) rotate(0deg);opacity:.4}}
.sparkle{position:absolute;pointer-events:none;z-index:0;font-size:1rem;animation:sparklePulse 1.6s ease forwards}
@keyframes sparklePulse{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}

.tilt-card{transform-style:preserve-3d;will-change:transform}
.card-glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 45%);}
.shop-card > *:not(.card-glare){position:relative;z-index:2}
@media(hover:none){ .tilt-card{transform:none!important} .card-glare{display:none} }

/* ─── ANIMAÇÃO DE COMPRA CONCLUÍDA ─────────────────────────────────────────── */
.purchase-success-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,18,.78);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.purchase-success-overlay.show{opacity:1;pointer-events:all}
.success-box{display:flex;flex-direction:column;align-items:center;text-align:center}
.success-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--green,#22c55e),#16a34a);
  display:flex;align-items:center;justify-content:center;transform:scale(0);box-shadow:0 0 70px rgba(34,197,94,.6)}
.purchase-success-overlay.show .success-circle{animation:circleExpand .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes circleExpand{to{transform:scale(1)}}
.success-check{font-size:3.2rem;color:#fff;opacity:0}
.purchase-success-overlay.show .success-check{animation:checkPop .3s ease .3s forwards}
@keyframes checkPop{to{opacity:1}}
.success-text{margin-top:1.25rem;color:#fff;font-family:var(--font-display);font-size:1.15rem;max-width:320px}
.flying-coin{position:fixed;font-size:1.35rem;z-index:3001;pointer-events:none;
  transition:left .9s cubic-bezier(.2,.8,.3,1),top .9s cubic-bezier(.2,.8,.3,1),opacity .9s ease,transform .9s ease;
  transform:translate(-50%,-50%)}
.cash-shop{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.cash-info{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem}
.cash-info h2{font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin-bottom:1rem;color:var(--purple-light)}
.cash-rate{font-family:var(--font-display);font-size:1.25rem;margin-top:1rem;background:rgba(139,92,246,0.1);padding:1rem;border-radius:var(--radius);border:1px solid rgba(139,92,246,0.3)}
.cash-rate strong{color:var(--green);font-size:1.5rem}
.cash-calculator{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem}
.cash-calculator h3{font-family:var(--font-display);font-size:1.25rem;margin-bottom:1.5rem;color:var(--purple-light)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.price-display{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);padding:0.65rem 0.875rem;font-family:var(--font-display);font-size:1.25rem;color:var(--green);font-weight:700}
.cash-presets{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:1.5rem}
.preset-btn{background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:0.65rem;border-radius:var(--radius);cursor:pointer;font-size:0.85rem;font-weight:600;transition:var(--transition);text-align:center}
.preset-btn:hover{border-color:var(--purple);background:rgba(139,92,246,0.1);color:var(--purple-light)}
.preset-btn small{display:block;color:var(--green);font-weight:700}

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem;width:100%;max-width:480px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,0.5),var(--glow);animation:scaleIn 0.3s ease}
@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-card h2{font-family:var(--font-display);font-size:1.5rem;margin-bottom:1.5rem;color:var(--purple-light)}
.checkout-price{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--green);text-align:center;padding:1rem;background:rgba(34,197,94,0.08);border-radius:var(--radius);border:1px solid rgba(34,197,94,0.2);margin:1rem 0}
.pix-qr{text-align:center;margin:1rem 0}
.pix-qr img{max-width:200px;margin:0 auto;border-radius:var(--radius)}
.pix-copy{display:flex;gap:0.5rem;align-items:center;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);padding:0.5rem 0.75rem;margin:0.75rem 0;word-break:break-all}
.pix-copy code{flex:1;font-family:var(--font-mono);font-size:0.75rem;color:var(--purple-light)}
.pix-note{font-size:0.8rem;color:var(--text-muted);text-align:center;margin-top:0.5rem}

/* ─── TICKETS ────────────────────────────────────────────────────────────── */
.tickets-layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.panel-section .auth-form{gap:0.875rem}
.ticket-list{display:flex;flex-direction:column;gap:0.75rem}
.ticket-item{display:block;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;transition:var(--transition)}
.ticket-item:hover{border-color:var(--purple);transform:translateX(3px)}
.ticket-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem}
.ticket-code{font-family:var(--font-mono);font-size:0.8rem;color:var(--text-dim)}
.ticket-status{font-size:0.75rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:100px}
.ticket-status-open{background:rgba(34,197,94,0.15);color:var(--green)}
.ticket-status-closed{background:rgba(107,114,128,0.2);color:var(--gray-light)}
.ticket-status-pending{background:rgba(251,191,36,0.15);color:var(--gold)}
.ticket-status-approved{background:rgba(34,197,94,0.15);color:var(--green)}
.ticket-status-rejected{background:rgba(239,68,68,0.15);color:var(--red)}
.ticket-status-phase2{background:rgba(139,92,246,0.15);color:var(--purple-light)}
.lootbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.75rem}
.lootbox-box{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);padding:1rem .5rem;text-align:center;cursor:pointer;transition:var(--transition)}
.lootbox-box:hover{border-color:var(--purple);transform:translateY(-3px)}
.lootbox-box-icon{font-size:2rem}
.lootbox-box-label{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}
.ticket-subject{font-weight:500;margin-bottom:0.25rem}
.ticket-meta{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text-dim)}

/* ─── EQUIPE ─────────────────────────────────────────────────────────────── */
.team-group{margin-bottom:3rem}
.team-group-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.75rem}
.team-group-title::after{content:'';flex:1;height:1px;background:var(--border);margin-left:1rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.team-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;text-align:center;transition:var(--transition)}
.team-card:hover{border-color:var(--purple);transform:translateY(-4px)}
.team-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 0.75rem;object-fit:cover;border:2px solid var(--border)}
.team-name{font-weight:600;font-size:0.9rem;margin-bottom:0.25rem}
.team-role{font-size:0.8rem;font-weight:600}

/* ─── REGRAS ─────────────────────────────────────────────────────────────── */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}
.rule-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;animation:fadeInUp 0.6s ease both}
.rule-card:hover{border-color:var(--purple-dark)}
.rule-card h3{font-family:var(--font-display);font-size:1.2rem;color:var(--purple-light);margin-bottom:1rem}
.rule-card ol{padding-left:1.25rem;display:flex;flex-direction:column;gap:0.6rem}
.rule-card li{font-size:0.875rem;color:var(--text-muted);line-height:1.5}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer{background:var(--bg-2);border-top:1px solid var(--border);padding:3rem 0;position:relative;z-index:1;margin-top:4rem}
.footer-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
.footer-logo{display:flex;align-items:center;gap:0.75rem;font-family:var(--font-display);font-size:1.2rem;font-weight:700}
.footer-desc{color:var(--text-muted);font-size:0.9rem}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.footer-links a{color:var(--text-muted);font-size:0.875rem;transition:var(--transition)}
.footer-links a:hover{color:var(--purple-light)}
.footer-copy{color:var(--text-dim);font-size:0.8rem}

/* ─── MISC ───────────────────────────────────────────────────────────────── */
.hidden{display:none!important}
.text-muted{color:var(--text-muted);font-size:0.9rem}
.empty-state{text-align:center;color:var(--text-dim);padding:3rem;font-style:italic}
.custom-page-content{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;line-height:1.8}

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{box-shadow:var(--glow)}50%{box-shadow:var(--glow-strong)}}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero-visual{display:none}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:static;display:flex;flex-wrap:wrap;gap:0.25rem}
  .cash-shop{grid-template-columns:1fr}
  .tickets-layout{grid-template-columns:1fr}
}
@media (max-width:768px){
  .nav-inner{gap:0.6rem}
  .nav-actions{gap:0.5rem}
  .nav-links{display:none;position:fixed;top:64px;left:0;right:0;background:var(--bg-2);flex-direction:column;padding:1rem;border-bottom:1px solid var(--border);z-index:999}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  /* 🐛 BUG CORRIGIDO: essa regra deveria esconder o nome de usuário no
     celular pra caber logo + notificações + avatar + hambúrguer na tela.
     Mas apontava pras classes antigas (.nav-username / .role-tag), que não
     existem mais no HTML atual (hoje são .nav-uname / .role-mini) — então
     nunca escondia nada. Resultado: com o nome do Discord completo mostrado,
     a navbar ficava mais larga que a tela e empurrava o botão de hambúrguer
     pra fora da área visível, ficando impossível de tocar nele. */
  .nav-actions .nav-user .nav-uname,.nav-actions .role-mini{display:none}
  .section-title{font-size:1.6rem}
  .hero{padding:1.5rem;min-height:80vh}
  .hero-title{font-size:2.5rem}
  .form-row{grid-template-columns:1fr}
  .calc-row{grid-template-columns:1fr}
  .cash-presets{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:1fr}
  .wl-steps span{display:none}
}

/* ═══════════════════════════════════════════════════════
   DRIZZIE CITY v3 — NOVOS COMPONENTES
   ═══════════════════════════════════════════════════════ */

/* ─── TOKENS EXTRAS ─────────────────────────────────── */
:root {
  --yellow: #fbbf24;
  --card: var(--bg-2);
  --mt-1: 0.75rem;
  --mt-2: 1.5rem;
}
.mt-1 { margin-top: 0.75rem !important; }
.mt-2 { margin-top: 1.5rem !important; }
.badge-sm { display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:white;font-size:0.65rem;font-weight:700;width:18px;height:18px;border-radius:50%;margin-left:0.3rem; }

/* ─── DROPDOWN NAVBAR ───────────────────────────────── */
.nav-dropdown { position:relative; }
.nav-drop-trigger {
  cursor:pointer; user-select:none;
  /* Reset de aparência nativa do <button> (Chrome/Android mostrava o botão cinza padrão do SO) */
  appearance:none; -webkit-appearance:none; background:none; border:none; margin:0;
  font:inherit; color:inherit; box-shadow:none;
}
.nav-dropdown-menu { display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0.5rem;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:fadeInUp 0.15s ease; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display:flex;flex-direction:column; }
.nav-drop-item { padding:0.6rem 0.875rem;border-radius:var(--radius);color:var(--text-muted);font-size:0.875rem;transition:var(--transition);display:flex;align-items:center;gap:0.5rem; }
.nav-drop-item:hover { background:rgba(139,92,246,0.12);color:var(--purple-light);text-decoration:none; }
.nav-drop-divider { height:1px;background:var(--border);margin:0.4rem 0; }
.nav-uname { font-size:0.875rem;color:var(--text);font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.role-mini { font-size:0.8rem; }
.nav-user-menu { position:relative;cursor:pointer; }
.nav-user-dropdown { display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0.5rem;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.nav-user-menu:hover .nav-user-dropdown { display:flex;flex-direction:column; }
.nav-user { display:flex;align-items:center;gap:0.5rem;padding:0.3rem 0.75rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:var(--transition); }
.nav-user:hover { border-color:var(--purple);background:rgba(139,92,246,0.1); }

/* ─── HOME EXTRA ─────────────────────────────────────── */
.home-section { padding:3rem 0;position:relative;z-index:1; }
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem; }
.section-header h2 { margin-bottom:0; }
.server-chip { display:inline-flex;align-items:center;gap:0.6rem;background:var(--bg-3);border:1px solid var(--border);padding:0.4rem 0.875rem;border-radius:100px;font-size:0.85rem;margin-top:0.75rem; }

/* NEWS */
.news-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem; }
.news-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column; }
.news-card:hover { border-color:var(--purple);transform:translateY(-4px);box-shadow:var(--glow);text-decoration:none; }
.news-img { height:160px;background:var(--bg-3);background-size:cover;background-position:center; }
.news-img-ph { display:flex;align-items:center;justify-content:center;font-size:3rem; }
.news-body { padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:0.5rem; }
.news-body h3 { font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);line-height:1.3; }
.news-body p { font-size:0.875rem;color:var(--text-muted);flex:1; }
.news-cat { display:inline-block;background:rgba(139,92,246,0.15);color:var(--purple-light);font-size:0.7rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:100px;text-transform:uppercase;letter-spacing:0.5px; }
.news-meta { display:flex;gap:1rem;font-size:0.78rem;color:var(--text-dim); }
.news-grid-big { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem; }
.news-card-big { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition);display:block; }
.news-card-big:hover { border-color:var(--purple);transform:translateY(-4px);text-decoration:none; }
.news-img-big { height:200px;background:var(--bg-3);background-size:cover;background-position:center; }
.article-content { font-size:1rem;line-height:1.8;color:var(--text);padding:0.5rem 0; }
.article-content h1,.article-content h2,.article-content h3 { font-family:var(--font-display);color:var(--purple-light);margin:1.5rem 0 0.75rem; }
.article-content p { margin-bottom:1rem; }
.article-content img { border-radius:var(--radius-lg);max-width:100%;margin:1rem 0; }

/* EVENTS STRIP */
.events-strip { display:flex;flex-direction:column;gap:0.75rem; }
.event-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.5rem;display:flex;align-items:center;gap:1.5rem;transition:var(--transition); }
.event-card:hover { border-color:var(--purple); }
.event-date { font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--purple-light);min-width:64px;text-align:center; }
.event-info { flex:1; }
.event-info h3 { font-family:var(--font-display);font-size:1rem;font-weight:700; }
.event-info p { font-size:0.85rem;color:var(--text-muted); }
.event-countdown { font-family:var(--font-mono);font-size:0.875rem;color:var(--purple-bright);background:rgba(139,92,246,0.1);padding:0.3rem 0.75rem;border-radius:100px;white-space:nowrap; }

/* ─── DASH HERO ──────────────────────────────────────── */
.dash-hero { position:relative;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;margin-bottom:2rem;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; }
.dash-hero-bg { position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(var(--rc,139,92,246),0.08),transparent 70%);pointer-events:none; }
.dash-user-info { display:flex;align-items:center;gap:1.5rem;position:relative;flex-wrap:wrap; }
.dash-av-wrap { position:relative;flex-shrink:0; }
.dash-avatar { width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid rgba(139,92,246,0.4); }
.dash-av-ring { position:absolute;inset:-4px;border-radius:50%;border:2px solid;animation:pulse 3s ease infinite; }
.dash-badges { display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.5rem; }
.rep-badge { display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:100px;font-size:0.78rem;background:var(--bg-3);border:1px solid var(--border);color:var(--text-muted); }
.dash-quick-btns { display:flex;gap:0.5rem;flex-wrap:wrap;position:relative; }
.dash-grid-3 { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:1.5rem; }
.cs { background:var(--bg-3);border-radius:var(--radius);padding:0.65rem 0.875rem;display:flex;justify-content:space-between;align-items:center;font-size:0.875rem; }
.cs span { color:var(--text-muted); }
.cs strong { font-family:var(--font-display);color:var(--purple-light); }
.char-stats { display:flex;flex-direction:column;gap:0.4rem; }
.orders-list { display:flex;flex-direction:column;gap:0.5rem; }
.order-item { display:grid;grid-template-columns:1fr auto auto auto;gap:0.75rem;align-items:center;padding:0.6rem 0.75rem;background:var(--bg-3);border-radius:var(--radius);font-size:0.875rem; }
.os-approved { color:var(--green); }
.os-pending  { color:var(--yellow); }
.os-cancelled { color:var(--red); }

/* ─── PERFIL ─────────────────────────────────────────── */
.profile-page { padding-bottom:4rem;position:relative;z-index:1; }
.profile-banner { height:280px;position:relative;overflow:hidden; }
.profile-banner-overlay { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--bg) 100%); }
.profile-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;margin-top:-80px;position:relative;z-index:2; }
.profile-main { display:flex;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem; }
.profile-av-wrap { position:relative;flex-shrink:0;margin-top:-60px; }
.profile-avatar { width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--bg-2); }
.profile-av-ring { position:absolute;inset:-6px;border-radius:50%;border:3px solid;animation:pulse 3s infinite; }
.profile-badge-icon { position:absolute;bottom:4px;right:4px;background:var(--bg-2);border:2px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1rem; }
.profile-info { flex:1;min-width:200px; }
.profile-info h1 { font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin-bottom:0.3rem; }
.profile-nick { color:var(--text-muted);font-size:0.875rem;margin-bottom:0.5rem; }
.profile-tags { display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:0.75rem; }
.faction-tag { display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:100px;font-size:0.8rem;font-weight:600;background:rgba(139,92,246,0.1); }
.wl-tag { background:rgba(34,197,94,0.1);color:var(--green);border:1px solid rgba(34,197,94,0.3);padding:0.2rem 0.6rem;border-radius:100px;font-size:0.78rem; }
.profile-bio { font-size:0.9rem;color:var(--text-muted);line-height:1.5;margin-top:0.5rem;max-width:500px; }
.profile-social-counts { display:flex;gap:1.5rem;margin-top:0.75rem;font-size:0.85rem;color:var(--text-muted); }
.profile-social-counts strong { color:var(--text); }
.profile-actions { display:flex;flex-direction:column;gap:0.5rem;margin-left:auto; }
.profile-stats-bar { display:flex;gap:1px;border-top:1px solid var(--border);padding-top:1.25rem;flex-wrap:wrap; }
.pstat { flex:1;min-width:80px;text-align:center;padding:0.5rem; }
.pstat strong { display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--purple-light); }
.pstat span { font-size:0.78rem;color:var(--text-muted); }
.profile-body { display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem; }
.profile-left,.profile-right { display:flex;flex-direction:column;gap:1.5rem; }
.profile-section { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem; }
.profile-section h3 { font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--purple-light);margin-bottom:1rem; }
.char-photo { width:100%;max-height:250px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:1rem; }
.char-detail { display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid rgba(42,42,74,0.5);font-size:0.875rem; }
.char-detail span { color:var(--text-muted); }
.char-detail strong { color:var(--text); }
.char-detail-block { padding:0.75rem 0;border-bottom:1px solid rgba(42,42,74,0.5); }
.char-detail-block span { display:block;font-size:0.78rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.4rem; }
.char-detail-block p { font-size:0.875rem;color:var(--text-muted);line-height:1.5; }
.criminal { background:rgba(239,68,68,0.05);border-radius:var(--radius);padding:0.75rem!important;margin-top:0.5rem; }
.criminal span { color:var(--red)!important; }
.rep-display { padding:0.5rem 0; }
.rep-bar-wrap { display:flex;flex-direction:column;gap:0.5rem; }
.rep-bar { height:8px;background:var(--bg-3);border-radius:4px;overflow:hidden; }
.rep-bar-pos { height:100%;background:linear-gradient(90deg,var(--green),#4ade80);border-radius:4px;transition:width 0.8s ease; }
.rep-counts { display:flex;justify-content:space-between;font-size:0.875rem;font-weight:600; }
.mini-posts { display:grid;grid-template-columns:repeat(3,1fr);gap:4px; }
.mini-post { aspect-ratio:1;background:var(--bg-3);background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden;position:relative;display:block;transition:var(--transition); }
.mini-post:hover .mini-post-ov { opacity:1; }
.mini-post-ov { position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;font-size:0.875rem;color:white;opacity:0;transition:var(--transition); }
.profile-preview { text-align:center;padding:1rem 0; }

/* ─── INSTACITY ──────────────────────────────────────── */
.social-post-form { margin-bottom:2rem; }
.social-form { display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end; }
.social-form .form-group { margin:0; }
.social-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem; }
.social-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition); }
.social-card:hover { border-color:var(--purple); }
.social-card-header { display:flex;align-items:center;gap:0.75rem;padding:0.875rem 1rem; }
.social-avatar { width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.social-author { font-weight:600;font-size:0.9rem;flex:1; }
.social-img { width:100%;aspect-ratio:1;object-fit:cover;max-height:400px; }
.social-caption { padding:0.75rem 1rem;font-size:0.9rem;color:var(--text-muted); }
.social-actions { display:flex;gap:0.5rem;padding:0.5rem 0.75rem;border-top:1px solid var(--border); }
.btn-social { background:none;border:none;color:var(--text-muted);font-size:0.9rem;cursor:pointer;padding:0.4rem 0.75rem;border-radius:var(--radius);transition:var(--transition); }
.btn-social:hover { background:rgba(139,92,246,0.1);color:var(--purple-light);text-decoration:none; }
.comment-item { padding:0.75rem 0;border-bottom:1px solid rgba(42,42,74,0.5);font-size:0.875rem; }
.comment-item strong { color:var(--purple-light);margin-right:0.5rem; }
.comment-item p { color:var(--text-muted);margin-top:0.2rem; }
.pagination { display:flex;gap:1rem;justify-content:center;margin-top:2rem; }

/* ─── FACÇÕES ────────────────────────────────────────── */
.faction-group { margin-bottom:3rem; }
.faction-group-title { font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.75rem; }
.faction-group-title::after { content:'';flex:1;height:1px;background:var(--border); }
.factions-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem; }
.faction-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition);display:block; }
.faction-card:hover { border-color:var(--fc,var(--purple));transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.3);text-decoration:none; }
.faction-banner-mini { height:100px;background:linear-gradient(135deg,var(--bg-3),var(--bg)); }
.faction-card-body { padding:1.25rem; }
.faction-logo-mini { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem; }
.faction-logo-mini img { width:40px;height:40px;border-radius:50%;object-fit:cover; }
.faction-logo-mini span { font-size:2rem; }
.faction-card-body h3 { font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--fc,var(--purple-light));margin-bottom:0.4rem; }
.faction-card-body p { font-size:0.85rem;color:var(--text-muted);margin-bottom:0.875rem; }
.faction-meta-row { display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;color:var(--text-muted); }
.recr-badge { font-size:0.78rem;font-weight:600;padding:0.15rem 0.5rem;border-radius:100px; }
.recr-badge.open { background:rgba(34,197,94,0.15);color:var(--green); }
.recr-badge.closed { background:rgba(239,68,68,0.15);color:var(--red); }
.faction-page {}
.faction-hero { min-height:280px;position:relative;display:flex;align-items:flex-end; }
.faction-hero-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,15,0.95) 0%,rgba(7,7,15,0.5) 50%,transparent 100%); }
.faction-hero-content { position:relative;z-index:2;padding:2rem;display:flex;align-items:flex-end;gap:1.5rem; }
.fh-logo { font-size:4rem;flex-shrink:0;line-height:1; }
.fh-logo img { width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.2); }
.faction-hero-meta { display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.5rem;font-size:0.875rem;color:var(--text-muted); }
.faction-body { display:grid;grid-template-columns:1fr 340px;gap:2rem;padding-top:2rem; }
.faction-left,.faction-right { display:flex;flex-direction:column;gap:1.5rem; }
.faction-desc { font-size:0.9rem;color:var(--text-muted);line-height:1.7; }
.faction-post { padding:1rem 0;border-bottom:1px solid rgba(42,42,74,0.5); }
.faction-post.pinned { background:rgba(139,92,246,0.05);border-radius:var(--radius);padding:1rem;border:1px solid rgba(139,92,246,0.2); }
.fp-head { font-size:0.95rem;font-weight:600;margin-bottom:0.4rem; }
.rank-row { display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid rgba(42,42,74,0.4);font-size:0.875rem; }
.rank-icon { font-size:1.1rem; }
.member-list { display:flex;flex-direction:column;gap:0.4rem;max-height:400px;overflow-y:auto; }
.member-row { display:flex;align-items:center;gap:0.75rem;padding:0.4rem;border-radius:var(--radius);transition:var(--transition); }
.member-row:hover { background:rgba(139,92,246,0.06); }
.member-av { width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.member-rank { margin-left:auto;font-size:0.75rem;color:var(--text-muted); }

/* ─── DENÚNCIAS & PUNIÇÕES ──────────────────────────── */
.punishment-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1rem;border-left:4px solid var(--border); }
.punishment-ban { border-left-color:var(--red); }
.punishment-kick { border-left-color:var(--yellow); }
.punishment-mute { border-left-color:var(--blue); }
.punishment-warn { border-left-color:var(--gray); }
.punishment-card.inactive { opacity:0.55; }
.pun-header { display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;flex-wrap:wrap; }
.pun-type-badge { padding:0.25rem 0.65rem;border-radius:100px;font-size:0.78rem;font-weight:700;text-transform:uppercase; }
.pun-ban { background:rgba(239,68,68,0.15);color:var(--red); }
.pun-kick { background:rgba(251,191,36,0.15);color:var(--yellow); }
.pun-mute { background:rgba(59,130,246,0.15);color:var(--blue); }
.pun-warn { background:rgba(107,114,128,0.15);color:var(--gray-light); }
.pun-body { font-size:0.875rem;color:var(--text-muted);display:flex;flex-direction:column;gap:0.3rem; }
.pun-body p strong { color:var(--text); }
.appeal-form summary { list-style:none;margin-top:0.75rem; }
.appeal-form[open] summary { margin-bottom:1rem; }

/* ─── LEILÃO ─────────────────────────────────────────── */
.auction-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem; }
.auction-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition); }
.auction-card:hover { border-color:var(--purple); }
.auction-img { width:100%;height:200px;object-fit:cover; }
.auction-img-ph { height:200px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:var(--bg-3); }
.auction-body { padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem; }
.auction-type { font-size:0.75rem;font-weight:700;text-transform:uppercase;color:var(--purple-light);background:rgba(139,92,246,0.1);padding:0.2rem 0.6rem;border-radius:100px;display:inline-block; }
.auction-body h3 { font-family:var(--font-display);font-size:1.15rem;font-weight:700; }
.auction-bid-info { background:var(--bg-3);border-radius:var(--radius);padding:0.875rem; }
.current-bid span { font-size:0.78rem;color:var(--text-muted);display:block; }
.current-bid strong { font-family:var(--font-display);font-size:1.5rem;color:var(--green); }
.auction-timer { font-family:var(--font-mono);font-size:0.875rem;text-align:center;padding:0.4rem;background:rgba(139,92,246,0.08);border-radius:var(--radius); }
.buy-now-info { font-size:0.85rem;color:var(--yellow);text-align:center; }
.bid-form { display:flex;gap:0.5rem; }
.bid-input { flex:1;background:var(--bg-3);border:1px solid var(--border);color:var(--text);padding:0.5rem 0.75rem;border-radius:var(--radius);font-size:16px; }
.bid-input:focus { outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,0.15); }
.past-auctions { display:flex;flex-direction:column;gap:0.5rem; }
.past-auction-item { display:flex;align-items:center;gap:1rem;padding:0.75rem 1rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem; }
.past-auction-item span:first-child { font-weight:600;flex:1; }

/* ─── ELEIÇÕES ───────────────────────────────────────── */
.elections-list { display:flex;flex-direction:column;gap:1rem; }
.election-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;transition:var(--transition);display:block;position:relative; }
.election-card:hover { border-color:var(--purple);transform:translateX(4px);text-decoration:none; }
.election-card h3 { font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:0.4rem; }
.election-card p { font-size:0.875rem;color:var(--text-muted);margin-bottom:0.75rem; }
.election-status-badge { display:inline-flex;align-items:center;gap:0.4rem;padding:0.25rem 0.75rem;border-radius:100px;font-size:0.8rem;font-weight:600;position:absolute;top:1.25rem;right:1.25rem; }
.election-status-badge.open { background:rgba(34,197,94,0.15);color:var(--green); }
.election-status-badge.closed { background:rgba(107,114,128,0.15);color:var(--gray-light); }
.election-meta { display:flex;gap:1.5rem;font-size:0.8rem;color:var(--text-muted); }
.election-countdown { font-family:var(--font-mono);font-size:0.9rem;color:var(--purple-light);margin-top:0.5rem; }
.candidate-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1rem;display:grid;grid-template-columns:48px 1fr auto;gap:1.25rem;align-items:start;transition:var(--transition); }
.candidate-card:hover { border-color:var(--purple-dark); }
.candidate-card.my-vote { border-color:var(--green);background:rgba(34,197,94,0.05); }
.candidate-rank { font-family:var(--font-display);font-size:1.5rem;text-align:center; }
.candidate-info a { display:block;color:var(--text);text-decoration:none; }
.candidate-info a:hover { color:var(--purple-light); }
.candidate-info em { display:block;font-size:0.875rem;color:var(--purple-light);margin-bottom:0.4rem; }
.candidate-info p { font-size:0.85rem;color:var(--text-muted); }
.candidate-votes-col { display:flex;flex-direction:column;gap:0.5rem;min-width:150px;align-items:flex-end; }
.vote-bar-wrap { width:100%; }
.vote-bar { height:6px;background:var(--border);border-radius:3px;overflow:hidden;width:100%; }
.vote-bar-fill { height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:3px;transition:width 1s ease; }

/* ─── EVENTOS ────────────────────────────────────────── */
.events-grid-big { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem;margin-bottom:2rem; }
.event-big-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition); }
.event-big-card:hover { border-color:var(--purple); }
.event-big-img { width:100%;height:200px;object-fit:cover; }
.event-big-body { padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem; }
.event-big-body h3 { font-family:var(--font-display);font-size:1.2rem;font-weight:700; }
.event-big-body p { font-size:0.875rem;color:var(--text-muted); }
.event-type-badge { display:inline-block;background:rgba(139,92,246,0.1);color:var(--purple-light);font-size:0.75rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:100px;text-transform:uppercase; }
.event-info-row { display:flex;gap:1.25rem;flex-wrap:wrap;font-size:0.85rem;color:var(--text-muted); }
.event-big-countdown { font-family:var(--font-mono);font-size:1rem;color:var(--purple-bright);background:rgba(139,92,246,0.08);padding:0.5rem 1rem;border-radius:var(--radius);text-align:center; }
.past-events { display:flex;flex-direction:column;gap:0.4rem; }
.past-event-item { display:flex;align-items:center;gap:1.25rem;padding:0.75rem 1rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem; }
.past-event-item strong { flex:1; }

/* ─── WL v3 EXTRAS ──────────────────────────────────── */
.wl-step-n { width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;transition:var(--transition); }
.wl-step.active .wl-step-n { border-color:var(--purple);background:var(--purple);color:white;box-shadow:var(--glow); }
.wl-step.done .wl-step-n { border-color:var(--green);background:var(--green);color:white; }
.wl-prog-bar { height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:.75rem 0 1.5rem; }
.wl-prog-fill { height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:3px;transition:width .5s ease; }
.wl-q-box { background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.25rem; }
.wl-q-num { font-size:0.8rem;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:0.5rem; }
.wl-question { font-size:1.05rem;font-weight:500;line-height:1.5; }
.wl-rec-area { display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;background:var(--bg-3);border-radius:var(--radius-lg);margin-bottom:1rem; }
.rec-status { font-size:0.9rem;color:var(--text-muted); }
.rec-time { font-family:var(--font-mono);font-size:1.1rem;color:var(--purple-light); }
.mic-test-box { text-align:center;padding:2rem;border:2px dashed var(--border);border-radius:var(--radius-xl);margin:1.5rem 0; }
.mic-icon-big { font-size:3.5rem;margin-bottom:0.75rem; }
.mic-bars-viz { display:flex;align-items:flex-end;justify-content:center;gap:3px;height:48px;margin-top:1rem; }
.mic-b { width:5px;height:4px;background:var(--border);border-radius:3px;transition:height .08s; }
.sum-grid { display:grid;gap:0.5rem; }
.sum-item { display:flex;gap:0.75rem;align-items:center;padding:0.5rem 0.75rem;background:var(--bg-3);border-radius:var(--radius);font-size:0.85rem; }
.sum-n { color:var(--text-dim);font-weight:700;min-width:24px; }
.sum-q { flex:1; }

/* ─── FOOTER v3 ──────────────────────────────────────── */
.footer-top { display:grid;grid-template-columns:1fr 2fr;gap:3rem;margin-bottom:2rem;width:100%; }
.footer-brand p { color:var(--text-muted);font-size:0.875rem;margin-top:0.75rem;max-width:280px; }
.footer-cols { display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; }
.footer-col h4 { font-family:var(--font-display);font-weight:700;color:var(--text);margin-bottom:0.875rem;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px; }
.footer-col a { display:block;color:var(--text-muted);font-size:0.875rem;margin-bottom:0.5rem;transition:var(--transition); }
.footer-col a:hover { color:var(--purple-light);transform:translateX(3px); }
.footer-bottom { border-top:1px solid var(--border);padding-top:1.5rem;color:var(--text-dim);font-size:0.8rem;text-align:center;width:100%; }
.footer-inner { max-width:1280px;margin:0 auto;padding:0 1.5rem;display:block; }

/* ─── MISC v3 ────────────────────────────────────────── */
.status-banner code { background:var(--bg-3);padding:0.2rem 0.6rem;border-radius:var(--radius);font-family:var(--font-mono);color:var(--purple-light); }
.tbl-av { width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:0.4rem; }

/* ─── RESPONSIVE v3 ─────────────────────────────────── */
@media (max-width:1024px) {
  .profile-body { grid-template-columns:1fr; }
  .faction-body { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .profile-main { flex-direction:column; }
  .profile-av-wrap { margin-top:-50px;align-self:center; }
  .profile-actions { margin-left:0; }
  .profile-stats-bar { justify-content:center; }
  .social-form { grid-template-columns:1fr; }
  .auction-grid { grid-template-columns:1fr; }
  .candidate-card { grid-template-columns:auto 1fr;gap:1rem; }
  .candidate-votes-col { grid-column:1/-1; }
  .faction-body { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr 1fr; }
  .dash-hero { flex-direction:column; }
  .events-strip .event-countdown { display:none; }
}

/* ════════════════════════════════════════════════════════
   DRIZZIE CITY v4 — NOVOS COMPONENTES
   ════════════════════════════════════════════════════════ */

/* ─── ANIMAÇÕES DE PÁGINA ────────────────────────────── */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.page-enter { animation: fadeInUp .4s ease both; }
.loaded .main-content { animation: fadeInUp .35s ease both; }
.dash-card, .news-card, .feature-card, .shop-card, .auction-card, .social-card, .team-card, .rule-card, .faction-card {
  opacity:0; transform:translateY(16px); transition:opacity .4s ease,transform .4s ease;
}
.in-view { opacity:1!important; transform:none!important; }

/* Page loader */
.page-loader { position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;gap:1.1rem;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s ease,visibility .3s ease; }
.page-loader.hide { opacity:0;visibility:hidden;pointer-events:none; }
.loader-ring { width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin 0.7s linear infinite; }
.loader-step { font-family:var(--font-display);font-size:.95rem;letter-spacing:.5px;color:var(--text-muted);min-height:1.2em; }
.loader-step:empty { display:none; }
.loader-step.step-fade { animation:stepFadeIn .35s ease both; }
@keyframes stepFadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

/* ─── HAMBURGER / DRAWER ─────────────────────────────── */
.hamburger-btn { appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:7px;transition:var(--transition);flex-shrink:0; }
.hamburger-btn span { display:block;height:2px;background:var(--text);border-radius:2px;transition:var(--transition); }
.hamburger-btn:hover { border-color:var(--purple);background:rgba(139,92,246,.1); }
.hamburger-btn:hover span { background:var(--purple-light); }

.drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;backdrop-filter:blur(2px);pointer-events:none; }
.drawer-overlay.open { opacity:1;visibility:visible;pointer-events:auto; }

/* Hambúrguer Hub: painel lateral fixo, sempre fora da tela via transform até receber .open */
.side-drawer {
  position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100dvh;
  background:var(--bg-2);border-left:1px solid var(--border);z-index:1001;overflow-y:auto;
  display:flex;flex-direction:column;gap:0;
  transform:translateX(100%);visibility:hidden;pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
}
.side-drawer.open { transform:translateX(0);visibility:visible;pointer-events:auto; }

.drawer-head { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-2);z-index:1; }
.drawer-close { width:32px;height:32px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);cursor:pointer;color:var(--text-muted);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition); }
.drawer-close:hover { border-color:var(--red);color:var(--red); }

.drawer-user { padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.875rem; }
.drawer-user img { width:40px;height:40px;border-radius:50%;border:2px solid var(--purple);flex-shrink:0; }
.drawer-user strong { display:block;font-size:.9rem; }
.drawer-user span { font-size:.78rem;color:var(--text-muted); }

.drawer-section { padding:.75rem 0;border-bottom:1px solid rgba(42,42,74,.5); }
.drawer-label { display:block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);padding:.25rem 1.25rem .4rem; }
.drawer-item { display:block;padding:.6rem 1.25rem;font-size:.875rem;color:var(--text-muted);transition:var(--transition);text-decoration:none; }
.drawer-item:hover { background:rgba(139,92,246,.08);color:var(--purple-light); }

/* Mobile-first: menu com dropdowns fica oculto por padrão (Hambúrguer Hub cobre o mobile)
   e só aparece a partir de telas maiores. Isso evita qualquer conflito de cascata que
   fizesse os dropdowns "vazarem" abertos no mobile. */
.nav-links-desktop { display:none; }
@media (min-width:901px) {
  .nav-links-desktop { display:flex;align-items:center;gap:.25rem; }
  .hamburger-btn { display:none; }
}

/* ─── NAVBAR SCROLLED ────────────────────────────────── */
.navbar { transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; }
.navbar.scrolled { background:rgba(7,7,15,.97)!important;box-shadow:0 4px 24px rgba(0,0,0,.4);border-bottom-color:var(--purple-dark); }

/* ─── UCP / PERFIL STATS ──────────────────────────────── */
.ucp-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;margin:.5rem 0; }
.ucp-item { background:var(--bg-3);border-radius:var(--radius);padding:.6rem .875rem;display:flex;flex-direction:column;gap:.2rem;font-size:.875rem; }
.ucp-item span { color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.3px; }
.ucp-item strong { color:var(--text);font-family:var(--font-display); }

/* Needs bars (fome, sede, banheiro) */
.need-bars { display:flex;flex-direction:column;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border); }
.need-bar-item { display:grid;grid-template-columns:140px 1fr 48px;align-items:center;gap:.75rem;font-size:.85rem; }
.need-bar { height:8px;background:var(--bg-3);border-radius:4px;overflow:hidden; }
.need-bar-fill { height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:4px;transition:width 1s ease; }
.need-bar-item strong { text-align:right;font-family:var(--font-mono);font-size:.8rem; }

/* ─── INVENTÁRIO ─────────────────────────────────────── */
.inv-tabs { display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap; }
.inv-tab { padding:.4rem 1rem;border-radius:100px;border:1px solid var(--border);background:var(--bg-3);color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:var(--transition); }
.inv-tab.active { background:rgba(139,92,246,.15);border-color:var(--purple);color:var(--purple-light); }
.inv-tab:hover:not(.active) { border-color:var(--purple-dark);color:var(--text); }
.inv-count { background:var(--border);border-radius:100px;padding:.1rem .4rem;font-size:.72rem;margin-left:.3rem; }
.inv-panel { display:flex;flex-direction:column;gap:.4rem; }
.inv-panel.hidden { display:none; }
.inv-item { display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--bg-3);border-radius:var(--radius);font-size:.875rem;transition:var(--transition); }
.inv-item:hover { background:rgba(139,92,246,.08); }
.inv-icon { font-size:1.2rem;flex-shrink:0; }
.inv-icon-img { width:28px;height:28px;object-fit:contain;flex-shrink:0;border-radius:4px;background:rgba(255,255,255,.04); }
.inv-name { flex:1;color:var(--text); }
.inv-qty { color:var(--purple-light);font-family:var(--font-mono);font-size:.8rem;background:rgba(139,92,246,.1);padding:.15rem .5rem;border-radius:100px; }

/* ─── VEÍCULOS ────────────────────────────────────────── */
.vehicles-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem; }
.vehicle-card { background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition); }
.vehicle-card:hover { border-color:var(--purple); }
.vehicle-img { width:100%;height:140px;object-fit:contain;background:#111;padding:.5rem; }
.vehicle-body { padding:1rem; }
.vehicle-body h4 { font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:.3rem; }
.vehicle-plate { display:inline-block;background:#fff;color:#000;font-family:var(--font-mono);font-size:.8rem;font-weight:700;padding:.2rem .6rem;border-radius:4px;border:2px solid #333;margin-bottom:.75rem;letter-spacing:2px; }
.vehicle-stats { display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem; }
.vehicle-colors { display:flex;align-items:center;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--border); }
.vstat { display:grid;grid-template-columns:120px 1fr 48px;align-items:center;gap:.5rem;font-size:.8rem; }
.vstat span { color:var(--text-muted); }
.vstat strong { text-align:right;font-family:var(--font-mono);color:var(--text-dim);font-size:.78rem; }
.vbar { height:5px;background:var(--border);border-radius:3px;overflow:hidden; }
.vbar-fill { height:100%;border-radius:3px;transition:width 1s ease; }
.vbar-fill.fuel { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.vbar-fill.health { background:linear-gradient(90deg,var(--green),#4ade80); }
.tire-grid { display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.75rem;padding:.75rem;background:var(--bg);border-radius:var(--radius); }
.tire { text-align:center;font-size:.78rem; }
.tire span { display:block;color:var(--text-dim);font-size:.7rem;margin-bottom:.2rem; }
.tire strong { color:var(--text);font-family:var(--font-mono); }
.trunk-details { border-top:1px solid var(--border);padding-top:.75rem; }
.trunk-details summary { cursor:pointer;font-size:.85rem;color:var(--text-muted);border-radius:var(--radius); }
.trunk-details summary:focus-visible { outline:2px solid var(--purple);outline-offset:2px; }
.trunk-details summary:hover { color:var(--purple-light); }
.trunk-list { display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem; }
.trunk-item { font-size:.82rem;padding:.35rem .5rem;background:var(--bg);border-radius:var(--radius);color:var(--text-muted); }

/* ─── WHITELIST REVIEW (admin) ───────────────────────── */
.wl-answers-list { display:flex;flex-direction:column;gap:1rem; }
.wl-answer-item { background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem; }
.wl-answer-q { font-size:.875rem;color:var(--text);margin-bottom:.6rem;line-height:1.4; }
.wl-answer-q strong { color:var(--purple-light);margin-right:.4rem; }
.wl-answer-item audio { width:100%;height:36px;filter:invert(1) hue-rotate(200deg) brightness(.9);border-radius:var(--radius); }

/* ─── ADMIN: layout novo com abas horizontais ─────────── */
.admin-layout { display:flex;flex-direction:column;gap:1.5rem; }
.admin-tabs-bar { display:flex;flex-wrap:wrap;gap:.375rem;padding:.75rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl); }
.admin-tab-link { padding:.45rem .875rem;border-radius:var(--radius);font-size:.82rem;font-weight:500;color:var(--text-muted);transition:var(--transition);white-space:nowrap;text-decoration:none;border:1px solid transparent; }
.admin-tab-link:hover { background:rgba(139,92,246,.1);color:var(--purple-light); }
.admin-tab-link.active { background:rgba(139,92,246,.18);color:var(--purple-light);border-color:rgba(139,92,246,.4); }
.admin-content { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem; }
.admin-content h2 { font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:1.25rem; }
.panel-section { margin-bottom:2rem; }
.form-row-2 { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }

/* ─── LOJA PREMIUM ────────────────────────────────────── */
.dash-link-card { text-decoration:none;cursor:pointer;transition:var(--transition);display:block; }
.dash-link-card:hover { border-color:var(--purple);transform:translateY(-3px); }
.dash-link-card h3 { color:var(--purple-light); }
.dash-link-card p { font-size:.875rem;margin-top:.3rem; }

/* ─── PWA INSTALL BUTTON ─────────────────────────────── */
#pwaInstallBtn { display:none; }
#pwaInstallBtn:not(.hidden) { display:inline-flex;align-items:center;gap:.5rem;position:fixed;bottom:1.5rem;right:1.5rem;z-index:300;animation:fadeInUp .4s ease both; }
.whatsapp-float {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: var(--transition);
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 32px rgba(37,211,102,.55); }
@media (max-width: 768px) { .whatsapp-float { left: 1rem; bottom: 1rem; width: 50px; height: 50px; } .whatsapp-float svg { width: 24px; height: 24px; } }

/* ─── RESPONSIVE v4 ──────────────────────────────────── */
@media (max-width:768px) {
  .ucp-grid { grid-template-columns:1fr 1fr; }
  .need-bar-item { grid-template-columns:100px 1fr 42px; }
  .vehicles-grid { grid-template-columns:1fr; }
  .vstat { grid-template-columns:90px 1fr 40px; }
  .form-row-2 { grid-template-columns:1fr; }
  .admin-tabs-bar { gap:.25rem; }
  .admin-tab-link { font-size:.78rem;padding:.4rem .6rem; }
  .profile-stats-bar .pstat { min-width:70px; }
}
@media (max-width:480px) {
  .ucp-grid { grid-template-columns:1fr; }
  .inv-tabs { flex-direction:column; }
  .inv-tab { text-align:center; }
}

/* ─── MAPA ────────────────────────────────────────────── */
.mapa-page .page-head { margin-bottom: 1.25rem; }
.mapa-wrap {
  display: flex;
  gap: 1rem;
  height: 72vh;
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: var(--bg-2);
}
.mapa-sidebar {
  width: 260px;
  flex-shrink: 0;
  padding: 1rem;
  background: var(--bg-3);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.mapa-status { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-muted); margin-bottom:1rem; }
.mapa-status .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.mapa-status .dot.online { background:var(--green); box-shadow:0 0 6px var(--green); }
.mapa-status .dot.offline { background:var(--red); }
.mapa-filtros { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.25rem; }
.mapa-filtro { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text); cursor:pointer; }
.mapa-legenda { width:11px; height:11px; border-radius:3px; display:inline-block; flex-shrink:0; }
.mapa-contadores {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem;
  font-size: .8rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}
#mapaCanvas { flex: 1; background: #05050a; }

/* Popups do Leaflet no tema escuro do site */
.leaflet-popup-content-wrapper { background: var(--bg-3); color: var(--text); border-radius: 8px; }
.leaflet-popup-tip { background: var(--bg-3); }
.popup-titulo { font-weight: 700; margin-bottom: .3rem; font-size: .9rem; color: var(--text); }
.popup-linha { font-size: .78rem; color: var(--text-muted); margin-bottom: .15rem; }

/* Ícones SVG dos marcadores (casinha/prédio/pessoa) */
.mapa-icon { background: transparent; border: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); cursor: pointer; }

/* Botão de tela cheia no canto do mapa, ao lado do +/- do Leaflet */
.mapa-fullscreen-btn {
  width: 34px; height: 34px; background: #fff; border: 2px solid rgba(0,0,0,.2); border-radius: 4px;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: #111;
}
.mapa-fullscreen-btn:hover { background: #f4f4f4; }

@media (max-width: 768px) {
  .mapa-wrap { flex-direction: column; height: auto; }
  .mapa-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 220px; }
  #mapaCanvas { height: 60vh; }
}

/* ─── CORREÇÃO: rolagem horizontal em telas pequenas ──────────────────────
   Vários grids usavam minmax(Npx,1fr) com N maior que a largura útil da
   tela em celulares (largura da tela − padding lateral do .container).
   Como uma trilha de grid não encolhe abaixo do mínimo definido, isso
   forçava a página inteira a ficar mais larga que a tela — e era
   exatamente isso que permitia "arrastar" a página para o lado e revelar
   conteúdo cortado. Em telas ≤600px essas grids passam a ter 1 coluna. */
@media (max-width:380px){
  .logo-text{display:none}
}

@media (max-width: 600px) {
  .features-grid, .dash-grid, .dash-grid-3, .shop-grid, .rules-grid,
  .news-grid, .news-grid-big, .social-grid, .factions-grid,
  .auction-grid, .events-grid-big, .vehicles-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── MUSIC PLAYER WIDGET (/public/js/musicPlayer.js) ─────────────────────── */
.music-player-panel {
  position: fixed; right: 1rem; bottom: 1rem; width: 340px; max-width: calc(100vw - 2rem);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 1500; overflow: hidden;
}
.music-player-panel.hidden { display: none; }
.music-player-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem; background: var(--bg-3); border-bottom: 1px solid var(--border);
}
.music-player-title { font-size: .82rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: .25rem; }
.music-player-close:hover { color: var(--text); }
.music-player-body { line-height: 0; }
.music-player-body iframe { display: block; border: none; }

.music-search-widget { display: flex; flex-direction: column; gap: .75rem; }
.music-search-form { display: flex; gap: .5rem; }
.music-search-input {
  flex: 1; background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
  padding: .6rem .85rem; border-radius: var(--radius); font-size: 16px;
}
.music-search-results { display: flex; flex-direction: column; gap: .5rem; }
.music-result-card {
  display: flex; align-items: center; gap: .75rem; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem;
}
.music-result-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.music-result-thumb-ph { display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 1.1rem; }
.music-result-info { flex: 1; min-width: 0; }
.music-result-title { font-size: .85rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-result-artist { font-size: .75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-result-provider { opacity: .8; }
.music-result-play { flex-shrink: 0; }

@media (max-width: 480px) {
  .music-player-panel { left: 1rem; right: 1rem; width: auto; }
}

/* ── Página /status ─────────────────────────────────────────────────────── */
.status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-top:1.5rem; }
.status-card { display:flex; flex-direction:column; gap:.25rem; }
.status-card-label { font-size:.8rem; color:var(--text-muted); }
.status-card strong { font-size:1.6rem; font-family:var(--font-display); color:var(--purple-light); }

/* ── Página /ucp (necessidades do personagem) ──────────────────────────── */
.ucp-needs-grid { display:flex; flex-direction:column; gap:.85rem; margin-top:1rem; }
.ucp-need { display:flex; align-items:center; gap:.75rem; }
.ucp-need-label { flex:0 0 170px; font-size:.85rem; color:var(--text-dim); }
.ucp-need-bar { flex:1; height:10px; border-radius:6px; background:var(--bg-3); overflow:hidden; }
.ucp-need-fill { height:100%; background:linear-gradient(90deg,var(--purple-dark),var(--purple-light)); border-radius:6px; transition:width .3s; }
.ucp-need strong { flex:0 0 42px; text-align:right; font-size:.85rem; color:var(--text); }

/* ── Barra de carregamento entre páginas ────────────────────────────────── */
#nav-progress { position:fixed; top:0; left:0; height:3px; width:0; opacity:0;
  background:linear-gradient(90deg,var(--purple-dark),var(--purple-light),#ec4899);
  z-index:99999; box-shadow:0 0 8px rgba(139,92,246,.6); pointer-events:none; }

/* ── Tela de piadas durante geração do QR Code Pix ──────────────────────── */
#funLoadingOverlay { position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,10,.92); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .25s; }
#funLoadingOverlay.show { opacity:1; pointer-events:all; }
.fun-loading-box { text-align:center; max-width:320px; padding:2rem; }
.fun-loading-spinner { width:52px; height:52px; margin:0 auto 1.5rem; border-radius:50%;
  border:4px solid rgba(139,92,246,.2); border-top-color:var(--purple-light); animation:fun-spin 1s linear infinite; }
@keyframes fun-spin { to { transform:rotate(360deg); } }
#funLoadingText { font-family:var(--font-display); font-size:1.05rem; color:var(--text); min-height:2.6em; }