/* ===============  Base e tokens  =============== */
:root{
  --bg: #1f1f22;            /* fundo geral */
  --surface: #242629;       /* cartões e painéis */
  --surface-2:#2b2e32;      /* superfícies internas */
  --text:#f5f6f7;
  --muted:#b7bdc6;
  --line:#34383d;
  --accent:#ff4668;         /* rosa do anexo */
  --accent-2:#ff6e83;
  --tag-bg:#ff344e;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

html,body{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page-content{
  max-width: 1200px;
  margin: 0 auto 64px;
  padding: 0 20px 64px;
}

/* ===============  Header  =============== */
.logo-link { display: inline-flex; align-items: center; padding: 14px 16px 8px; }
.logo { width: 100px; height: auto; display: block; }

/* ===============  HERO  =============== */
.obra-hero{
  display:grid;
  grid-template-columns: 420px 1fr 140px;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
  min-height: 360px;
  position: relative;
}

.hero-left{
  position: relative;
  height: 100%;
  min-height: 360px;
  background: var(--surface);
  overflow: hidden;
  border-bottom-right-radius: 240px; /* curva grande como no anexo */
  border-top-left-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-capa{
  width: 100%; height: 100%;
  object-fit: cover; display:block;
}

.hero-center{
  display:flex; flex-direction:column; gap: 14px;
  padding: 10px 6px;
}
.hero-logo{
  max-width: 360px; width: 80%; height:auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
#heroNome{ display:none; } /* o anexo usa só o logo */

.hero-sinopse{
  color: var(--muted);
  line-height: 1.6;
  font-size: 15.5px;
  max-width: 56ch;
}

.hero-age{
  margin-top: 4px;
}

/* classificação indicativa na página da obra */
/* classificação indicativa na página da obra */
.age-badge{
  display:inline-flex;
  align-items:center;
  width:250px;
  height:50px;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#111827;
  border:1px solid rgba(255,255,255,.10);
  font-size:28px;
  font-weight:700;
  letter-spacing:.25px;
  text-transform:none;
}

.age-badge-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--age-color, #9CA3AF);
}
.age-badge-text{
  text-transform:none;
}

.age-badge--livre{ --age-color:#16a34a; }
.age-badge--10{ --age-color:#2563eb; }
.age-badge--12{ --age-color:#eab308; }
.age-badge--14{ --age-color:#f97316; }
.age-badge--16{ --age-color:#dc2626; }

.hero-tags{
  display:flex; flex-wrap:wrap; gap:10px;
}
.hero-tags .tag,
.hero-tags button{
  background: var(--tag-bg);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing:.2px;
}
.hero-tags .tag--accent,
.hero-tags .btn-accent{
  background: var(--accent);
  border-color: transparent;
}

.hero-right{
  display:flex; align-items:flex-start; justify-content:flex-end;
}
.btn{
  appearance:none; border:0; cursor:pointer;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
  transition: transform .06s ease, filter .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-follow{
  background: var(--accent);
  color:#fff;
  box-shadow: 0 8px 20px rgba(255,70,104,.35);
}
.btn-follow:hover{ filter: brightness(1.05); }

/* ===============  Corpo (colunas)  =============== */
.obra-body{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  margin-top: 28px;
}

/* ===============  Coluna esquerda  =============== */
.obra-left{ display:flex; flex-direction:column; gap: 22px; }

/* --- Card de estatísticas --- */
.stats-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.stat{
  padding: 14px 16px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.stat span{
  display:block; color:var(--muted); font-size:12.5px; margin-bottom:4px;
  letter-spacing:.3px; text-transform: none;
}
.stat strong{
  font-size: 22px; font-weight:900; letter-spacing:.3px;
}
.stat.last{ padding: 0; border:0; background: transparent; }
.stat.last > div{ /* #statUltimo vira card com imagem do último capítulo */
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  overflow:hidden;
}

/* “Próximo capítulo” com contorno chamativo */
.stats-card .stat:nth-child(2){
  border: 2px dashed rgba(255,255,255,.08);
  background: linear-gradient(180deg, #23262a, #25292e);
  box-shadow: inset 0 0 0 2px rgba(255,70,104,.35);
}

/* --- Busca --- */
.chapters-search .input{
  width:100%;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow);
}
.chapters-search .input::placeholder{ color: var(--muted); }

/* --- Lista de capítulos --- */
.chapters-list{
  display:flex; flex-direction:column; gap: 18px;
}
.chapters-list .cap-card{
  display:grid;
  grid-template-columns: 148px 1fr auto;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
}
.cap-thumb{
  width: 148px; height: 88px; border-radius: 12px; object-fit:cover;
}
.cap-title{
  font-weight:800; margin-bottom: 6px;
}
.cap-meta{
  color: var(--muted); font-size: 13px; display:flex; gap:16px; align-items:center;
}
.cap-actions{ display:flex; gap:10px; }
.cap-actions .icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background: var(--tag-bg); color:#fff; display:grid; place-items:center;
}

/* ===============  Sidebar direita  =============== */
.obra-right{
  display:flex; flex-direction:column; gap: 22px;
}
.side-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 140px;
}
.side-card.hidden{ display:none; }
.side-card .side-title{
  font-weight: 900; margin-bottom: 12px; letter-spacing:.2px;
}
.side-card .side-sub{ color:var(--muted); font-size:13.5px; margin-top: 6px; }

/* imagem do "Compre o Livro" / "Ajude no Apoia-se" */
.side-thumb{
  pointer-events: none;
  display:block;
  width: 100%;          /* ocupa toda a largura do card */
  max-width: 100%;
  height: auto;         /* mantém a proporção da capa */
  border-radius: var(--radius-md);
  object-fit: cover;    /* se você quiser leve corte em vez de bordas vazias */
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  margin-top: 8px;
}

/* botão de link da loja / apoia-se */
.side-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(255,70,104,.30);
}
.side-link:hover,
.side-link:focus-visible{
  filter: brightness(1.05);
  outline:none;
}

/* ===============  Utilidades  =============== */
.material-symbols-outlined{ font-variation-settings:"wght" 600; }
hr{ border:0; height:1px; background: var(--line); }

/* ===============  Responsividade  =============== */
@media (max-width: 1100px){
  .obra-hero{
    grid-template-columns: 340px 1fr 120px;
    min-height: 320px;
  }
  .hero-logo{ max-width: 320px; }
}

@media (max-width: 900px){
  .obra-hero{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-right{ justify-content:flex-start; }
  .hero-left{
    min-height: 240px;
    border-bottom-right-radius: 160px;
  }
  .obra-body{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .page-content{ padding: 0 14px 48px; }
  .hero-logo{ width: 92%; }
  .stats-card .stat strong{ font-size: 20px; }
  .chapters-list .cap-card{
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta";
  }
  .cap-thumb{ width:120px; height:74px; }
  .cap-actions{ display:none; }
}

/* Aviso inline abaixo do botão Seguir */
.inline-notice{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #2a2c35;
  border-radius: 10px;
  background: #1f2026;
  color: #fff;
  max-width: clamp(260px, 40vw, 420px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.inline-notice .inline-link{
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  margin-left: 6px;
}
.inline-notice .material-symbols-outlined{ font-variation-settings:"wght" 600; }

/* Empurra o bloco do botão/aviso para a linha de baixo quando a largura estiver nessa faixa */
@media (min-width: 900px) and (max-width: 1180px){
  .obra-hero{
    grid-template-columns: 360px 1fr;    /* capa + coluna central */
    grid-auto-rows: auto;
  }
  .hero-right{
    grid-column: 1 / -1;                 /* ocupa linha inteira abaixo */
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* Em telas pequenas já fica em 1 coluna, então só um refinamento */
@media (max-width: 900px){
  .hero-right{
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* Link do aviso de login (seguir) */
.inline-notice .inline-link,
.inline-notice .inline-link:visited{
  color: #ff344e !important;        /* força a cor pedida */
  text-decoration: none;            /* tiramos o azul sublinhado padrão */
  border-bottom: 1px dashed rgba(255,52,78,.55);
}

.inline-notice .inline-link:hover,
.inline-notice .inline-link:focus-visible{
  color: #ff6e83 !important;        /* leve destaque no hover/focus */
  border-bottom-color: currentColor;
  outline: none;
}

/* --- Lista de capítulos (melhor thumb e ações) --- */
.chapters-list .cap-card{
  display:grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.cap-thumb-wrap { display:block; border-radius:14px; overflow:hidden; }
.cap-thumb{
  width: 110px; height: 110px;           /* quadrada, mais vistosa */
  border-radius: 14px;
  object-fit: cover;
  border:1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .18s ease, filter .18s ease;
}
.cap-thumb-wrap:hover .cap-thumb { transform: scale(1.02); filter: brightness(1.04); }

.cap-title{
  display:inline-block;
  font-weight:800;
  margin-bottom: 6px;
  text-decoration:none;
  color: var(--text);
}
.cap-title:hover { text-decoration: underline; }

.cap-meta{
  color: var(--muted);
  font-size: 13px;
  display:flex; gap:16px; align-items:center;
}

.cap-actions{ display:flex; gap:10px; }
.cap-actions .icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background: var(--tag-bg); color:#fff; display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(255,70,104,.25);
}
.cap-actions .icon-btn:hover{ filter: brightness(1.05); }

/* Responsivo: empilha melhor */
@media (max-width: 560px){
  .chapters-list .cap-card{
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta"
      "thumb actions";
  }
  .cap-thumb, .cap-thumb-wrap{ width:92px; height:92px; }
  .cap-actions{ grid-area: actions; }
}

/* --- Lista de capítulos --- */
.chapters-list .cap-card{
  display:grid;
  grid-template-columns: 148px 1fr auto;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
}

.cap-meta{
  color: var(--muted);
  font-size: 13px;
  display:flex;
  gap:12px;
  align-items:center;
}

/* botão “copiar” inline (escondido por padrão – só mobile mostra) */
.copy-inline { display:none; }

/* botão redondo padrão (desktop) */
.cap-actions .icon-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  background: var(--tag-bg);
  color:#fff; display:grid; place-items:center;
}

/* ======= Mobile (≤520px): botão ao lado das views ======= */
@media (max-width: 520px){
  .chapters-list .cap-card{
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta";
  }
  .cap-actions{ display:none; }           /* esconde o botão lateral */
  .copy-inline{
    display:inline-flex;                  /* mostra o botão dentro de .cap-meta */
    width:30px; height:30px; min-width:30px;
    border-radius:8px; border:1px solid var(--line);
    background: var(--tag-bg); color:#fff;
    justify-content:center; align-items:center;
    padding:0;
  }
}

/* ===== INVERTER TAMANHOS ===== */

/* 1) Último capítulo: maior */
.stat.last > div{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
}
.stat.last > div img{
  width:120px !important;
  height:120px !important;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.stat.last .chapter-title{
  font-size:1.05rem;
  font-weight:800;
}
.stat.last .chapter-meta{
  color:var(--muted);
  font-size:.95rem;
}

@media (max-width: 520px){
  .stat.last > div img{
    width:92px !important;
    height:92px !important;
  }
}

/* 2) Lista de capítulos: menor/compacto */
.chapters-list .cap-card{
  grid-template-columns: 72px 1fr auto;
  padding:10px;
  gap:12px;
}
.cap-thumb-wrap,
.cap-thumb{
  width:72px;
  height:72px;
  border-radius:10px;
}
.cap-title{
  font-size:.98rem;
  margin-bottom:4px;
}
.cap-actions .icon-btn{
  width:32px;
  height:32px;
  border-radius:10px;
}

/* Mobile ainda gruda o botão de copiar na linha de views */
@media (max-width: 560px){
  .chapters-list .cap-card{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta";
  }
  .cap-thumb-wrap,
  .cap-thumb{
    width:64px;
    height:64px;
  }
}

.hero-tags{
  display:flex; flex-wrap:wrap; gap:10px;
}
.hero-tags .tag,
.hero-tags button{
  background: var(--tag-bg);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing:.2px;
}
.hero-tags .tag--accent,
.hero-tags .btn-accent{
  background: var(--accent);
  border-color: transparent;
}

.hero-right{
  display:flex; align-items:flex-start; justify-content:flex-end;
}
.btn{
  appearance:none; border:0; cursor:pointer;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
  transition: transform .06s ease, filter .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-follow{
  background: var(--accent);
  color:#fff;
  box-shadow: 0 8px 20px rgba(255,70,104,.35);
}
.btn-follow:hover{ filter: brightness(1.05); }

/* ===============  Corpo (colunas)  =============== */
.obra-body{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  margin-top: 28px;
}

/* ===============  Coluna esquerda  =============== */
.obra-left{ display:flex; flex-direction:column; gap: 22px; }

/* --- Card de estatísticas --- */
.stats-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.stat{
  padding: 14px 16px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.stat span{
  display:block; color:var(--muted); font-size:12.5px; margin-bottom:4px;
  letter-spacing:.3px; text-transform: none;
}
.stat strong{
  font-size: 22px; font-weight:900; letter-spacing:.3px;
}
.stat.last{ padding: 0; border:0; background: transparent; }
.stat.last > div{ /* #statUltimo vira card com imagem do último capítulo */
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  overflow:hidden;
}

/* “Próximo capítulo” com contorno chamativo */
.stats-card .stat:nth-child(2){
  border: 2px dashed rgba(255,255,255,.08);
  background: linear-gradient(180deg, #23262a, #25292e);
  box-shadow: inset 0 0 0 2px rgba(255,70,104,.35);
}

/* --- Busca --- */
.chapters-search .input{
  width:100%;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow);
}
.chapters-search .input::placeholder{ color: var(--muted); }

/* --- Lista de capítulos --- */
.chapters-list{
  display:flex; flex-direction:column; gap: 18px;
}
.chapters-list .cap-card{
  display:grid;
  grid-template-columns: 148px 1fr auto;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
}
.cap-thumb{
  width: 148px; height: 88px; border-radius: 12px; object-fit:cover;
}
.cap-title{
  font-weight:800; margin-bottom: 6px;
}
.cap-meta{
  color: var(--muted); font-size: 13px; display:flex; gap:16px; align-items:center;
}
.cap-actions{ display:flex; gap:10px; }
.cap-actions .icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background: var(--tag-bg); color:#fff; display:grid; place-items:center;
}

/* ===============  Sidebar direita  =============== */
.obra-right{
  display:flex; flex-direction:column; gap: 22px;
}
.side-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 140px;
}
.side-card.hidden{ display:none; }
.side-card .side-title{
  font-weight: 900; margin-bottom: 12px; letter-spacing:.2px;
}
.side-card .side-sub{ color:var(--muted); font-size:13.5px; margin-top: 6px; }

/* imagem do "Compre o Livro" / "Ajude no Apoia-se" */
.side-thumb{
  pointer-events: none;
  display:block;
  width: 100%;          /* ocupa toda a largura do card */
  max-width: 100%;
  height: auto;         /* mantém a proporção da capa */
  border-radius: var(--radius-md);
  object-fit: cover;    /* se você quiser leve corte em vez de bordas vazias */
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  margin-top: 8px;
}

/* botão de link da loja / apoia-se */
.side-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(255,70,104,.30);
}
.side-link:hover,
.side-link:focus-visible{
  filter: brightness(1.05);
  outline:none;
}

/* ===============  Utilidades  =============== */
.material-symbols-outlined{ font-variation-settings:"wght" 600; }
hr{ border:0; height:1px; background: var(--line); }

/* ===============  Responsividade  =============== */
@media (max-width: 1100px){
  .obra-hero{
    grid-template-columns: 340px 1fr 120px;
    min-height: 320px;
  }
  .hero-logo{ max-width: 320px; }
}

@media (max-width: 900px){
  .obra-hero{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-right{ justify-content:flex-start; }
  .hero-left{
    min-height: 240px;
    border-bottom-right-radius: 160px;
  }
  .obra-body{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .page-content{ padding: 0 14px 48px; }
  .hero-logo{ width: 92%; }
  .stats-card .stat strong{ font-size: 20px; }
  .chapters-list .cap-card{
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta";
  }
  .cap-thumb{ width:120px; height:74px; }
  .cap-actions{ display:none; }
}

/* Aviso inline abaixo do botão Seguir */
.inline-notice{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #2a2c35;
  border-radius: 10px;
  background: #1f2026;
  color: #fff;
  max-width: clamp(260px, 40vw, 420px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.inline-notice .inline-link{
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  margin-left: 6px;
}
.inline-notice .material-symbols-outlined{ font-variation-settings:"wght" 600; }

/* Empurra o bloco do botão/aviso para a linha de baixo quando a largura estiver nessa faixa */
@media (min-width: 900px) and (max-width: 1180px){
  .obra-hero{
    grid-template-columns: 360px 1fr;    /* capa + coluna central */
    grid-auto-rows: auto;
  }
  .hero-right{
    grid-column: 1 / -1;                 /* ocupa linha inteira abaixo */
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* Em telas pequenas já fica em 1 coluna, então só um refinamento */
@media (max-width: 900px){
  .hero-right{
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* Link do aviso de login (seguir) */
.inline-notice .inline-link,
.inline-notice .inline-link:visited{
  color: #ff344e !important;        /* força a cor pedida */
  text-decoration: none;            /* tiramos o azul sublinhado padrão */
  border-bottom: 1px dashed rgba(255,52,78,.55);
}

.inline-notice .inline-link:hover,
.inline-notice .inline-link:focus-visible{
  color: #ff6e83 !important;        /* leve destaque no hover/focus */
  border-bottom-color: currentColor;
  outline: none;
}

/* --- Lista de capítulos (melhor thumb e ações) --- */
.chapters-list .cap-card{
  display:grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.cap-thumb-wrap { display:block; border-radius:14px; overflow:hidden; }
.cap-thumb{
  width: 110px; height: 110px;           /* quadrada, mais vistosa */
  border-radius: 14px;
  object-fit: cover;
  border:1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .18s ease, filter .18s ease;
}
.cap-thumb-wrap:hover .cap-thumb { transform: scale(1.02); filter: brightness(1.04); }

.cap-title{
  display:inline-block;
  font-weight:800;
  margin-bottom: 6px;
  text-decoration:none;
  color: var(--text);
}
.cap-title:hover { text-decoration: underline; }

.cap-meta{
  color: var(--muted);
  font-size: 13px;
  display:flex; gap:16px; align-items:center;
}

.cap-actions{ display:flex; gap:10px; }
.cap-actions .icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background: var(--tag-bg); color:#fff; display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(255,70,104,.25);
}
.cap-actions .icon-btn:hover{ filter: brightness(1.05); }

/* Responsivo: empilha melhor */
@media (max-width: 560px){
  .chapters-list .cap-card{
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta"
      "thumb actions";
  }
  .cap-thumb, .cap-thumb-wrap{ width:92px; height:92px; }
  .cap-actions{ grid-area: actions; }
}

/* --- Lista de capítulos --- */
.chapters-list .cap-card{
  display:grid;
  grid-template-columns: 148px 1fr auto;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
}

.cap-meta{
  color: var(--muted);
  font-size: 13px;
  display:flex;
  gap:12px;
  align-items:center;
}

/* botão “copiar” inline (escondido por padrão – só mobile mostra) */
.copy-inline { display:none; }

/* botão redondo padrão (desktop) */
.cap-actions .icon-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  background: var(--tag-bg);
  color:#fff; display:grid; place-items:center;
}

/* ======= Mobile (≤520px): botão ao lado das views ======= */
@media (max-width: 520px){
  .chapters-list .cap-card{
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta";
  }
  .cap-actions{ display:none; }           /* esconde o botão lateral */
  .copy-inline{
    display:inline-flex;                  /* mostra o botão dentro de .cap-meta */
    width:30px; height:30px; min-width:30px;
    border-radius:8px; border:1px solid var(--line);
    background: var(--tag-bg); color:#fff;
    justify-content:center; align-items:center;
    padding:0;
  }
}

/* ===== INVERTER TAMANHOS ===== */

/* 1) Último capítulo: maior */
.stat.last > div{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
}
.stat.last > div img{
  width:120px !important;
  height:120px !important;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.stat.last .chapter-title{
  font-size:1.05rem;
  font-weight:800;
}
.stat.last .chapter-meta{
  color:var(--muted);
  font-size:.95rem;
}

@media (max-width: 520px){
  .stat.last > div img{
    width:92px !important;
    height:92px !important;
  }
}

/* 2) Lista de capítulos: menor/compacto */
.chapters-list .cap-card{
  grid-template-columns: 72px 1fr auto;
  padding:10px;
  gap:12px;
}
.cap-thumb-wrap,
.cap-thumb{
  width:72px;
  height:72px;
  border-radius:10px;
}
.cap-title{
  font-size:.98rem;
  margin-bottom:4px;
}
.cap-actions .icon-btn{
  width:32px;
  height:32px;
  border-radius:10px;
}

/* Mobile ainda gruda o botão de copiar na linha de views */
@media (max-width: 560px){
  .chapters-list .cap-card{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb meta";
  }
  .cap-thumb-wrap,
  .cap-thumb{
    width:64px;
    height:64px;
  }
}