/* ============================================
   4Distrito — Home CSS v3
   Dashboard grid (Ryse-inspired)
   Alta especificidade via #fd-home
   ============================================ */

/* ==========================================
   PALETA DE CORES — altere aqui p/ mudar todo o site
   ========================================== */
:root{
  --fd-bg:#0a0c0f;                          /* cor de fundo principal */
  --fd-surface:rgba(255,255,255,.04);       /* fundo dos cards/botoes */
  --fd-border:rgba(255,255,255,.08);        /* borda dos cards */
  --fd-text:#e4e4e7;                        /* cor do texto principal */
  --fd-dim:rgba(255,255,255,.45);           /* texto secundario/apagado */

  /* ACCENT — cor principal dos botoes, badges, destaques */
  --fd-accent:#3b82f6;                      /* azul 4distrito */
  --fd-accent-hover:#60a5fa;                /* azul claro no hover */
  --fd-accent-dim:rgba(59,130,246,.12);     /* fundo sutil do accent */
  --fd-accent-glow:rgba(59,130,246,.25);    /* brilho/shadow do accent */
  --fd-accent-text:#fff;                    /* texto sobre o accent */

  /* SECONDARY — cor de tags, pills, badges secundarios */
  --fd-teal:#a0e8e0;                        /* teal/ciano */
  --fd-teal-dim:rgba(160,232,224,.12);      /* fundo sutil teal */

  /* STATUS */
  --fd-green:#22c55e;                       /* online */
  --fd-red:#ef4444;                         /* offline */

  /* CARDS */
  --fd-glass:rgba(255,255,255,.03);         /* fundo glass dos cards */
  --fd-r:16px;                              /* border-radius dos cards */
  --fd-rs:10px;                             /* border-radius botoes */
}

/* ==========================================
   BG — grid quadriculado + orbs flutuantes
   ========================================== */
#fd-home .fd-bg{position:fixed;inset:0;z-index:1;pointer-events:none}
#fd-home .fd-bg-grad{position:absolute;border-radius:50%}
/* orb gradiente superior-esquerdo */
#fd-home .fd-bg-grad--tl{top:-30%;left:-20%;width:70%;height:70%;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 70%)}
/* orb gradiente inferior-direito */
#fd-home .fd-bg-grad--br{bottom:-20%;right:-15%;width:60%;height:60%;background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%)}
/* grid quadriculado — background-size controla tamanho da celula */
#fd-home .fd-bg-grid{
  position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;               /* tamanho da celula do grid */
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);
}
/* orbs de blur flutuantes */
#fd-home .fd-bg-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;animation:fd-float 25s ease-in-out infinite}
#fd-home .fd-bg-orb--1{top:15%;left:8%;width:350px;height:350px;background:rgba(59,130,246,.08)}
#fd-home .fd-bg-orb--2{bottom:25%;right:8%;width:280px;height:280px;background:rgba(59,130,246,.06);animation-delay:-12s;animation-direction:reverse}
@keyframes fd-float{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-25px)}66%{transform:translate(-25px,30px)}}

/* ==========================================
   CONTAINER — largura maxima do conteudo
   ========================================== */
#fd-home .fd-wide{max-width:1320px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}  /* max-width: largura total */
@media(min-width:768px){#fd-home .fd-wide{padding-left:32px;padding-right:32px}}

/* ==========================================
   HEADER / NAV — barra fixa no topo
   ========================================== */
#fd-home .fd-header{
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:rgba(10,12,15,.82);           /* fundo do header (transparencia) */
  border-bottom:1px solid var(--fd-border);
}
#fd-home .fd-header-inner{
  display:flex;align-items:center;justify-content:center;
  gap:8px;height:56px;position:relative;    /* height: altura do header */
}
/* LOGO — tamanho da logo no header */
#fd-home .fd-header-logo img{width:36px;height:36px;border-radius:50%;display:block;transition:transform .2s}  /* width/height: tamanho logo */
#fd-home .fd-header-logo:hover img{transform:scale(1.08)}

/* LINKS do nav */
#fd-home .fd-nav{display:flex;gap:4px}
#fd-home .fd-nav-link{
  display:inline-block;padding:8px 16px;border-radius:8px;
  font-size:13px;font-weight:600;letter-spacing:.06em;   /* font-size: tamanho texto nav */
  color:var(--fd-dim);transition:all .2s;
}
#fd-home .fd-nav-link:hover{color:var(--fd-text);background:var(--fd-surface)}
#fd-home .fd-nav-link--active{color:var(--fd-text);background:var(--fd-surface);border:1px solid var(--fd-border)}

