:root { color-scheme: light dark; font-family: Inter, system-ui, sans-serif; }
body { margin: 0; background: #f5f6f8; color: #111; }
.container { max-width: 980px; margin: 2rem auto; padding: 0 1rem; }
h1 { font-size: 1.8rem; margin-bottom: 1rem; }
.searchbar { display: flex; gap: .5rem; margin-bottom: 1rem; }
.searchbar input { flex: 1; padding: .8rem; border: 1px solid #ccc; border-radius: 10px; }
.searchbar button { padding: .8rem 1rem; border-radius: 10px; border: 0; background: #111; color: #fff; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.card { background: #fff; border-radius: 12px; padding: .8rem; border: 1px solid #ddd; }
.card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.card h2 { font-size: 1rem; margin: 0; }
.state { font-size: .8rem; padding: .1rem .5rem; border-radius: 20px; background: #eee; }
.card[data-state='loading'] .state { background: #fff3cd; }
.card[data-state='done'] .state { background: #d1e7dd; }
.card[data-state='error'] .state { background: #f8d7da; }
.body { font-size: .9rem; overflow: auto; }
pre { white-space: pre-wrap; margin: 0; font-size: .8rem; }
.ok { color: #166534; }
.warn { color: #b45309; }
.err { color: #b91c1c; }
.small { color: #666; font-size: .8rem; }
.spf-record { margin: .4rem 0; }
.spf-record ul { margin: .25rem 0 .5rem 1rem; padding: 0; }
.spf-record pre { background: #f1f3f5; padding: .35rem .5rem; border-radius: 8px; }
@media (max-width: 600px){ .searchbar{flex-direction:column;} .searchbar button{width:100%;} }

@media (max-width: 900px){ .cards{grid-template-columns:1fr;} }