html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
body.list { padding: 2rem; max-width: 52rem; margin: 0 auto; height: auto; }
body.list h1 { font-size: 1.4rem; }
body.list table { border-collapse: collapse; width: 100%; }
body.list th, body.list td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #ddd; }
body.list .muted { color: #666; }
body.view { display: flex; flex-direction: column; }
body.view iframe { border: 0; width: 100%; flex: 1; display: block; }
body.view[data-status="loading"]::after { content: "Loading..."; position: fixed; top: 0.5rem; right: 0.75rem; font-size: 0.8rem; color: #666; }
body.view[data-status="failed"]::after { content: attr(data-note); position: fixed; top: 0.5rem; left: 0.75rem; font-size: 0.9rem; color: #b00020; }