/* Perfil/login lado direito */
#fd-home .fd-profile{position:absolute;right:0;display:flex;align-items:center;gap:12px}
#fd-home .fd-greet{font-size:13px;color:var(--fd-dim);display:none}
#fd-home .fd-greet strong{color:var(--fd-text)}
@media(min-width:1024px){#fd-home .fd-greet{display:block}}
#fd-home .fd-avatar-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--fd-surface);border:1px solid var(--fd-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--fd-dim);transition:all .2s;
}
#fd-home .fd-avatar-btn:hover{border-color:rgba(255,255,255,.2);color:var(--fd-text)}

/* ---- Main ---- */
#fd-home .fd-main{position:relative;z-index:2;padding-top:24px;padding-bottom:0}

/* ==========================================
   GRID 2 COLUNAS — hero + sidebar
   ========================================== */
#fd-home .fd-frame{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){#fd-home .fd-frame{grid-template-columns:1.4fr 1fr}}  /* proporcao: hero 1.4 | side 1 */

/* ==========================================
   CARDS (PLATE) — estilo base dos cards
   ========================================== */
#fd-home .fd-plate{
  background:var(--fd-glass);              /* fundo do card */
  border:1px solid var(--fd-border);       /* borda do card */
  border-radius:var(--fd-r);               /* arredondamento do card */
  overflow:hidden;
}

/* ==========================================
   HERO PLATE — card principal com video
   ========================================== */
#fd-home .fd-plate--hero{display:flex;flex-direction:column}

#fd-home .fd-hero-media{
  position:relative;min-height:380px;overflow:hidden;    /* min-height: altura minima do hero */
  display:flex;flex-direction:column;justify-content:flex-end;
}
@media(min-width:900px){#fd-home .fd-hero-media{min-height:440px}}  /* altura hero desktop */

#fd-home .fd-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* scrim: gradiente escuro sobre o video */
#fd-home .fd-hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,12,15,.15) 0%,rgba(10,12,15,.8) 70%,rgba(10,12,15,.95) 100%);
}
/* badge "COMUNIDADE ABERTA" */
#fd-home .fd-hero-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  padding:5px 12px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.08em;   /* font-size: tamanho texto badge */
  background:var(--fd-accent);color:var(--fd-accent-text);
}
/* texto do hero */
#fd-home .fd-hero-text{position:relative;z-index:2;padding:0 24px 24px}
#fd-home .fd-hero-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--fd-accent);margin-bottom:8px}  /* kicker "4o DISTRITO RP" */
#fd-home .fd-hero-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;line-height:1.05;margin:0 0 12px;letter-spacing:-.02em;color:#fff}  /* titulo grande */
#fd-home .fd-hero-sub{font-size:14px;color:var(--fd-dim);margin:0;max-width:420px;line-height:1.5}  /* subtitulo */

#fd-home .fd-hero-foot{padding:16px 24px 20px;border-top:1px solid var(--fd-border)}
#fd-home .fd-hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#fd-home .fd-hero-notice{font-size:13px;color:var(--fd-dim);margin:0}
#fd-home .fd-hero-notice a{color:var(--fd-accent)!important}
#fd-home .fd-hero-notice a:hover{text-decoration:underline}

/* ==========================================
   BOTOES — estilos globais
   ========================================== */
#fd-home .fd-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:var(--fd-rs);
  font-size:13px;font-weight:700;letter-spacing:.04em;   /* font-size: tamanho texto botoes */
  border:none;cursor:pointer;transition:all .2s;line-height:1;
  color:inherit;
}
/* botao accent (principal) */
#fd-home .fd-btn--accent{background:var(--fd-accent);color:var(--fd-accent-text)}
#fd-home .fd-btn--accent:hover{background:var(--fd-accent-hover);transform:translateY(-1px);box-shadow:0 6px 24px var(--fd-accent-glow)}
/* botao outline (secundario) */
#fd-home .fd-btn--outline{background:transparent;color:var(--fd-text);border:1px solid var(--fd-border)}
#fd-home .fd-btn--outline:hover{border-color:rgba(255,255,255,.2);background:var(--fd-surface)}
/* botao discord */
#fd-home .fd-btn--discord{background:#5865F2;color:#fff;padding:12px 28px;font-size:14px}
#fd-home .fd-btn--discord:hover{background:#4752c4;transform:translateY(-1px)}
#fd-home .fd-btn--full{width:100%;justify-content:center}
#fd-home .fd-btn-arrow{font-size:15px;opacity:.7}

/* ---- Side ---- */
#fd-home .fd-side{display:flex;flex-direction:column;gap:20px}

/* ==========================================
   STATUS CARD — card de status do servidor
   ========================================== */
#fd-home .fd-status{padding:20px}
#fd-home .fd-st-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#fd-home .fd-st-badge{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--fd-dim)}  /* "STATUS DO SERVIDOR" */
#fd-home .fd-st-time{font-size:12px;color:var(--fd-accent);font-weight:600;letter-spacing:.04em}  /* relogio */

/* indicador online/offline */
#fd-home .fd-st-state{display:flex;align-items:center;gap:8px;margin-bottom:16px}
#fd-home .fd-st-dot{width:10px;height:10px;border-radius:50%;background:#666;transition:all .3s}  /* bolinha de status */
#fd-home .fd-st-state[data-state="online"] .fd-st-dot{background:var(--fd-green);box-shadow:0 0 10px rgba(34,197,94,.5)}
#fd-home .fd-st-state[data-state="offline"] .fd-st-dot{background:var(--fd-red);box-shadow:0 0 10px rgba(239,68,68,.4)}
#fd-home .fd-st-label{font-size:16px;font-weight:800;letter-spacing:.04em;color:var(--fd-dim)}  /* texto "Online"/"Offline" */
#fd-home .fd-st-state[data-state="online"] .fd-st-label{color:var(--fd-green)}
#fd-home .fd-st-state[data-state="offline"] .fd-st-label{color:var(--fd-red)}

/* lista de itens (jogadores, mapa, modo) */
#fd-home .fd-st-list{display:flex;flex-direction:column;margin-bottom:16px}
#fd-home .fd-st-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--fd-border)}
#fd-home .fd-st-item:last-child{border-bottom:none}
#fd-home .fd-st-ico{
  width:36px;height:36px;border-radius:8px;background:var(--fd-surface);  /* icone quadrado */
  display:flex;align-items:center;justify-content:center;color:var(--fd-dim);flex-shrink:0;
}
#fd-home .fd-st-item-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--fd-dim);flex:1}
#fd-home .fd-st-item-val{font-size:15px}
#fd-home .fd-st-val-right{margin-left:auto;text-align:right}
#fd-home .fd-st-val-col{display:flex;flex-direction:column;align-items:flex-end}
#fd-home .fd-st-val-col small{font-size:11px;color:var(--fd-dim)}
#fd-home .fd-st-now{font-size:22px;font-weight:800;color:var(--fd-text)}  /* numero de jogadores */
#fd-home .fd-st-max{font-size:14px;color:var(--fd-dim);font-weight:400}

/* ==========================================
   BOTAO CONECTAR — area clicavel com seta
   ========================================== */
#fd-home .fd-st-cta{
  display:flex;align-items:center;gap:0;
  border-radius:var(--fd-rs);
  background:var(--fd-surface);border:1px solid var(--fd-border);
  overflow:hidden;margin-bottom:4px;transition:all .2s;
}
#fd-home .fd-st-cta:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
/* parte texto — copia IP ao clicar */
#fd-home .fd-st-connect{
  display:flex;flex-direction:column;flex:1;min-width:0;
  padding:14px 16px;
  background:none;border:none;
  color:var(--fd-text);cursor:pointer;text-align:left;
  font-family:inherit;
}
#fd-home .fd-st-connect-title{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--fd-text)}
#fd-home .fd-st-connect-code{font-size:13px;color:var(--fd-dim);font-family:ui-monospace,'Cascadia Code',monospace;margin-top:2px}
/* seta — abre FiveM direto */
#fd-home .fd-st-go{
  width:48px;height:100%;min-height:56px;
  background:var(--fd-accent);             /* cor do botao seta */
  display:flex;align-items:center;justify-content:center;color:var(--fd-accent-text);flex-shrink:0;transition:all .2s;
}
#fd-home .fd-st-go:hover{background:var(--fd-accent-hover)}
/* feedback "Copiado!" */
#fd-home .fd-st-copied{
  display:block;text-align:center;font-size:12px;font-weight:600;
  color:var(--fd-accent);opacity:0;transition:opacity .3s;height:0;overflow:hidden;
}
#fd-home .fd-st-copied.show{opacity:1;height:auto;padding:4px 0}

/* links rodape do status */
#fd-home .fd-st-foot{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--fd-border);margin-top:8px}
#fd-home .fd-st-link{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--fd-dim);display:flex;align-items:center;gap:4px;transition:color .2s}
#fd-home .fd-st-link:hover{color:var(--fd-text)}
#fd-home .fd-st-divider{width:1px;height:14px;background:var(--fd-border)}

/* ==========================================
   STREAMERS / CLIPES — card com tabs
   ========================================== */
