:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17202a; background: #f5f2eb; }
body { margin: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 32px 18px; }
.hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: #17202a; color: white; border-radius: 28px; padding: 34px; box-shadow: 0 20px 50px rgba(23,32,42,.18); }
h1 { font-size: clamp(2.2rem, 6vw, 5rem); line-height: .92; margin: 0 0 18px; letter-spacing: -0.07em; }
.hero p { max-width: 760px; color: #d7dedb; font-size: 1.1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; color: #b5ff6d !important; font-size: .75rem !important; font-weight: 800; }
.status { background: #b5ff6d; color: #17202a; padding: 14px 18px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
.note { color:#5f665f; font-weight:700; margin: 8px 2px 18px; }
.cards article, .panel { background: white; border: 1px solid #e7e0d5; border-radius: 22px; padding: 22px; box-shadow: 0 10px 24px rgba(23,32,42,.06); }
.cards span, .mini-cards span { display:block; color:#667; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.cards strong, .mini-cards strong { display:block; font-size:2rem; margin:10px 0 6px; }
.cards small, .mini-cards small { color:#6d6d6d; overflow-wrap:anywhere; }
.mini-cards { margin: 10px 0 18px; }
.mini-cards article { background:#f8f6f0; border:1px solid #ece6dc; border-radius:18px; padding:16px; }
.trust-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trust-card { background:#f8f6f0; border:1px solid #ece6dc; border-left:7px solid #17202a; border-radius:18px; padding:16px; }
.trust-card span { display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:900; padding:5px 9px; border-radius:999px; background:#17202a; color:white; margin-bottom:10px; }
.trust-card b { display:block; margin-bottom:6px; }
.trust-card p { margin:0; color:#5f665f; font-weight:650; }
.trust-card.verified { border-left-color:#2f7d32; }
.trust-card.verified span { background:#2f7d32; }
.trust-card.provisional { border-left-color:#b26a00; }
.trust-card.provisional span { background:#b26a00; }
.trust-card.blocked { border-left-color:#a12828; }
.trust-card.blocked span { background:#a12828; }
.panel { margin-top: 16px; }
#sources { display:grid; gap:10px; }
.source-row { display:grid; grid-template-columns: 180px 1fr 60px; gap: 12px; align-items:center; }
.bar { height: 12px; background:#e9e3d8; border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; background:#17202a; border-radius:999px; }
table { width:100%; border-collapse: collapse; font-size:.92rem; }
th, td { text-align:left; border-bottom:1px solid #ece6dc; padding:10px 8px; vertical-align:top; }
th { color:#667; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
#collectorStatus ul { margin: 8px 0 0 18px; padding: 0; }
#collectorStatus li { margin: 6px 0; overflow-wrap:anywhere; }
@media (max-width: 840px) { .hero, .grid, .split, .trust-grid { grid-template-columns: 1fr; } .status { width: fit-content; } .source-row { grid-template-columns: 1fr; } }