@layer features {
.lumi-web-search-status { display: grid; gap: 12px; margin-bottom: 16px; }
.lumi-web-search-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.lumi-web-search-status-grid > div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.lumi-web-search-status-grid span { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.lumi-web-search-capabilities { display: flex; flex-wrap: wrap; gap: 6px; }
.lumi-web-search-recent { display: grid; gap: 5px; max-height: 180px; overflow: auto; margin-top: 8px; font-size: 12px; }
.lumi-web-search-recent > div { padding: 7px; border-left: 3px solid var(--border); background: var(--surface-2); overflow-wrap: anywhere; }
.lumi-web-search-test { display: grid; grid-template-columns: minmax(220px, 1fr) 130px auto; align-items: end; gap: 8px; }
.lumi-web-search-test label { display: grid; gap: 4px; font-weight: 800; }
.lumi-web-search-test-output { max-height: 280px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 760px) { .lumi-web-search-test { grid-template-columns: 1fr; } }

.lumi-web-search-status-grid span,
.lumi-web-search-recent { font-size: var(--lumi-font-size-sm); }
}
