/* --------------------------
   BASE RESET & FONT
---------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body { width: 100%; height: 100%; overflow-x: hidden; }

/* Layout constants */
:root {
  --header-h: 66px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 68px;

  /* Palette (pastel) */
  --primaria:#2c9c82;
  --secundaria:#eaf7f3;
  --destaque:#ffae52;
  --branco:#ffffff;
  --texto:#333;
  --cinza-claro:#f4f4f4;
  --cinza-linha:#ddd;
}

html[data-theme='light'] {
  --branco:#ffffff;
  --primaria:#2c9c82;
  --secundaria:#eaf7f3;
  --destaque:#ffae52;
  --texto:#333;             /* <- fixed missing semicolon */
  --cinza-claro:#f4f4f4;
  --cinza-linha:#ddd;
}

/* Dark theme overrides */
html[data-theme='dark'] {
  --primaria:#2c9c82;
  --secundaria:#1d1d1d;
  --destaque:#ffae52;
  --branco:#262626;
  --texto:#e2e2e2;
  --cinza-linha:#3f3f3f;
}

/* Legacy dark body map (kept for compatibility) */
body.dark-mode{
  --pri:#2c9c82;
  --sec:#1d1d1d;
  --bg:#121212;
  --card:#1e1e1e;
  --txt:#e2e2e2;
  --shadow:0 6px 20px rgba(0,0,0,.25);
}

