/* Useful info pages — lightweight styles */
.useful-main{ padding: 18px 0 40px; }
.useful-shell{ max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.useful-head{ display:flex; flex-direction:column; gap:6px; margin: 10px 0 18px; }
.useful-title{ margin:0; font-size: var(--fs-h2); }
.useful-subtitle{ color:#475569; }

.useful-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

.useful-card{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid rgba(15,23,42,0.08); border-radius: 14px; overflow:hidden; text-decoration:none; color:inherit; transition: transform .12s ease, box-shadow .12s ease; }
.useful-card:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(15,23,42,0.08); }
.useful-card-cover{ width:100%; height: 150px; object-fit:cover; background:#e2e8f0; }
.useful-card-body{ padding: 12px 12px 14px; display:flex; flex-direction:column; gap:6px; }
.useful-card-title{ font-size: var(--fs-h3); margin:0; }
.useful-card-excerpt{ margin:0; color:#475569; font-size: var(--fs-body); line-height:1.35; }
.useful-card-meta{ font-size: var(--fs-caption); color:#64748b; }

.useful-error{ background:#fff; border:1px solid rgba(239,68,68,0.28); color:#b91c1c; padding:12px 14px; border-radius: 12px; }

.useful-pagination{ display:flex; gap:8px; justify-content:center; margin-top: 18px; }
.useful-pagination button{ border:1px solid rgba(15,23,42,0.12); background:#fff; border-radius: 12px; padding: 8px 12px; cursor:pointer; }
.useful-pagination button[disabled]{ opacity:.5; cursor:default; }

.useful-article{ background:#fff; border:1px solid rgba(15,23,42,0.08); border-radius: 14px; padding: 18px; }
.useful-back{ display:inline-block; margin-bottom: 10px; color:#2563eb; text-decoration:none; }
.useful-back:hover{ text-decoration:underline; }
.article-title{ margin: 0 0 6px; font-size: var(--fs-h2); }
.article-meta{ color:#64748b; font-size: var(--fs-caption); margin-bottom: 12px; }
.article-cover{ width:100%; max-height: 360px; object-fit:cover; border-radius: 12px; margin: 10px 0 16px; }
.article-body{ color:#0f172a; }
.article-body h2{ margin-top: 18px; }
.article-body p{ line-height: 1.55; }
.article-body img{ max-width: 100%; border-radius: 10px; }
.article-body a{ color:#2563eb; }