#fd-home .fd-streams{display:flex;flex-direction:column}
#fd-home .fd-tabs-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--fd-border);padding:0 4px}
#fd-home .fd-tab{
  display:inline-flex;align-items:center;gap:6px;padding:12px 14px;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--fd-dim);  /* font-size: tamanho texto tabs */
  background:none;border:none;cursor:pointer;transition:all .2s;
  border-bottom:2px solid transparent;font-family:inherit;
}
#fd-home .fd-tab:hover{color:var(--fd-text)}
#fd-home .fd-tab--on{color:var(--fd-text);border-bottom-color:var(--fd-accent)}  /* tab ativa: linha accent */
#fd-home .fd-tab-counter{margin-left:auto;font-size:12px;font-weight:600;color:var(--fd-dim);padding-right:8px}

#fd-home .fd-streams-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:8px;flex:1;
}
#fd-home .fd-streams-empty p{font-size:13px;color:var(--fd-dim);margin:0}

/* Twitch counter live state */
#fd-home .fd-tw-counter.fd-tw-live{color:#ef4444}
#fd-home .fd-tw-live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#ef4444;margin-right:6px;animation:fd-pulse 1.5s ease-in-out infinite;
}
@keyframes fd-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Twitch player */
#fd-home .fd-tw-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--fd-border)}
#fd-home .fd-tw-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Twitch stream list */
#fd-home .fd-tw-list{display:flex;flex-direction:column;max-height:260px;overflow-y:auto}
#fd-home .fd-tw-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--fd-border);transition:background .15s;cursor:pointer;
}
#fd-home .fd-tw-item:last-child{border-bottom:none}
#fd-home .fd-tw-item:hover{background:rgba(255,255,255,.04)}
#fd-home .fd-tw-item--active{background:rgba(59,130,246,.08)}
#fd-home .fd-tw-thumb{width:64px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--fd-card)}
#fd-home .fd-tw-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#fd-home .fd-tw-info strong{font-size:13px;font-weight:600;color:var(--fd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fd-home .fd-tw-info small{font-size:11px;color:var(--fd-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fd-home .fd-tw-viewers{font-size:11px;color:var(--fd-dim);font-weight:500}
#fd-home .fd-tw-live-badge{
  flex-shrink:0;padding:3px 8px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  background:#ef4444;color:#fff;
}

/* Twitch panels */
#fd-home .fd-tw-panel{flex:1;display:flex;flex-direction:column}

/* Clips */
#fd-home .fd-clip-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--fd-border)}
#fd-home .fd-clip-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;line-height:1}
#fd-home .fd-clip-close:hover{background:rgba(255,255,255,.2)}
#fd-home .fd-clip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:12px;max-height:400px;overflow-y:auto}
#fd-home .fd-clip-card{cursor:pointer;border-radius:6px;overflow:hidden;background:var(--fd-surface);border:1px solid var(--fd-border);transition:border-color .2s,transform .15s}
#fd-home .fd-clip-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px)}
#fd-home .fd-clip-card--active{border-color:var(--fd-accent)}
#fd-home .fd-clip-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden}
#fd-home .fd-clip-thumb{width:100%;height:100%;object-fit:cover;display:block}
#fd-home .fd-clip-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s}
#fd-home .fd-clip-card:hover .fd-clip-play{opacity:1}
#fd-home .fd-clip-play svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
#fd-home .fd-clip-meta{padding:8px 10px;display:flex;flex-direction:column;gap:2px}
#fd-home .fd-clip-meta strong{font-size:12px;font-weight:600;color:var(--fd-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#fd-home .fd-clip-meta small{font-size:11px;color:var(--fd-dim)}

/* ==========================================
   HUB TABS — changelog, roadmap, eventos
   ========================================== */
#fd-home .fd-hub-tabs{
  display:flex;align-items:center;gap:0;margin-top:40px;
  border-bottom:1px solid var(--fd-border);padding:0 4px;overflow-x:auto;
}

/* ---- Hub Grid ---- */
#fd-home .fd-hub-content{margin-top:20px}
#fd-home .fd-hub-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:768px){#fd-home .fd-hub-grid{grid-template-columns:1.2fr 1fr}}

/* Feature card */
#fd-home .fd-feature-card{display:flex;flex-direction:column}
#fd-home .fd-feature-photo{
  position:relative;min-height:300px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
#fd-home .fd-feature-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.6)}
#fd-home .fd-feature-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(10,12,15,.9) 100%)}
#fd-home .fd-feature-pill{
  position:absolute;top:16px;right:16px;z-index:2;
  padding:5px 12px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.06em;
  background:var(--fd-teal-dim);color:var(--fd-teal);border:1px solid rgba(160,232,224,.2);
}
#fd-home .fd-feature-bottom{position:relative;z-index:2;padding:0 20px 20px}
#fd-home .fd-feature-tag{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--fd-accent);display:block;margin-bottom:6px}
#fd-home .fd-feature-title{font-size:20px;font-weight:800;margin:0 0 6px;color:#fff}  /* titulo feature */
#fd-home .fd-feature-excerpt{font-size:13px;color:var(--fd-dim);margin:0;line-height:1.5}
#fd-home .fd-feature-cta-wrap{padding:16px 20px;border-top:1px solid var(--fd-border)}