/* --------------------------
   HEADER
---------------------------- */
.main-header {
  background: var(--secundaria);
  padding: 1rem 0;
  position: fixed; inset: 0 0 auto 0;
  z-index: 1000;
  box-shadow: 0 1px 8px rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  height: var(--header-h);
}
.header-content {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
}
.header-content h2 { font-size: 1.6rem; font-weight: 700; color: var(--primaria); text-transform: uppercase; }
.header-content nav { margin-left: auto; }
.header-content nav ul { display: flex; gap: 2rem; list-style: none; }
.header-content nav a { color: var(--texto); text-decoration: none; font-weight: 500; transition: color .3s; font-size: 1rem; }
.header-content nav a:hover { color: var(--primaria); }
.header-auth { display: flex; align-items: center; gap: 1rem; }
.header-login {
  background: var(--primaria); color: var(--branco); border: none;
  padding: .6rem 1.2rem; border-radius: 25px; font-weight: 700; cursor: pointer; transition: background .3s;
}
.header-login:hover { background: #45b591; }
.btn-icon {
  background: var(--secundaria); color: var(--texto);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  display: grid; place-items: center;
  cursor: pointer; transition: transform .3s, background .3s;
}
.btn-icon:hover { background: var(--branco); transform: rotate(90deg); }

/* Floating theme button */
.themeBtn {
  position: fixed; right: 50px; bottom: 50px; z-index: 9999;
  background: var(--branco); border: none; border-radius: 50%;
  width: 50px; height: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.themeBtn:hover { transform: scale(1.1); box-shadow: 0 0 15px var(--primaria); }
.themeBtn::before {
  content:''; position:absolute; border-radius:50%; width:110%; height:110%;
  background: var(--primaria); opacity:0; transition: opacity .3s; filter: blur(6px);
}
.themeBtn:hover::before { opacity:.5; }
#themeIcon { width:30px; height:30px; transition: opacity .3s; }

/* --------------------------
   SIDEBAR
---------------------------- */
.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100% - var(--header-h));
  background: #2f2f2f;
  color: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  z-index: 999;
  overflow-y: auto;
  transition: width .25s, transform .25s;
}
.sidebar-header { margin-bottom: 1.5rem; text-align: center; font-weight: 700; }
.sidebar-header h2 { font-size: 1.4rem; color: #fff; margin-bottom: .5rem; }
.sidebar-menu {
  list-style: none; padding: 0; margin: 0; flex-grow: 1;
  display: flex; flex-direction: column; gap: 1rem;
}
.sidebar-menu li a {
  display: flex; align-items: center; gap: .75rem;
  color: #fff; text-decoration: none; font-size: 1rem;
  padding: .6rem; border-radius: 6px; flex-direction: column;
  margin-bottom: 3rem; transition: background .3s;
  text-align: center;
}
.sidebar-menu li a:hover { background: #3c3c3c; }
.sidebar-menu li a i { font-size: 1.5rem; min-width: 28px; text-align: center; }
.sidebar-footer { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-footer a {
  display: flex; align-items: center; gap: .75rem; flex-direction: column;
  color: #fff; text-decoration: none; font-size: 1rem; border-radius: 6px; padding: .4rem .6rem;
}
.sidebar-footer a:hover { background: #3c3c3c; }

/* Professional highlight */
.sidebar-menu li.professional-section a {
  background: #FFD700; color: #1a1a1a !important; font-weight: 700;
  border-radius: 8px; padding: 10px 15px; display: block; margin-bottom: 10px;
  transition: background .3s, color .3s;
}
.sidebar-menu li.professional-section a i { color: #1a1a1a !important; }
.sidebar-menu li.professional-section a:hover { background: #ffcc00; color: #000 !important; }

/* Sidebar collapse system */
.sidebar { width: var(--sidebar-w); }
.sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.sb-toggle{
  position:fixed; left:18px; top:18px; z-index:1001;
  width:48px; height:48px; border:none; border-radius:50%;
  background: var(--primaria); color:#fff; font-size:1.1rem;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s;
}
.sb-toggle:hover{ transform: scale(1.08); }

/* Hide labels when collapsed (wrap text in <span> if you want strict control) */
.sb-collapsed .sidebar-menu li a span,
.sb-collapsed .sidebar-footer a span { display:none; }
.sb-collapsed .sidebar { text-align:center; }
.sidebar-menu li a i { width:24px; text-align:center; }

/* Responsive sidebar hide on small screens */
@media (max-width:900px){
  .sidebar{ position:fixed; left:0; top:0; height:100%; transform:translateX(0); }
  .sb-collapsed .sidebar{ transform:translateX(-100%); }
}

/* --------------------------
   MAIN SECTION (hero)
---------------------------- */
.main-section {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; padding: 40px 20px;
  margin-top: var(--header-h);
}

/* Shared content gutters (left spacing follows sidebar state) */
.infinity-section,
.main-footer {
  margin-left: var(--sidebar-w);
}
.sb-collapsed .infinity-section,
.sb-collapsed .main-footer {
  margin-left: var(--sidebar-w-collapsed);
}

.main-content { padding: 0 20px; }

/* Card */
.card-container { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; }
.card {
  background: var(--branco);
  border-radius: 8px; border: 1px solid #5b5b5b13;
  padding: 40px; width: 100%; max-width: 750px; position: relative;
  margin: 40px 0 30px;
}
.card-content h1 { font-size: 2.5rem; margin-bottom: 20px; color: var(--primaria); line-height: 1.1; }
.card-content .highlight { color: var(--destaque); }
.card-content .description { font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; color: #555; }

/* Stats example */
.server-stats {
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px;
  background: var(--secundaria); padding:25px; border-radius:15px;
  border:1px solid rgba(0,0,0,0.05); margin:30px 0;
}
.stat-item { text-align:center; flex:1; min-width:120px; margin-top:10px; }
.stat-item i { font-size:1.5rem; color:var(--primaria); margin-bottom:10px; }
.stat-item h3 { font-size:1rem; margin-bottom:5px; color:#444; }
.stat-item p { font-size:1rem; color:#666; }

/* Buttons & actions */
.card-actions { display:flex; gap:15px; margin-top:30px; flex-wrap:wrap; justify-content:center; }
.btn {
  padding: 12px 24px; border: none; border-radius: 50px; font-weight: 700; font-size: 1rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: background .3s, transform .3s; text-transform: uppercase; letter-spacing: .5px; justify-content:center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primaria); color: var(--branco); }
.btn-primary:hover { background: #45b591; }
.btn-secondary { background: var(--destaque); color: var(--branco); }
.btn-secondary:hover { background: #e5a96e; }

/* Countdown */
.countdown-section { padding: 4rem 1rem; position: relative; z-index: 1; background: #eaf7f3; }
.countdown-card {
  background: var(--branco); border-radius: 15px; padding: 30px; width: 100%; max-width: 700px;
  margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.06); text-align: center; border: 1px solid rgba(0,0,0,0.05);
}
.countdown-card h2 { color: var(--primaria); font-size: 2rem; margin-bottom: 1rem; }

/* Infinity */
.infinity-section {
  padding: 4rem 1rem; position: relative; z-index:1; background:#FAFAF7;
}
.infinity-container {
  max-width: 800px; margin: 70px auto 0;
  background: var(--branco); padding: 2rem; border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06); text-align: center;
}
.infinity-section h2 { font-size: 2rem; color: var(--primaria); margin-bottom: 1.2rem; }
.infinity-section p {
  font-size: 1.1rem; color: #555; margin-bottom: 2rem; line-height: 1.6;
  max-width: 600px; margin-left: auto; margin-right: auto;
}
.infinity-buttons { display:flex; gap:1rem; justify-content:center; }

/* Footer (unified) */
.main-footer{
  background: var(--secundaria);
  padding: 3rem 1.2rem;
  border-top: 1px solid rgba(0,0,0,.05);
}
.footer-content{
  max-width:1200px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.2rem;
}
.footer-section h3{ color:var(--primaria); display:flex; align-items:center; gap:.4rem; margin-bottom:.8rem; }
.footer-section p{ color:#555; margin-bottom:.8rem; }
.footer-section ul{ list-style:none; margin-top:.5rem; }
.footer-section li{ margin-bottom:.5rem; }
.footer-section a{ text-decoration:none; color:#444; transition:color .2s; }
.footer-section a:hover{ color:var(--primaria); }
.footer-bottom{ border-top:1px solid rgba(0,0,0,.06); margin-top:2rem; padding-top:1rem; text-align:center; }
.footer-logo{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:1rem; text-align:center;
}
.footer-credits p{ margin:.3rem 0; color:#666; font-size:.85rem; }
.heart{ color:var(--primaria); display:inline-block; animation: heartbeat 1.5s ease infinite; }
@keyframes heartbeat{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* Attention Glow */
@keyframes glowPulse {
  0% { text-shadow: 0 0 0px rgba(255, 202, 40, 0); }
  70%{ text-shadow: 0 0 8px rgba(255,202,40,.9), 0 0 14px rgba(255,202,40,.7); }
  100%{ text-shadow: 0 0 0px rgba(255, 202, 40, 0); }
}
.attention-glow { position:relative; color:#ffca28; animation:glowPulse 2.8s ease-in-out infinite; transition: transform .25s; }
.attention-glow:hover { transform: translateY(-2px) scale(1.05); animation-play-state: paused; }

/* Rightbar/stream helpers (keep reachable) */
@media(max-width:1100px){
  .rightbar{ position:fixed; right:0; top:var(--header-h); bottom:0; z-index:998; }
}

/* --------------------------
   RESPONSIVE
---------------------------- */
@media (max-width: 768px) {
  .header-content { flex-direction: column; gap: 1rem; }
  .header-auth { gap: .8rem; }
  .sidebar { width: 220px; }
  .infinity-section,
  .main-footer { margin-left: 0; }
  .footer-content { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
  .footer-section h3 { font-size: 1rem; }
  .footer-section p, .footer-section li, .footer-section li a { font-size: .9rem; line-height: 1.4; }
  .footer-logo { flex-direction: column; gap: .5rem; }
  .footer-credits p { font-size: .85rem; }
}

@media (max-width: 480px) {
  .sidebar { position: absolute; top: var(--header-h); left: -220px; transition: left .3s; }
  .sidebar.open { left: 0; }
  .main-content { margin-left: 0; }
}

/* --------------------------
   OVERRIDES for pages that hard-coded 260px margins
   (ensures collapse also affects them)
---------------------------- */
.sb-collapsed .banner,
.sb-collapsed .wrapper {
  margin-left: var(--sidebar-w-collapsed) !important;
}