:root{
  --bg:#0b0b14;
  --panel:#1a0f25;         /* mais profundo e neon */
  --panel-2:#1e1238;       /* contraste mais vivo */
  --text:#e9ebf3;
  --muted:#a9acc2;
  
  /* Gradientes neon */
  --brand:#ff2b5b;         /* rosa neon */
  --brand-2:#ff8a00;       /* laranja neon */
  --brand-alt:#8a2be2;     /* roxo neon para badges/tabs */
  --brand-alt-2:#00ffff;   /* ciano neon */
  
  --ok:#2ecc71;            /* verde neon */
  --danger:#ff3b3b;        /* vermelho neon */
  --warning:#ffd700;       /* amarelo neon para alertas */
  --info:#1e90ff;          /* azul neon */
  
  --chip:#2b1f44;          /* mais colorido que o anterior */
  --border:rgba(255,255,255,0.1);
  --shadow:0 10px 30px rgba(255,43,91,0.3);  /* sombra neon rosa */
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background: 
    linear-gradient(180deg, rgba(11,11,20,0.8), rgba(10,11,24,0.6) 40%, rgba(11,11,20,0.8)),
    url('./brasil.PNG') no-repeat center center fixed;
  background-size:cover;
}


/* Containers */
.container{width:min(1100px, 92%); margin:0 auto}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,20,0.8);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .container{
  display:flex; align-items:center; gap:16px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand.small h3{margin:0}
.brand h1{font-size:22px; font-weight:800; margin:0}
.brand h1 span{color:var(--brand)}
.brand.small h3 span{color:var(--brand)}
.logo-dot{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand), var(--brand-2));
  box-shadow:0 0 20px var(--brand);
}

.tools{display:flex; gap:10px; margin-left:auto}
.tools input[type="search"], .tools select{
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); padding:10px 12px; border-radius:14px; outline:none;
}
.tools button{
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); padding:10px 12px; border-radius:14px; cursor:pointer;
}

/* Ticker */
.urgent-ticker{border-bottom:1px solid var(--border); background:linear-gradient(90deg,#140b14,#0b0b1e)}
.ticker-head{display:flex; align-items:center; gap:10px; padding:10px 0}
.pill{
  background:linear-gradient(90deg, var(--brand), var(--danger));
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
  box-shadow:0 6px 20px rgba(255,43,91,0.4);
}
.ticker-track{
  display:flex; gap:20px; overflow:auto; padding:8px 0 14px; scrollbar-width:none;
}
.ticker-track::-webkit-scrollbar{display:none;}
.ticker-item{
  white-space:nowrap; background:var(--panel); padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); font-size:14px;
}

/* Grid principal */
.main-grid{
  display:grid; grid-template-columns:330px 1fr; gap:22px; padding:24px 0 40px;
}

/* Sidebar e conteúdo adaptáveis */
@media (max-width:940px){
  .main-grid{grid-template-columns:1fr;}
  .sidebar{order:2; width:100%;}
  .content{order:1;}
}

/* Cards */
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:20px; padding:18px; box-shadow:var(--shadow);
}
.post-card h2{margin:0 0 6px}
.post-card .muted{margin:2px 0 14px}

.row{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.row.two{width:100%}
.row.chk{flex-direction:row; align-items:center; gap:10px; margin:8px 0 14px}
.row input, .row textarea, .row select{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:14px; outline:none;
}
.btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:none; color:white; padding:12px 14px; border-radius:16px; font-weight:800;
  cursor:pointer; box-shadow:0 10px 25px rgba(255,43,91,0.3);
}
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:10px 14px; border-radius:14px; cursor:pointer; display:block; margin:14px auto 0;
}

/* Minhas publicações */
.mini-list{display:flex; flex-direction:column; gap:10px}
.mini-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--border); padding:10px 12px; border-radius:14px;
}
.mini-item span{font-size:14px}
.mini-item button{
  background:transparent; border:1px solid var(--danger); color:var(--danger);
  padding:6px 10px; border-radius:12px; cursor:pointer;
}

/* Conteúdo */
.content-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.counts{color:var(--muted); font-size:14px}

.urgent-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:12px 0 18px;
}
.urgent-card{
  border-left:4px solid var(--danger);
  background:linear-gradient(180deg, #1a0f17, #12132b);
  border-radius:16px; padding:14px; border:1px solid var(--border);
}

/* Tabs */
.tabs{display:flex; gap:8px; margin:8px 0 12px}
.tab{
  background:var(--chip); color:var(--text); border:1px solid var(--border);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600;
}
.tab.active{outline:2px solid var(--brand)}

/* Feed */
.feed{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}

.news-card{
  background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
}
.news-card .meta{
  display:flex; align-items:center; gap:10px; padding:12px; font-size:13px; color:var(--muted);
  border-bottom:1px dashed var(--border);
}
.meta .badge{
  background:linear-gradient(90deg, #2a2d6a, #3a3fa5);
  padding:4px 8px; border-radius:999px; font-weight:700; color:#fff; font-size:11px;
}
.meta .badge.urg{background:linear-gradient(90deg, var(--danger), #ff6a6a)}

.news-card .body{padding:12px; display:flex; flex-direction:column; gap:6px}
.news-card h3{margin:0; font-size:18px}
.news-card p{margin:0; color:var(--text)}
.news-card .footer{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-top:1px dashed var(--border); font-size:13px; color:var(--muted);
}
.news-card .actions{display:flex; gap:8px}
.news-card .actions button{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:6px 10px; border-radius:12px; cursor:pointer;
}
.news-card .actions .danger{border-color:var(--danger); color:var(--danger)}

/* Footer */
.footer{border-top:1px solid var(--border); margin-top:30px}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:20px; padding:22px 0;
}
.footer h4{margin:0 0 10px}
.footer .chips{display:flex; flex-wrap:wrap; gap:8px}
.footer .chips button{
  background:var(--chip); color:var(--text); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; cursor:pointer;
}
.copy{border-top:1px solid var(--border); text-align:center; color:var(--muted); padding:14px 0}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* Responsividade geral */
@media (max-width:1000px){ .feed{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:700px){ 
  .urgent-grid{grid-template-columns:1fr; gap:10px} 
  .tools{flex-direction:column; gap:8px; align-items:flex-start;}
}
@media (max-width:650px){ .feed{grid-template-columns:1fr; gap:12px} }
@media (max-width:500px){ .btn-primary, .btn-ghost{width:100%; text-align:center; padding:12px 0;} }
@media (max-width:400px){
  .tools input, .tools select, .tools button{padding:8px; font-size:14px;}
  .post-card h2{font-size:18px;}
  .news-card .body h3{font-size:16px;}
  .news-card .body p{font-size:14px;}
}