/* QG Control · painel
   layout: sala de comando. trilho lateral fixo, palco central com profundidade 3D, camada de ambiente viva atrás */
:root{
  --bg:#050b07; --bg2:#08120c; --panel:#0c1912; --panel2:#0f2017; --line:#1b3324; --line2:#2c553d;
  --txt:#e7f6ed; --mute:#98b6a3; --dim:#6c8a77;
  --g:#8dffb8; --g2:#4fe08b; --g3:#1f7a47; --glow:rgba(141,255,184,.32);
  --warn:#ffc26b; --warnbg:#251b08; --bad:#ff9b9b; --badbg:#2a0f11; --info:#9ec9ff;
  --fd:'Chakra Petch',system-ui,sans-serif; --fb:'Manrope',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
  --e1:cubic-bezier(.22,1,.36,1); --e2:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--fb);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--g)}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== ambiente ===== */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none}
.amb-grid{position:fixed;inset:-20% -20% 0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(141,255,184,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(141,255,184,.045) 1px,transparent 1px);background-size:56px 56px;transform:perspective(900px) rotateX(62deg) translateY(var(--gy,0));transform-origin:50% 100%;mask-image:linear-gradient(0deg,#000 0,transparent 70%);-webkit-mask-image:linear-gradient(0deg,#000 0,transparent 70%);animation:gridmove 14s linear infinite}
@keyframes gridmove{to{background-position:0 56px,0 0}}
.amb-glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(141,255,184,.11),transparent 62%);transform:translate3d(var(--mx,60vw),var(--my,30vh),0);transition:transform .5s var(--e1)}
.amb-noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== login ===== */
.gate{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left))}
.gate-card{width:min(460px,100%);padding:40px 32px;border-radius:28px;background:linear-gradient(160deg,rgba(15,32,23,.86),rgba(8,18,12,.86));border:1px solid var(--line2);backdrop-filter:blur(14px);text-align:center;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 90px rgba(141,255,184,.08);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--e1)}
.gate-card h1{font-family:var(--fd);font-size:2rem;line-height:1.1;margin:18px 0 10px;text-wrap:balance}
.gate-card p{color:var(--mute);margin-bottom:26px}
.emblem{width:120px;height:120px;margin:0 auto;position:relative;transform-style:preserve-3d;animation:emspin 9s linear infinite}
.emblem svg{position:absolute;inset:0;width:100%;height:100%}
.emblem .l2{transform:translateZ(-18px);opacity:.45}
.emblem .l3{transform:translateZ(18px)}
@keyframes emspin{to{transform:rotateY(360deg)}}
.err{margin-top:14px;color:var(--bad);font-size:.9rem}

