html, body { height: 100%; margin: 0; }
.cr-page { display: flex; flex-direction: column; font-family: var(--font-sans, system-ui, sans-serif); font-size: 13px; color: var(--text); background: var(--bg, #0e1116); }
.cr-hd { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.cr-hd h1 { font-size: 16px; margin: 0; }
.cr-back { color: var(--text-muted); text-decoration: none; }
.cr-info { flex: 1 1 auto; color: var(--text-muted); }
.cr-sw { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.cr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.cr-dot.on { background: var(--ok, #2ecc71); }
.cr-err { color: var(--danger, #c0392b); padding: 8px 16px 0; }
.cr-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }
.cr-off { padding: 28px; text-align: center; color: var(--text-muted); }