:root { --fg:#111; --muted:#666; --border:#e6e6e6; --bg:#fff; }
html,body { background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.top { padding: 16px; border-bottom:1px solid var(--border); }
.row { display:flex; gap:12px; align-items:center; }
.wrap { padding: 16px; max-width: 980px; margin: 0 auto; }
.card { border:1px solid var(--border); padding: 14px; border-radius: 10px; margin: 12px 0; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.note.error { color: #b42318; }
pre { background:#fafafa; border:1px solid var(--border); padding:10px; border-radius:8px; overflow:auto; }
button { padding: 6px 10px; }
.tabs { display:flex; gap: 6px; flex-wrap: wrap; }
.tab-btn { border:1px solid var(--border); background:#fff; border-radius: 999px; padding: 6px 12px; cursor:pointer; }
.tab-btn.active { background:#111; color:#fff; border-color:#111; }
.eco-filters { display:flex; flex-direction:column; gap: 8px; margin-top: 10px; }
.eco-inputs { display:flex; gap: 8px; flex-wrap: wrap; }
.eco-inputs input, .eco-inputs select { padding: 6px 10px; border:1px solid var(--border); border-radius: 8px; }
.eco-list, .eco-hot-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.eco-card { border:1px solid var(--border); border-radius: 10px; padding: 10px; background:#fff; display:flex; flex-direction:column; gap: 8px; }
.eco-card h4 { margin: 0; font-size: 16px; }
.eco-badge { display:inline-flex; align-items:center; font-size: 11px; padding: 2px 8px; border-radius: 999px; background:#f2f2f2; text-transform: uppercase; letter-spacing: 0.04em; }
.eco-verify { display:inline-flex; align-items:center; font-size: 11px; padding: 2px 8px; border-radius: 999px; border:1px solid transparent; }
.eco-verify.verified { background:#e7f6ed; color:#166534; border-color:#b7e4c7; }
.eco-verify.offchain { background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.eco-verify.unverified { background:#fff4e5; color:#b45309; border-color:#fed7aa; }
.eco-meta { display:flex; gap: 6px; flex-wrap: wrap; align-items:center; }
.eco-legend { list-style:none; padding: 0; margin: 8px 0 12px; display:flex; flex-wrap: wrap; gap: 8px; }
.eco-legend li { display:flex; align-items:center; gap: 6px; font-size: 12px; color: var(--muted); }
.eco-toggle { display:flex; align-items:center; gap: 6px; font-size: 12px; color: var(--muted); }
.eco-toggle input { accent-color: #111; }
.eco-tags { display:flex; gap: 6px; flex-wrap: wrap; }
.eco-tag { border:1px solid var(--border); background:#fff; border-radius: 999px; font-size: 11px; padding: 2px 8px; cursor:pointer; }
.eco-tag.active { background:#111; color:#fff; border-color:#111; }
.eco-links { display:flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.eco-links a { text-decoration: none; border-bottom: 1px solid transparent; }
.eco-links a:hover { border-bottom-color: currentColor; }
.eco-hot-head { display:flex; align-items:baseline; gap: 10px; }
.eco-pr { margin-top: 12px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }