:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #17212b; background: #f4f5f6; }
* { box-sizing: border-box; border-radius: 0; }
body { margin: 0; }
main { max-width: 1100px; margin: 40px auto; padding: 0 24px; }
h1 { margin-bottom: 4px; } h2 { font-size: 1.25rem; margin: 0 0 12px; }
header p { color: #586574; margin-top: 0; }
section, #connect-form { margin-top: 24px; border-top: 1px solid #c7ced4; padding-top: 20px; }
.controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; }
input, button { font: inherit; padding: 9px 12px; border: 1px solid #86939e; background: white; }
#api-url { min-width: 320px; }
button { cursor: pointer; color: #164778; font-weight: 600; }
button:hover { background: #e9eff5; } button:disabled { opacity: .5; cursor: default; }
[hidden] { display: none !important; }
[role=alert], #error { color: #a51e23; white-space: pre-wrap; }
#warnings { color: #74440b; }
pre { overflow: auto; font-size: 12px; max-height: 340px; background: #e9edef; padding: 14px; }
.table-heading { display: flex; justify-content: space-between; align-items: baseline; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; border-bottom: 1px solid #c7ced4; padding: 12px; }
th { background: #e9edef; font-size: .85rem; }
dialog { border: 1px solid #86939e; padding: 24px; width: min(1000px, 94vw); max-width: 94vw; max-height: 90vh; overflow-y: auto; }
dialog::backdrop { background: #17212b88; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.dialog-heading h2 { margin: 0; }
#check-image { display: block; width: 100%; height: auto; max-width: 100%; margin-bottom: 20px; }
#check-metadata { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 3fr); margin: 0; }
#check-metadata dt, #check-metadata dd { margin: 0; padding: 10px 0; border-bottom: 1px solid #c7ced4; }
#check-metadata dt { font-weight: 600; color: #586574; padding-right: 20px; }
#check-metadata dd { overflow-wrap: anywhere; white-space: pre-wrap; }
#load-more { margin-top: 16px; }
@media (max-width: 600px) { main { margin-top: 20px; padding: 0 14px; } #api-url { min-width: 0; width: 100%; } #connect-form label { width: 100%; } }

@media (max-width: 600px) { dialog { padding: 16px; } #check-metadata { grid-template-columns: 1fr; } #check-metadata dt { border-bottom: 0; padding-bottom: 0; } }