/* Logs card */
#fd-home .fd-logs-card{padding:20px;display:flex;flex-direction:column}
#fd-home .fd-logs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
#fd-home .fd-logs-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--fd-dim)}
#fd-home .fd-logs-total{font-size:13px;font-weight:700;color:var(--fd-dim)}
#fd-home .fd-logs-list{display:flex;flex-direction:column}
#fd-home .fd-log-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--fd-border)}
#fd-home .fd-log-item:last-child{border-bottom:none}
#fd-home .fd-log-thumb{width:48px;height:48px;border-radius:8px;background:var(--fd-surface);flex-shrink:0}
#fd-home .fd-log-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#fd-home .fd-log-date{font-size:11px;color:var(--fd-dim)}
#fd-home .fd-log-name{font-size:14px;font-weight:700;color:var(--fd-text)}
#fd-home .fd-log-badge{
  padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.06em;
  background:var(--fd-teal-dim);color:var(--fd-teal);border:1px solid rgba(160,232,224,.2);flex-shrink:0;
}

/* ==========================================
   BAND CTA — faixa Discord
   ========================================== */
#fd-home .fd-band{
  margin-top:60px;text-align:center;padding:48px 24px;
  border-radius:var(--fd-r);background:var(--fd-glass);border:1px solid var(--fd-border);
}
#fd-home .fd-tag{
  display:inline-block;padding:4px 12px;border-radius:20px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  background:var(--fd-accent-dim);color:var(--fd-accent);margin-bottom:12px;
}
#fd-home .fd-band-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin:0 0 8px;letter-spacing:-.01em;color:#fff}  /* titulo CTA */
#fd-home .fd-band-desc{font-size:14px;color:var(--fd-dim);margin:0 0 24px}

/* ==========================================
   FOOTER
   ========================================== */
#fd-home .fd-footer{
  position:relative;z-index:2;
  border-top:1px solid var(--fd-border);
  padding:32px 0 20px;margin-top:60px;
}
#fd-home .fd-footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:20px}
/* LOGO footer — tamanho */
#fd-home .fd-footer-mark{width:36px;height:36px;border-radius:50%;opacity:.6;display:block}  /* width/height: tamanho logo footer */
#fd-home .fd-footer-nav{display:flex;gap:8px;flex-wrap:wrap}
#fd-home .fd-footer-nav a{font-size:13px;color:var(--fd-dim)!important;transition:color .2s}
#fd-home .fd-footer-nav a:hover{color:var(--fd-accent)!important}
#fd-home .fd-sep{color:rgba(255,255,255,.12)}
#fd-home .fd-footer-social{display:flex;gap:12px;margin-left:auto}
#fd-home .fd-footer-social a{color:var(--fd-dim);transition:color .2s}
#fd-home .fd-footer-social a:hover{color:var(--fd-accent)}
#fd-home .fd-footer-bar{font-size:11px;color:rgba(255,255,255,.25);display:flex;flex-wrap:wrap;gap:6px}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

/* ==========================================
   MOBILE — ajustes responsivos
   ========================================== */
@media(max-width:639px){
  #fd-home .fd-header-inner{gap:4px}
  #fd-home .fd-nav-link{padding:6px 10px;font-size:11px;letter-spacing:.04em}
  #fd-home .fd-hero-media{min-height:300px}
  #fd-home .fd-hero-text{padding:0 16px 16px}
  #fd-home .fd-hero-foot{padding:12px 16px 16px}
  #fd-home .fd-status{padding:16px}
  #fd-home .fd-hub-tabs{gap:0;-webkit-overflow-scrolling:touch}
  #fd-home .fd-tab{padding:10px 10px;font-size:11px}
}

/* ==========================================
   STATUS CARD v2
   ========================================== */
#fd-home .fd-status{
  position:relative;padding:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 40%,rgba(10,12,15,.55));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
#fd-home .fd-status::before{
  content:"";position:absolute;left:-20%;right:-20%;top:-90px;height:160px;
  background:radial-gradient(closest-side,var(--fd-accent-glow),transparent);
  pointer-events:none;opacity:.7;
}
#fd-home .fd-status > *{position:relative}
#fd-home .fd-status .fd-st-badge,
#fd-home .fd-status .fd-st-item-label,
#fd-home .fd-status .fd-st-connect-title,
#fd-home .fd-status .fd-st-unit,
#fd-home .fd-status .fd-st-bar-meta,
#fd-home .fd-status .fd-st-state{font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;text-transform:uppercase}
#fd-home .fd-status .fd-st-badge{font-size:13px;font-weight:700;letter-spacing:.16em}
#fd-home .fd-status .fd-st-header{margin-bottom:18px}

