:root{
  --bg:#0b0d10; --card:#111418; --text:#e7ebf0; --muted:#9aa4b2;
  --brand:#66e3a1; --link:#9ad1ff; --border:#1a1f26;
}
:root.light{
  --bg:#ffffff; --card:#f7f9fc; --text:#0f1720; --muted:#48515e;
  --brand:#176bfa; --link:#0e78ff; --border:#e6ebf2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,Noto Sans;
  background:var(--bg);
  color:var(--text);
}
.container{width:min(1100px,92vw); margin:auto}
a{color:var(--link); text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%; display:block; border-radius:14px}

.site-header{position:sticky; top:0; z-index:40; background:rgba(0,0,0,.25)}
:root.light .site-header{background:#fff}
.header-inner{display:flex; align-items:center; gap:20px; padding:14px 0}
.brand{font-weight:800; letter-spacing:.3px; color:var(--text); font-size:20px}
.brand a{color:var(--text)}
.main-nav{display:flex; gap:14px; flex:1}
.main-nav a{padding:8px 12px; border-radius:12px; border:1px solid transparent}
.main-nav a:hover{border-color:var(--border); background:var(--card)}
.btn-toggle{border:1px solid var(--border); background:var(--card); color:var(--text); padding:8px 12px; border-radius:12px; cursor:pointer}

.layout{display:grid; grid-template-columns:1fr 320px; gap:28px; margin:24px auto}
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:-1}
}

.posts{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.post-card{
  grid-column:span 6;
  display:grid;
  gap:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}
.post-card .thumb img{aspect-ratio:16/9; object-fit:cover}
.post-card .label{
  color:#fff;
  background:var(--brand);
  padding:4px 8px;
  border-radius:10px;
  font-size:12px;
}
.post-card .title{
  margin:.3rem 0 .2rem;
  font-size:clamp(18px,2.5vw,22px);
  color:var(--text);
}
.post-card .excerpt{color:var(--muted); margin:0}
.post-card .info{color:var(--muted); font-size:13px}

.posts .post-card:nth-child(1){
  grid-column:span 12;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:stretch;
}
.posts .post-card:nth-child(1) .thumb img{height:100%}
@media (max-width:860px){
  .posts .post-card:nth-child(1){grid-template-columns:1fr}
}
.posts .post-card:nth-child(2),
.posts .post-card:nth-child(3){grid-column:span 6}

.sidebar .card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:18px;
}
.popular-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.popular-list li{display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center}
.popular-list .title{color:var(--text)}

.ad-slot{
  background:transparent;
  border:1px dashed var(--border);
  border-radius:14px;
  padding:8px;
  color:var(--muted);
  text-align:center;
}
.ad-slot--header{margin-top:8px}
.ad-slot--infeed{grid-column:span 12}
.ad-slot--sidebar{min-height:250px}

.pager{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:28px 0;
}
.btn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  display:inline-block;
}
.btn:hover{opacity:.9}

.post-single{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.post-title{
  font-size:clamp(26px,3.2vw,36px);
  margin:6px 0 8px;
}
.post-meta{
  color:var(--muted);
  font-size:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.post-hero img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  margin:12px 0 18px;
}

/* ===============================
   ESTILO DA ÁREA .post-content
   =============================== */
.post-content{
  font-size:17px;
  line-height:1.7;
  color:var(--text);
}
.post-content > * + *{
  margin-top:1rem;
}
.post-content h2,
.post-content h3,
.post-content h4{
  font-weight:700;
  letter-spacing:.02em;
}
.post-content h2{
  font-size:clamp(22px,2.4vw,26px);
  margin-top:2rem;
  margin-bottom:.5rem;
  border-left:3px solid var(--brand);
  padding-left:.6rem;
}
.post-content h3{
  font-size:clamp(19px,2vw,22px);
  margin-top:1.6rem;
  margin-bottom:.4rem;
}
.post-content h4{
  font-size:17px;
  text-transform:none;
  opacity:.95;
}

.post-content p{
  margin:0;
  color:var(--text);
}
.post-content a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.post-content a:hover{
  text-decoration-thickness:2px;
}

.post-content ul,
.post-content ol{
  padding-left:1.4rem;
  margin:0;
}
.post-content li + li{
  margin-top:.25rem;
}
.post-content ol{list-style:decimal;}
.post-content ul{list-style:disc;}

/* Destaque de frase / citação */
.post-content blockquote{
  margin:1.4rem 0;
  padding:1rem 1.2rem;
  border-left:4px solid var(--brand);
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  color:var(--muted);
}
:root.light .post-content blockquote{
  background:rgba(0,0,0,0.02);
}
.post-content blockquote p:last-child{
  margin-bottom:0;
}

/* Código */
.post-content code{
  font-family:SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:0.9em;
  background:rgba(15,23,42,0.6);
  padding:2px 5px;
  border-radius:6px;
}
:root.light .post-content code{
  background:rgba(15,23,42,0.06);
}
.post-content pre{
  font-family:SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background:rgba(15,23,42,0.85);
  padding:1rem 1.1rem;
  border-radius:14px;
  overflow:auto;
  font-size:0.9em;
}
:root.light .post-content pre{
  background:rgba(15,23,42,0.06);
}

/* Imagens dentro do conteúdo */
.post-content figure{
  margin:1.6rem 0;
}
.post-content figcaption{
  font-size:13px;
  color:var(--muted);
  margin-top:.4rem;
  text-align:center;
}

/* Tabelas */
.post-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0;
  font-size:15px;
}
.post-content th,
.post-content td{
  padding:.6rem .7rem;
  border-bottom:1px solid var(--border);
}
.post-content th{
  text-align:left;
  background:rgba(255,255,255,0.02);
}
:root.light .post-content th{
  background:rgba(15,23,42,0.02);
}

/* Lista de relacionados */
.related{
  margin-top:22px;
}
.related h3{
  margin:0 0 10px;
}
.related ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.related li a{color:var(--link)}

.site-footer{margin:40px 0 20px}
.footer-inner{
  padding:18px 0;
  color:var(--muted);
  border-top:1px solid var(--border);
}

/* =======================================
   AJUSTES DE HEADER PARA TELAS MENORES
   ======================================= */
@media (max-width: 720px){
  .header-inner{
    flex-wrap: wrap;         /* permite quebrar linha */
    gap: 10px;
  }

  .brand{
    flex-basis: 100%;        /* logo ocupa a primeira linha inteira */
  }

  .main-nav{
    width: 100%;
    justify-content: space-between;
    font-size: 14px;
  }

  .main-nav a{
    padding: 6px 8px;        /* menos padding pra caber melhor */
  }

  .btn-toggle{
    margin-left: auto;       /* botão de tema vai pro canto direito */
  }
}

@media (max-width: 480px){
  .main-nav{
    flex-wrap: wrap;         /* se apertar muito, quebra em 2 linhas */
    row-gap: 6px;
    justify-content: flex-start;
  }
}

/* =======================================
   AJUSTES DA LISTA DE POSTS NO MOBILE
   ======================================= */
@media (max-width: 720px){
  .posts{
    grid-template-columns: 1fr;    /* vira 1 coluna */
  }

  .post-card{
    grid-column: 1 / -1;           /* cada card ocupa a largura toda */
  }

  .posts .post-card:nth-child(1){
    grid-template-columns: 1fr;    /* thumb + conteúdo em coluna */
  }

  .ad-slot--infeed{
    grid-column: 1 / -1;
  }
}