/* ===== botões ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 20px;border-radius:13px;border:1px solid transparent;font-weight:800;font-size:.93rem;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .35s var(--spring),box-shadow .35s var(--e1),background .3s,border-color .3s,opacity .3s;will-change:transform}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-g{background:var(--g);color:#03110a;box-shadow:0 8px 30px rgba(141,255,184,.22)}
.btn-g:hover{box-shadow:0 10px 40px rgba(141,255,184,.42);transform:translateY(-2px)}
.btn-o{background:rgba(141,255,184,.05);border-color:var(--line2);color:var(--txt)}
.btn-o:hover{border-color:var(--g);background:rgba(141,255,184,.09)}
.btn-bad{background:transparent;border-color:#5a2427;color:var(--bad)}
.btn-bad:hover{background:var(--badbg)}
.btn-y{background:var(--warn);color:#2a1a02}
.btn-sm{min-height:36px;padding:6px 14px;font-size:.82rem;border-radius:10px}
.btn-icon{min-height:40px;width:40px;padding:0;border-radius:12px}
.btn .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.btn .shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:shine 4s var(--e2) infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.discord-ic{width:20px;height:20px}
.btn svg:not(.discord-ic){width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.btn-icon svg:not(.discord-ic){width:20px;height:20px}
.chip svg{width:15px;height:15px;flex:none;stroke:var(--g);fill:none;stroke-width:1.8}
.empty svg,.toast svg{flex:none}

/* ===== shell ===== */
.shell{position:relative;z-index:2;display:flex;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;width:252px;flex:none;display:flex;flex-direction:column;gap:18px;padding:22px 14px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(8,18,12,.92),rgba(5,11,7,.92));backdrop-filter:blur(12px);z-index:20}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;font-family:var(--fd);font-weight:700;letter-spacing:.05em}
.brand svg{width:30px;height:30px;filter:drop-shadow(0 0 10px var(--glow))}
.brand .core{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.fac{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--panel);overflow:hidden;cursor:default}
.fac::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(141,255,184,.08) 50%,transparent 70%);background-size:250% 100%;animation:sweep 6s linear infinite}
@keyframes sweep{to{background-position:-250% 0}}
.fac-tag{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;font-family:var(--fd);font-weight:700;background:radial-gradient(circle at 30% 30%,#3c1015,#1f070a);color:#ffb0b0;border:1px solid #4d1a1f}
.fac b{display:block;font-size:.95rem;line-height:1.2}
.fac small{color:var(--mute);font-size:.75rem}
.fac select{all:unset;cursor:pointer;font-weight:700;font-size:.95rem}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;border-radius:12px;color:var(--mute);text-decoration:none;font-size:.92rem;font-weight:600;transition:color .3s,background .3s}
.nav a svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .4s var(--spring)}
.nav a:hover{color:var(--txt);background:rgba(141,255,184,.04)}
.nav a:hover svg{transform:scale(1.15) rotate(-6deg)}
.nav a[aria-current=page]{color:var(--g);background:linear-gradient(90deg,rgba(141,255,184,.14),rgba(141,255,184,.03))}
.nav a[aria-current=page]::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--g);box-shadow:0 0 14px var(--g)}
.nav .badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font-family:var(--fm);font-size:.7rem;font-weight:700;background:var(--g);color:#03110a;animation:pop .5s var(--spring)}
.nav .badge.y{background:var(--warn);color:#2a1a02}
@keyframes pop{from{transform:scale(0)}}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;border:1px solid var(--line);font-size:.78rem;color:var(--mute)}
.led{display:flex;align-items:center;gap:9px}
.led i{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.led.on i{background:var(--g);box-shadow:0 0 10px var(--g);animation:pulse 1.8s ease-in-out infinite}
.led.off i{background:var(--bad)}

.stage{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px clamp(16px,3vw,36px);background:linear-gradient(180deg,rgba(5,11,7,.92),rgba(5,11,7,.6));backdrop-filter:blur(12px);border-bottom:1px solid rgba(27,51,36,.6)}
.menu-btn{display:none}
.crumbs{display:flex;flex-direction:column;min-width:0}
.crumbs small{font-family:var(--fm);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.crumbs h1{font-family:var(--fd);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.1;text-wrap:balance}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(12,25,18,.8);font-size:.8rem;color:var(--mute);white-space:nowrap}
.chip b{color:var(--txt);font-family:var(--fm);font-weight:500;font-variant-numeric:tabular-nums}
.chip.demo{border-style:dashed;border-color:var(--line2)}
.user{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.user span{font-size:.84rem}
.user em{font-style:normal;color:var(--g)}

.view{position:relative;padding:24px clamp(16px,3vw,36px) 70px;display:flex;flex-direction:column;gap:20px;perspective:1600px}
.view.enter>*{animation:vin .8s var(--e1) both}
.view.enter>*:nth-child(2){animation-delay:.06s}.view.enter>*:nth-child(3){animation-delay:.12s}.view.enter>*:nth-child(4){animation-delay:.18s}.view.enter>*:nth-child(5){animation-delay:.24s}.view.enter>*:nth-child(6){animation-delay:.3s}
@keyframes vin{from{opacity:0;transform:translateY(26px) rotateX(8deg) scale(.98)}}

/* ===== superfícies ===== */
.card{position:relative;border-radius:var(--r);background:linear-gradient(160deg,rgba(15,32,23,.92),rgba(9,20,14,.92));border:1px solid var(--line);padding:20px;min-width:0;transform-style:preserve-3d;transition:border-color .4s,box-shadow .4s}
.card.tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .5s var(--e1),border-color .4s,box-shadow .4s}
.card.tilt:hover{border-color:var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.card .spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--cx,50%) var(--cy,50%),rgba(141,255,184,.11),transparent 45%);opacity:0;transition:opacity .4s}
.card.tilt:hover .spot{opacity:1}
.card h2{font-family:var(--fd);font-size:1.12rem;display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;text-wrap:balance}
.card h2 small{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;color:var(--dim);font-weight:500;text-transform:uppercase}
.pop3d{transform:translateZ(30px)}
.row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.row>*{flex:1 1 320px;min-width:0}
.grid-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{display:flex;flex-direction:column;gap:4px;overflow:hidden}
.kpi .lbl{font-size:.8rem;color:var(--mute);display:flex;align-items:center;gap:8px}
.kpi .lbl svg{width:16px;height:16px;stroke:var(--g);fill:none;stroke-width:1.8}
.kpi .val{font-family:var(--fd);font-size:2.3rem;line-height:1.05;font-variant-numeric:tabular-nums;transform:translateZ(24px)}
.kpi .sub{font-size:.76rem;color:var(--g)}
.kpi.warn{border-color:#4a3711;background:linear-gradient(160deg,rgba(40,29,10,.92),rgba(20,15,6,.92))}
.kpi.warn .val{color:var(--warn)}.kpi.warn .sub{color:#e6cd99}.kpi.warn .lbl svg{stroke:var(--warn)}
.kpi .spark{position:absolute;right:-10px;bottom:-14px;width:120px;height:60px;opacity:.3}

/* meta (anel 3D) */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;overflow:hidden}
.ring{position:relative;width:200px;height:200px;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0deg)*1.6)) rotateY(calc(var(--ry,0deg)*1.6))}
.ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring .orbit{transform:translateZ(-30px);animation:orbit 18s linear infinite;transform-origin:50% 50%}
@keyframes orbit{to{transform:translateZ(-30px) rotate(360deg)}}
.ring .arc{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--e1);filter:drop-shadow(0 0 10px var(--g))}
.ring.go .arc{stroke-dashoffset:var(--off)}
.ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;transform:translateZ(40px)}
.ring .mid b{font-family:var(--fd);font-size:2.6rem;line-height:1;text-shadow:0 0 30px var(--glow)}
.ring .mid>span{font-size:.72rem;color:var(--mute);font-family:var(--fm);letter-spacing:.1em}
.hero-txt h3{font-family:var(--fd);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.15;margin-bottom:8px;text-wrap:balance}
.hero-txt p{color:var(--mute);max-width:52ch}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.count{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* gráfico */
.chart{width:100%;height:220px;display:block;overflow:visible}
.chart .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.1s var(--e1)}
.chart.go .bar{transform:scaleY(1)}
.chart .lineP{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2s var(--e1) .3s}
.chart.go .lineP{stroke-dashoffset:0}
.chart text{fill:var(--mute);font-family:var(--fm);font-size:11px}
.legend{display:flex;gap:16px;font-size:.76rem;color:var(--mute)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* pódio 3D */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;height:230px;perspective:900px;margin-bottom:14px}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px;transform-style:preserve-3d;min-width:0}
.pod .who{text-align:center;font-size:.82rem;line-height:1.25;min-width:0;max-width:100%}
.pod .who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .who span{font-family:var(--fm);font-size:.72rem;color:var(--mute)}
.block{position:relative;width:100%;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,rgba(141,255,184,.28),rgba(31,122,71,.22));border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--fd);font-size:1.8rem;color:var(--g);transform-origin:50% 100%;transform:rotateX(18deg) scaleY(0);transition:transform 1.2s var(--spring);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 20px 40px rgba(0,0,0,.4)}
.block::before{content:"";position:absolute;left:-1px;right:-1px;top:-14px;height:14px;border-radius:10px 10px 0 0;background:rgba(141,255,184,.35);transform:rotateX(60deg);transform-origin:bottom}
.podium.go .block{transform:rotateX(18deg) scaleY(1)}
.pod.p1 .block{height:130px;transition-delay:.25s;background:linear-gradient(180deg,rgba(141,255,184,.5),rgba(31,122,71,.3));box-shadow:0 0 50px rgba(141,255,184,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.pod.p2 .block{height:96px;transition-delay:.1s}
.pod.p3 .block{height:70px;transition-delay:.4s}
.crown{width:26px;height:26px;fill:var(--warn);filter:drop-shadow(0 0 10px rgba(255,194,107,.6));animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}

/* avatar */
.av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-size:.8rem;color:var(--g);background:radial-gradient(circle at 30% 30%,#174a2e,#0a2316);overflow:visible}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av.lg{width:64px;height:64px;font-size:1.2rem}
.av.xl{width:86px;height:86px;font-size:1.5rem}
.av .st{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--panel);background:var(--dim)}
.av .st.online{background:var(--g);box-shadow:0 0 8px var(--g)}
.av .st.sumido{background:var(--bad)}
.av .st.ativo{background:#4b7a5d}
.av.ringed::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--g);opacity:.0;animation:ringp 2.4s ease-out infinite}
@keyframes ringp{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}

/* listas */
.list{display:flex;flex-direction:column;gap:9px}
.li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;border:1px solid var(--line);background:rgba(141,255,184,.02);min-width:0;transition:border-color .3s,background .3s,transform .4s var(--e1)}
.li:hover{border-color:var(--line2);background:rgba(141,255,184,.04);transform:translateX(3px)}
.li .grow{flex:1;min-width:0;line-height:1.35}
.li .grow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.li .grow small{display:block;color:var(--mute);font-size:.76rem}
.meter{height:8px;border-radius:6px;background:var(--line);overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--g3),var(--g));width:var(--v,0%);transition:width 1.4s var(--e1);box-shadow:0 0 12px rgba(141,255,184,.35)}
.meter.y i{background:linear-gradient(90deg,#7a5a1f,var(--warn))}
.meter.r i{background:linear-gradient(90deg,#7a2a2f,var(--bad))}
.num{font-family:var(--fm);font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-family:var(--fm);font-size:.7rem;white-space:nowrap;border:1px solid var(--line2);color:var(--g)}
.pill.y{border-color:#5a4214;color:var(--warn);background:var(--warnbg)}
.pill.r{border-color:#5a2427;color:var(--bad);background:var(--badbg)}
.pill.on{background:#0f2a1a;border-color:var(--g3)}
.pill.mute{color:var(--mute);border-color:var(--line)}

/* feed */
.feed{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;mask-image:linear-gradient(180deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent)}
.ev{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 6px;border-radius:10px;font-size:.86rem;color:#cfe2d6}
.ev.new{animation:evin .9s var(--e1)}
@keyframes evin{from{opacity:0;transform:translateX(-18px);background:rgba(141,255,184,.14)}50%{background:rgba(141,255,184,.08)}to{background:transparent}}
.ev time{font-family:var(--fm);font-size:.7rem;color:var(--dim);width:44px}
.src{font-family:var(--fm);font-size:.6rem;padding:2px 6px;border-radius:6px;border:1px solid var(--line2);color:var(--g);letter-spacing:.06em}
.src.FIVEM{color:#9ec9ff;border-color:#264766}
.src.PAINEL{color:var(--warn);border-color:#5a4214}

/* alertas */
.alert{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:15px;border:1px solid #4a3711;background:linear-gradient(90deg,rgba(255,194,107,.08),rgba(255,194,107,.02));animation:alertin .8s var(--e1) both}
.alert p{flex:1 1 220px;color:#f2e2bd;font-size:.92rem}
.alert svg{width:22px;height:22px;stroke:var(--warn);fill:none;stroke-width:1.8;flex:none;animation:shake 4s ease-in-out infinite}
@keyframes shake{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-12deg)}96%{transform:rotate(10deg)}}
@keyframes alertin{from{opacity:0;transform:translateY(-10px)}}

/* membros */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:13px;border:1px solid var(--line2);background:rgba(5,11,7,.7);transition:border-color .3s,box-shadow .3s}
.search:focus-within{border-color:var(--g);box-shadow:0 0 0 4px rgba(141,255,184,.1)}
.search input{all:unset;flex:1;min-width:0;font-size:.92rem}
.search svg{width:18px;height:18px;stroke:var(--mute);fill:none;stroke-width:1.8}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:38px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--mute);font-size:.82rem;cursor:pointer;transition:all .3s var(--e1)}
.seg button[aria-pressed=true]{background:#12301f;border-color:var(--g);color:var(--g)}
.seg button em{font-style:normal;font-family:var(--fm);font-size:.7rem;opacity:.7;margin-left:4px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mcard{cursor:pointer;display:flex;flex-direction:column;gap:14px;text-align:left;width:100%;font:inherit;color:inherit}
.mcard .hd{display:flex;align-items:center;gap:12px;transform:translateZ(26px)}
.mcard .hd .grow{min-width:0;flex:1}
.mcard .hd b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.mcard .hd .pill{margin:3px 0 4px}
.mcard .hd small{display:block}
.mcard .hd small{font-family:var(--fm);font-size:.7rem;color:var(--dim)}
.mcard .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;transform:translateZ(14px)}
.mcard .stats div{padding:8px;border-radius:10px;background:rgba(5,11,7,.6);text-align:center}
.mcard .stats b{display:block;font-family:var(--fd);font-size:1.05rem;font-variant-numeric:tabular-nums}
.mcard .stats span{font-size:.66rem;color:var(--mute)}
.mcard.leave{animation:leave .5s var(--e1) forwards}
@keyframes leave{to{opacity:0;transform:scale(.85) rotateX(30deg)}}
.flash{animation:flash 1.4s var(--e1)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(141,255,184,.7)}100%{box-shadow:0 0 0 18px rgba(141,255,184,0)}}

/* gaveta do membro */
.drawer-bg{position:fixed;inset:0;z-index:60;background:rgba(2,6,4,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity .4s}
.drawer-bg.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(480px,100%);background:linear-gradient(180deg,#0b1811,#060d09);border-left:1px solid var(--line2);box-shadow:-30px 0 80px rgba(0,0,0,.6);transform:translateX(105%) rotateY(-8deg);transform-origin:100% 50%;transition:transform .6s var(--e1);overflow:auto;padding:22px max(16px,env(safe-area-inset-right)) 40px 22px;display:flex;flex-direction:column;gap:18px}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;gap:16px}
.dhead h3{font-family:var(--fd);font-size:1.5rem;line-height:1.1}
.dclose{margin-left:auto}
.dstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dstats div{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.dstats b{display:block;font-family:var(--fd);font-size:1.5rem;font-variant-numeric:tabular-nums}
.dstats span{font-size:.76rem;color:var(--mute)}
.ranks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ranks button{min-height:44px;border-radius:11px;border:1px solid var(--line2);background:transparent;color:var(--mute);font-size:.8rem;cursor:pointer;transition:all .3s var(--e1)}
.ranks button[aria-pressed=true]{background:var(--g);color:#03110a;border-color:var(--g);font-weight:800;box-shadow:0 0 24px var(--glow)}
.ranks button:disabled{opacity:.35;cursor:not-allowed}
.dsec h4{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:10px}

/* candidatos */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.cand{display:flex;flex-direction:column;gap:14px}
.cand dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.84rem}
.cand dt{color:var(--mute)}
.cand dd{min-width:0;overflow-wrap:anywhere}
.quote{position:relative;padding:12px 14px;border-radius:12px;background:rgba(5,11,7,.7);font-size:.86rem;color:#d4e6da;border-left:0}
.quote small{display:block;color:var(--dim);font-size:.72rem;margin-bottom:4px}
.stars{display:flex;gap:4px}
.stars button{all:unset;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;transition:transform .3s var(--spring)}
.stars button:hover{transform:scale(1.25)}
.stars svg{width:20px;height:20px;fill:var(--line2);transition:fill .2s}
.stars button.on svg{fill:var(--warn)}
.acts{display:flex;gap:10px;margin-top:auto}
.acts .btn{flex:1}
.cand.out{animation:candout .6s var(--e1) forwards}
.cand.out.ok{animation-name:candok}
@keyframes candout{to{opacity:0;transform:translateX(-40px) rotateY(25deg) scale(.9)}}
@keyframes candok{30%{transform:translateZ(60px) scale(1.04);box-shadow:0 0 60px var(--glow)}100%{opacity:0;transform:translateY(-60px) scale(.9)}}
.limit{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:15px;border:1px solid var(--g3);background:rgba(141,255,184,.05)}
.limit p{flex:1 1 220px;font-size:.9rem}

/* metas */
.count-down{display:flex;gap:10px}
.cd{min-width:66px;padding:10px;border-radius:12px;background:rgba(5,11,7,.7);border:1px solid var(--line);text-align:center}
.cd b{display:block;font-family:var(--fd);font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.cd span{font-size:.66rem;color:var(--mute);font-family:var(--fm);letter-spacing:.1em}
.rk{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(80px,1.4fr) 76px;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;transition:background .3s}
.rk:hover{background:rgba(141,255,184,.04)}
.rk .pos{font-family:var(--fd);color:var(--g);font-size:1.05rem;text-align:center}
.rk .nm{display:flex;align-items:center;gap:10px;min-width:0}
.rk .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600}
.ent{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(141,255,184,.02)}
.ent .proof{flex:none;width:62px;height:46px;border-radius:9px;background:#0f2a1a;display:grid;place-items:center;overflow:hidden;font-family:var(--fm);font-size:.62rem;color:var(--dim);border:1px solid var(--line)}
.ent .proof img{width:100%;height:100%;object-fit:cover}
.ent .grow{flex:1 1 160px;min-width:0;line-height:1.35}
.ent .grow small{display:block;color:var(--mute);font-size:.76rem}
.ent.out{animation:candout .5s var(--e1) forwards}
.plus{position:fixed;z-index:80;pointer-events:none;font-family:var(--fd);font-weight:700;font-size:1.4rem;color:var(--g);text-shadow:0 0 20px var(--g);animation:plus 1.2s var(--e1) forwards}
@keyframes plus{to{opacity:0;transform:translateY(-70px) scale(1.4)}}

/* advertências */
.wl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:15px;border:1px solid var(--line);background:rgba(141,255,184,.02)}
.wl .grow{flex:1 1 220px;min-width:0;line-height:1.4}
.wl .grow small{display:block;color:var(--mute);font-size:.8rem}
.lvl{display:flex;gap:4px}
.lvl i{width:16px;height:6px;border-radius:3px;background:var(--line)}
.lvl i.on{background:var(--warn);box-shadow:0 0 8px rgba(255,194,107,.5)}
.lvl.max i.on{background:var(--bad);box-shadow:0 0 8px rgba(255,155,155,.5)}
.wl.cleared{opacity:.45}

/* cidade */
.radar{position:relative;width:100%;aspect-ratio:1;max-width:320px;margin:0 auto;border-radius:50%;background:radial-gradient(circle,rgba(141,255,184,.08) 0,transparent 70%);border:1px solid var(--line2);overflow:hidden}
.radar::before,.radar::after{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid var(--line)}
.radar::after{inset:34%}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(141,255,184,.35),rgba(141,255,184,0) 22%);animation:radar 4s linear infinite}
@keyframes radar{to{transform:rotate(360deg)}}
.blip{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g);animation:blip 2.4s ease-in-out infinite}
.blip::after{content:attr(data-n);position:absolute;left:14px;top:-4px;font-size:.62rem;font-family:var(--fm);color:var(--mute);white-space:nowrap}
@keyframes blip{50%{transform:scale(.6);opacity:.6}}
.bau-in{color:var(--g)}.bau-out{color:var(--warn)}

/* config */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-size:.8rem;color:var(--mute)}
.fld input,.fld select,.fld textarea{min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(5,11,7,.8);transition:border-color .3s,box-shadow .3s;width:100%}
.fld textarea{min-height:90px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 4px rgba(141,255,184,.1)}
.fld small{color:var(--dim);font-size:.74rem}
.switch.full{grid-column:1/-1}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px}
.switch input{appearance:none;width:46px;height:26px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;transition:background .3s;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--txt);transition:transform .35s var(--spring)}
.switch input:checked{background:var(--g3)}
.switch input:checked::after{transform:translateX(20px);background:var(--g)}
.keybox{display:flex;gap:8px;flex-wrap:wrap}
.keybox code{flex:1 1 260px;min-width:0;padding:12px 14px;border-radius:12px;background:#040906;border:1px solid var(--line);font-family:var(--fm);font-size:.78rem;color:var(--g);overflow-wrap:anywhere;filter:blur(5px);transition:filter .4s}
.keybox code.show{filter:none}
.maprow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center}
.maprow b{font-family:var(--fd)}

/* modal e toast */
.modal-bg{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(2,6,4,.65);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.modal-bg.on{opacity:1}
.modal{width:min(460px,100%);padding:24px;border-radius:22px;background:linear-gradient(160deg,#0f2017,#08130c);border:1px solid var(--line2);box-shadow:0 40px 100px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:16px;transform:perspective(900px) rotateX(14deg) translateY(30px) scale(.96);transition:transform .5s var(--e1)}
.modal-bg.on .modal{transform:none}
.modal h3{font-family:var(--fd);font-size:1.3rem}
.modal .acts{justify-content:flex-end}
.modal .acts .btn{flex:0 0 auto}
.toasts{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100% - 32px))}
.toast{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:14px;background:#0f2a1a;border:1px solid var(--g3);color:#d2ffe3;font-size:.88rem;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:tin .5s var(--spring)}
.toast.err{background:#2a0f11;border-color:#5a2427;color:#ffd2d2}
.toast svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.toast.out{animation:tout .4s var(--e1) forwards}
@keyframes tin{from{opacity:0;transform:translateX(40px) scale(.9)}}
@keyframes tout{to{opacity:0;transform:translateX(40px)}}
#confetti{position:fixed;inset:0;z-index:85;pointer-events:none}

.note{color:var(--mute);font-size:.88rem;line-height:1.55;max-width:75ch}
.note b{color:var(--g)}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;border-radius:var(--r);border:1px dashed var(--line2);text-align:center;color:var(--mute)}
.empty svg{width:44px;height:44px;stroke:var(--g3);fill:none;stroke-width:1.4;animation:float 4s ease-in-out infinite}
.skel{border-radius:var(--r);height:120px;background:linear-gradient(90deg,var(--panel) 0,var(--panel2) 50%,var(--panel) 100%);background-size:200% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

/* convite da cidade */
.invite{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.inv-txt{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.inv-h{font-family:var(--fd);font-size:clamp(1.5rem,3vw,2.1rem)!important;line-height:1.1;margin:0!important;display:block!important;text-wrap:balance}
.inv-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:4px 0}
.inv-list li{display:flex;gap:12px;align-items:flex-start}
.inv-list b{display:block;font-size:.95rem}
.inv-list span{color:var(--mute);font-size:.86rem;line-height:1.45}
.inv-demo{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.75;filter:saturate(.8)}
.msg{white-space:pre-wrap;padding:16px;border-radius:14px;background:#040906;border:1px solid var(--line);font-size:.9rem;line-height:1.6;color:#d6eadd;max-height:340px;overflow:auto;user-select:text}
@media (max-width:900px){.invite{grid-template-columns:1fr}.inv-demo{order:-1}.inv-demo .radar{max-width:220px}}

/* ===== responsivo ===== */
@media (max-width:1100px){ .grid-k{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .rail{position:fixed;left:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .5s var(--e1);box-shadow:30px 0 80px rgba(0,0,0,.6);padding-top:max(22px,env(safe-area-inset-top))}
  .rail.open{transform:none}
  .menu-btn{display:inline-flex}
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center}
  .hero-txt p{margin:0 auto}.hero-stats{justify-content:center}
  .form{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid-k{gap:10px}
  .kpi .val{font-size:1.8rem}
  .ring{width:170px;height:170px}
  .rk{grid-template-columns:24px minmax(0,1fr) 64px}
  .rk .meter{display:none}
  .top .chip.week{display:none}
  .user>span:not(.av){display:none}
  .user{padding:4px}
  .maprow{grid-template-columns:1fr}
  .podium{height:200px}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ring .arc{stroke-dashoffset:var(--off)!important}
  .chart .bar{transform:none!important}.chart .lineP{stroke-dashoffset:0!important}
  .block{transform:rotateX(18deg)!important}
  #bgfx,.amb-glow{display:none}
}