#fd-home .fd-status .fd-st-state{
  margin:0;padding:5px 12px 5px 10px;border-radius:999px;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--fd-border);
}
#fd-home .fd-status .fd-st-label{font-size:14px;font-weight:800;letter-spacing:.12em;font-style:italic}
#fd-home .fd-status .fd-st-state[data-state="online"]{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35)}
#fd-home .fd-status .fd-st-state[data-state="offline"]{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35)}
#fd-home .fd-status .fd-st-state[data-state="online"] .fd-st-dot{animation:fdPulse 1.8s ease-out infinite}
@keyframes fdPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

#fd-home .fd-st-hero{margin-bottom:8px;padding:14px 0 16px;border-bottom:1px solid var(--fd-border)}
#fd-home .fd-st-count{display:flex;align-items:baseline;gap:6px}
#fd-home .fd-status .fd-st-now{
  font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  font-size:64px;line-height:.9;font-weight:800;font-style:italic;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#a9c6ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
#fd-home .fd-st-of{font-family:'Barlow Condensed',system-ui,sans-serif;font-size:28px;font-weight:700;color:var(--fd-dim)}
#fd-home .fd-st-unit{margin-left:auto;align-self:center;text-align:right;font-size:13px;font-weight:700;letter-spacing:.16em;line-height:1.25;color:var(--fd-dim)}
#fd-home .fd-st-bar{margin-top:14px;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
#fd-home .fd-st-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--fd-accent),#7fb0ff);
  box-shadow:0 0 14px var(--fd-accent-glow);
  transition:width .9s cubic-bezier(.2,.8,.2,1),background .3s;
}
#fd-home .fd-st-bar[data-lv="high"] i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
#fd-home .fd-st-bar[data-lv="full"] i{background:linear-gradient(90deg,#ef4444,#f87171)}
#fd-home .fd-st-bar-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--fd-dim)}
#fd-home .fd-st-bar-meta #fd-st-note{color:var(--fd-text)}

#fd-home .fd-status .fd-st-list{margin-bottom:14px}
#fd-home .fd-status .fd-st-item{padding:11px 0;transition:background .2s}
#fd-home .fd-status .fd-st-ico{
  width:38px;height:38px;border-radius:10px;color:var(--fd-accent-hover);
  background:var(--fd-accent-dim);border:1px solid rgba(59,130,246,.2);
}
#fd-home .fd-status .fd-st-item-label{font-size:13px;font-weight:700;letter-spacing:.14em}
#fd-home .fd-status .fd-st-item-val strong{font-family:'Barlow Condensed',system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:.03em;color:#fff}
#fd-home .fd-status .fd-st-val-col small{font-size:12px;letter-spacing:.04em}

#fd-home .fd-status .fd-st-cta{border-color:rgba(59,130,246,.3);background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(255,255,255,.03))}
#fd-home .fd-status .fd-st-cta:hover{border-color:rgba(96,165,250,.6);box-shadow:0 0 28px var(--fd-accent-glow)}
#fd-home .fd-status .fd-st-connect-title{font-size:16px;font-weight:800;letter-spacing:.1em;color:#fff}
#fd-home .fd-status .fd-st-go{transition:transform .25s,background .2s,box-shadow .2s}
#fd-home .fd-status .fd-st-go:hover{transform:rotate(45deg);box-shadow:0 0 20px var(--fd-accent-glow)}
#fd-home .fd-status .fd-st-foot{justify-content:space-between}
#fd-home .fd-status .fd-st-hint{font-size:11px;color:var(--fd-dim);letter-spacing:.04em}

#fd-home .fd-status[data-off="1"] .fd-st-now{background:none;color:var(--fd-dim);-webkit-text-fill-color:var(--fd-dim)}
#fd-home .fd-status[data-off="1"] .fd-st-go{opacity:.4;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  #fd-home .fd-status .fd-st-dot,#fd-home .fd-st-bar i,#fd-home .fd-status .fd-st-go{animation:none!important;transition:none!important}
}

/* Itens do changelog como link */
#fd-home a.fd-log-item{color:inherit;transition:background .15s}
#fd-home a.fd-log-item:hover{background:rgba(255,255,255,.04)}

/* ==========================================
   CHANGELOG HUB v2 — feature card + logs com paginação
   ========================================== */
