/* ====== Base mobile-first para todo o projeto ====== */
:root{
  --gap: 12px;
  --radius: 12px;
  --line: #eef1f5;
  --muted:#6b7280;
  --brandA:#0ea5e9; --brandB:#6366f1;
}

html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{ font-feature-settings:"liga" 1; background:#f6f7f9; }

/* tipografia mais legível em telas pequenas */
h1,h2,h3,h4{ line-height:1.25; }
.small, .text-muted{ color:var(--muted)!important; }

/* botões & inputs com tap target ≥ 44px */
.btn,.form-control,.form-select,.page-link{ min-height:44px; }

/* cartões com sombra sutil */
.card{ border:0; border-radius:12px; }
.card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08); }

/* botão primário com degradê */
.btn-primary{ background:linear-gradient(135deg,var(--brandA),var(--brandB)); border:0; }
.btn-primary:hover{ filter:brightness(1.03); }

/* tabelas mais “tocáveis” no admin */
.table td, .table th{ padding:.9rem .75rem; }

/* ====== Componentes do glossário ====== */
.gl-sticky{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); padding:.5rem 0; }
.thumb{ width:84px; height:84px; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#f3f4f6; }
.term-title{ font-weight:600; font-size:1rem; line-height:1.25; }
.snippet{ color:var(--muted); }
.term-cover img{ width:100%; height:auto; display:block; border-radius:12px; }

/* paginação com área de toque boa */
.pagination .page-link{
  min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
}

/* ====== Responsivo ====== */
@media (min-width:768px){
  .thumb{ width:96px; height:96px; }
  .term-title{ font-size:1.0625rem; }
}
@media (max-width:360px){
  .thumb{ width:72px; height:72px; }
}