.hf-transparency-hero { background: linear-gradient(135deg, #0d6efd 0%, #198754 100%); color: #fff; }
.hf-kpi-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 1rem 1.25rem; height: 100%; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.hf-kpi-card span { display: block; font-size: .85rem; color: #64748b; margin-bottom: .35rem; }
.hf-kpi-card strong { font-size: 1.15rem; color: #0f172a; }
.hf-public-search .form-control, .hf-public-search .form-select { border-radius: 999px; }
.hf-evidence-masonry { columns: 2; column-gap: 1rem; }
@media (min-width: 768px) { .hf-evidence-masonry { columns: 3; } }
@media (min-width: 1200px) { .hf-evidence-masonry { columns: 4; } }
.hf-evidence-thumb { display: block; break-inside: avoid; margin-bottom: 1rem; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: transform .2s ease; }
.hf-evidence-thumb:hover { transform: translateY(-3px); }
.hf-evidence-thumb img { width: 100%; display: block; object-fit: cover; min-height: 140px; }
.hf-evidence-date { position: absolute; left: .5rem; bottom: .5rem; background: rgba(15,23,42,.75); color: #fff; font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; }
.hf-lightbox { position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.hf-lightbox[hidden] { display: none !important; }
.hf-lightbox img { max-width: min(96vw, 1100px); max-height: 78vh; border-radius: 8px; }
.hf-lightbox-caption { color: #fff; margin-top: .75rem; text-align: center; }
.hf-lightbox-close { position: absolute; top: 1rem; right: 1rem; border: 0; background: transparent; color: #fff; font-size: 2rem; line-height: 1; }
.hf-doc-center { display: grid; gap: 1rem; }
.hf-doc-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; }
.hf-doc-icon { font-size: 1.75rem; color: #0d6efd; }
.hf-download-recent li { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.hf-participation textarea { min-height: 120px; }

/* Phase 6.4.11.2 — project transparency detail */
.hf-project-transparency-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .hf-project-transparency-kpi { grid-template-columns: repeat(5, 1fr); } }
.hf-project-transparency-kpi .hf-kpi-card strong { font-size: 1rem; }
.hf-util-bar { height: 8px; border-radius: 999px; background: #e8f0ee; overflow: hidden; margin-top: .35rem; }
.hf-util-bar span { display: block; height: 100%; background: linear-gradient(90deg, #0d6efd, #198754); }

/* Phase 6.4.11.2.1 — vertical evidence timeline (left column) */
.hf-evidence-timeline-v { list-style: none; margin: 0; padding: 0 0 0 .35rem; position: relative; }
.hf-evidence-timeline-v::before { content: ''; position: absolute; left: .9rem; top: .4rem; bottom: .4rem; width: 2px; background: #d8e4e0; }
.hf-evidence-timeline-v li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem .65rem; position: relative; padding: 0 0 .85rem; }
.hf-evidence-timeline-v li:last-child { padding-bottom: 0; }
.hf-evidence-timeline-v__icon {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #e8f0ff; color: #0d6efd; font-size: .85rem; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 0 2px #d8e4e0;
}
.hf-evidence-timeline-v li.is-success .hf-evidence-timeline-v__icon { background: #d1e7dd; color: #198754; }
.hf-evidence-timeline-v li.is-secondary .hf-evidence-timeline-v__icon { background: #e9ecef; color: #6c757d; }
.hf-evidence-timeline-v__body strong { display: block; font-size: .78rem; line-height: 1.3; margin-bottom: .1rem; }
.hf-evidence-timeline-v__body time { display: block; font-size: .68rem; color: #64748b; }
.hf-evidence-timeline-v__body p { margin: .2rem 0 0; font-size: .68rem; color: #475569; line-height: 1.35; }

.hf-evidence-thumb {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.hf-detail-card--gallery { margin-bottom: 1rem; }
.hf-detail-card--gallery .hf-detail-gallery { margin-top: .5rem; }
.hf-detail-sidebar .hf-detail-side-card { margin-bottom: .85rem; }
.hf-detail-sidebar .hf-qr-panel img { width: 160px; height: 160px; }

.hf-qr-panel img { width: 180px; height: 180px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); background: #fff; }
.hf-qr-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.hf-qr-actions .btn.is-copied { background: #198754; border-color: #198754; color: #fff; }

.hf-gallery-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; color: #64748b; margin-bottom: 1rem; }
.hf-detail-sidebar .hf-related-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.hf-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 992px) { .hf-related-grid { grid-template-columns: repeat(4, 1fr); } }
.hf-detail-sidebar .hf-related-grid { grid-template-columns: 1fr; }
.hf-related-card { display: block; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: #fff; }
.hf-related-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.hf-related-card span { display: block; padding: .65rem .75rem; font-weight: 600; font-size: .9rem; }

.hf-lightbox-prev, .hf-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 2.5rem; width: 48px; height: 48px; border-radius: 50%; }
.hf-lightbox-prev { left: 1rem; }
.hf-lightbox-next { right: 1rem; }
.hf-lightbox-inner { max-width: min(960px, 100%); margin: 0; text-align: center; }
.hf-lightbox-inner img { cursor: zoom-in; }

.hf-detail-hero-image { object-fit: cover; min-height: 220px; background: #f4f8f7; }
@media (max-width: 991.98px) {
  .hf-detail-sidebar { margin-top: 1rem; }
  .hf-detail-hero-grid { grid-template-columns: 1fr; }
  .hf-detail-hero-image { max-height: 280px; width: 100%; }
}