#fd-home .fd-feature-photo{min-height:360px;background:linear-gradient(135deg,rgba(59,130,246,.28),rgba(10,12,15,.95))}
#fd-home .fd-feature-vid{filter:brightness(.75) saturate(1.1);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#fd-home .fd-feature-card:hover .fd-feature-vid{transform:scale(1.04)}
#fd-home .fd-feature-scrim{background:linear-gradient(180deg,rgba(10,12,15,.35) 0%,transparent 35%,rgba(10,12,15,.92) 100%)}
#fd-home .fd-feature-pill{
  top:18px;right:18px;padding:6px 14px;border-radius:999px;
  background:rgba(10,12,15,.55);color:#fff;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.1em;
}
#fd-home .fd-feature-bottom{padding:0 24px 26px;max-width:calc(100% - 150px)}
#fd-home .fd-feature-tag{
  display:inline-block;padding:4px 10px;margin-bottom:10px;border-radius:5px;
  background:var(--fd-accent);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;
  box-shadow:0 0 18px var(--fd-accent-glow);
}
#fd-home .fd-feature-title{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,4vw,44px);font-weight:800;
  line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.6);
}
#fd-home .fd-feature-excerpt{color:rgba(255,255,255,.78);font-size:14px;max-width:46ch}
#fd-home .fd-expand{
  position:absolute;right:20px;bottom:22px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:10px;
  background:#fff;color:#0a0c0f;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.12em;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
#fd-home .fd-expand-ico{display:inline-block;transition:transform .2s}
#fd-home .fd-expand:hover{background:var(--fd-accent);color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px var(--fd-accent-glow)}
#fd-home .fd-expand:hover .fd-expand-ico{transform:translateX(4px)}
@media(max-width:560px){
  #fd-home .fd-feature-bottom{max-width:100%;padding-bottom:78px}
  #fd-home .fd-expand{left:20px;right:20px;justify-content:center}
}

#fd-home .fd-logs-card{padding:22px}
#fd-home .fd-logs-label{font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.14em;color:var(--fd-text)}
#fd-home .fd-logs-total{font-size:12px}
#fd-home .fd-logs-list{
  max-height:312px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;
  scrollbar-width:thin;scrollbar-color:var(--fd-accent) transparent;margin-right:-8px;padding-right:8px;
}
#fd-home .fd-logs-list::-webkit-scrollbar{width:4px}
#fd-home .fd-logs-list::-webkit-scrollbar-thumb{background:var(--fd-accent);border-radius:4px}
#fd-home .fd-log-item{box-sizing:border-box;height:78px;padding:0 8px;margin:0 -8px;border-radius:10px;scroll-snap-align:start}
#fd-home .fd-log-thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid var(--fd-border)}
#fd-home .fd-log-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#fd-home .fd-log-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fd-home .fd-log-date{font-size:11px;letter-spacing:.04em;text-transform:uppercase}
#fd-home .fd-log-badge{background:var(--fd-accent-dim);color:var(--fd-accent-hover);border:1px solid rgba(59,130,246,.3)}
#fd-home .fd-logs-pager{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--fd-border)}
#fd-home .fd-logs-pager[hidden]{display:none}
#fd-home .fd-pg-count{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--fd-text)}
#fd-home .fd-pg-dots{display:flex;gap:6px;flex:1;justify-content:center}
#fd-home .fd-pg-dots i{width:6px;height:6px;border-radius:50%;background:var(--fd-border);cursor:pointer;transition:all .2s}
#fd-home .fd-pg-dots i.on{width:18px;border-radius:4px;background:var(--fd-accent)}
#fd-home .fd-pg-btns{display:flex;gap:6px}
#fd-home .fd-pg-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--fd-border);background:transparent;
  color:var(--fd-text);font-size:18px;line-height:1;cursor:pointer;transition:all .15s;
}
#fd-home .fd-pg-btn:hover:not(:disabled){background:var(--fd-accent);border-color:var(--fd-accent)}
#fd-home .fd-pg-btn:disabled{opacity:.3;cursor:default}

/* ==========================================
   BAND CTA v2 — Discord
   ========================================== */
#fd-home .fd-band{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  text-align:left;padding:44px 48px;min-height:190px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.35);
}
#fd-home .fd-band-art{
  position:absolute;inset:0 0 0 38%;z-index:-1;background-size:cover;background-position:center 20%;
  opacity:.38;filter:grayscale(.4) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%);
}
#fd-home .fd-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 0% 0%,var(--fd-accent-glow),transparent 55%);opacity:.5;
}
#fd-home .fd-band-copy{max-width:520px}
#fd-home .fd-tag{
  padding:0;border-radius:0;background:none;color:var(--fd-dim);margin-bottom:14px;
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
#fd-home .fd-band-title{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;margin:0 0 14px;
}
#fd-home .fd-band-desc{max-width:46ch;margin:0;line-height:1.6}
#fd-home .fd-band-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#fd-home .fd-band .fd-btn--discord{
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:10px;
  background:linear-gradient(180deg,rgba(88,101,242,.38),rgba(88,101,242,.2));
  border:1px solid rgba(129,140,248,.55);color:#e0e4ff;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 28px rgba(88,101,242,.25),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#fd-home .fd-band .fd-btn--discord:hover{background:linear-gradient(180deg,#5865F2,#4752c4);color:#fff;box-shadow:0 0 36px rgba(88,101,242,.55);transform:translateY(-2px)}
#fd-home .fd-band-link{
  display:inline-flex;align-items:center;gap:8px;padding:14px 8px;color:#fff;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;
  transition:color .2s;
}
#fd-home .fd-band-link span{display:inline-block;font-size:13px;opacity:.7;transition:transform .2s}
#fd-home .fd-band-link:hover{color:var(--fd-accent-hover)}
#fd-home .fd-band-link:hover span{transform:translate(2px,-2px)}
@media(max-width:720px){
  #fd-home .fd-band{padding:32px 24px}
  #fd-home .fd-band-art{inset:0;opacity:.2}
}


/* BOTOES HERO v3 */
#fd-home .fd-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
#fd-home .fd-hero-actions .fd-btn{position:relative;overflow:hidden;isolation:isolate;height:52px;padding:0 20px 0 24px;gap:12px;border-radius:14px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background .28s,border-color .28s,color .28s}
#fd-home .fd-hero-actions .fd-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
#fd-home .fd-hero-actions .fd-btn:hover::before{transform:translateX(130%)}
#fd-home .fd-hero-actions .fd-btn:hover{transform:translateY(-2px)}
#fd-home .fd-hero-actions .fd-btn:active{transform:translateY(0) scale(.975);transition-duration:.08s}
#fd-home .fd-hero-actions .fd-btn:focus-visible{outline:2px solid var(--fd-accent-hover);outline-offset:3px}
#fd-home .fd-hero-actions .fd-btn--accent{color:#fff;background:linear-gradient(180deg,#4d92fa 0%,#2f6fe0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -8px rgba(59,130,246,.7)}
#fd-home .fd-hero-actions .fd-btn--accent:hover{background:linear-gradient(180deg,#63a1ff 0%,#3b7bf0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.4),0 14px 36px -8px rgba(59,130,246,.9)}
#fd-home .fd-btn-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.2);transition:transform .25s,background .25s}
#fd-home .fd-hero-actions .fd-btn--accent:hover .fd-btn-ico{transform:translate(2px,-2px);background:rgba(255,255,255,.3)}
#fd-home .fd-hero-actions .fd-btn--discord{padding:0 24px;color:#d4d8ff;background:rgba(88,101,242,.16);box-shadow:inset 0 0 0 1px rgba(88,101,242,.5),0 8px 24px -10px rgba(88,101,242,.6)}
#fd-home .fd-hero-actions .fd-btn--discord:hover{color:#fff;background:rgba(88,101,242,.34);box-shadow:inset 0 0 0 1px rgba(131,141,255,.85),0 12px 32px -8px rgba(88,101,242,.8)}
#fd-home .fd-hero-actions .fd-btn--ghost{padding:0 24px;color:var(--fd-text);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#fd-home .fd-hero-actions .fd-btn--ghost:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(96,165,250,.6),0 10px 28px -10px rgba(59,130,246,.55)}
#fd-home .fd-led{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
#fd-home .fd-btn--al.is-on .fd-led{background:var(--fd-green);animation:fd-led 2s infinite}
@keyframes fd-led{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
#fd-home .fd-hero-actions .fd-btn--al.is-off,#fd-home .fd-hero-actions .fd-btn--al.is-off:hover{cursor:not-allowed;transform:none;color:rgba(255,255,255,.38);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);backdrop-filter:none;-webkit-backdrop-filter:none}
#fd-home .fd-hero-actions .fd-btn--al.is-off::before{display:none}
#fd-home .fd-btn--al.is-off .fd-led{background:#6b7280}
@media(max-width:639px){#fd-home .fd-hero-actions .fd-btn{height:48px;flex:1 1 100%;justify-content:center;padding:0 18px}}
@media(prefers-reduced-motion:reduce){#fd-home .fd-hero-actions .fd-btn,#fd-home .fd-hero-actions .fd-btn::before,#fd-home .fd-btn-ico{transition:none}#fd-home .fd-btn--al.is-on .fd-led{animation:none}}
/* ESCALA */
@media(min-width:2000px){#fd-home .fd-wide{zoom:1.15}}
@media(min-width:2300px){#fd-home .fd-wide{zoom:1.3}}
@media(min-width:2600px){#fd-home .fd-wide{zoom:1.45}}
@media(min-width:3000px){#fd-home .fd-wide{zoom:1.6}}