/* Shell around the MedianViewer library: everything inside #median-viewer is styled by the library itself. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0f172a; color: #e5e7eb; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { display: flex; flex-direction: column; }
.shell-bar { display: flex; align-items: center; gap: 18px; padding: 8px 14px; background: #0b1220; border-bottom: 1px solid #1f2937; }
.brand { font-weight: 600; }
.brand .room { color: #9ca3af; font-weight: 400; margin-left: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.hint { color: #9ca3af; font-size: 12px; }
.hint code { background: #1f2937; padding: 1px 5px; border-radius: 4px; }
.shell-main { flex: 1; display: flex; min-height: 0; }
.shell-stage { flex: 1; min-width: 0; padding: 10px; display: flex; }
#median-viewer { flex: 1; min-width: 0; min-height: 0; position: relative; border-radius: 8px; overflow: hidden; }
.shell-side { width: 300px; background: #111827; border-left: 1px solid #1f2937; display: flex; flex-direction: column; min-height: 0; }
.side-title { padding: 8px 12px; font-weight: 600; border-bottom: 1px solid #1f2937; }
#props { margin: 0; padding: 8px 12px; font: 11px/1.4 ui-monospace, Menlo, monospace; color: #9ca3af; white-space: pre-wrap; max-height: 40%; overflow: auto; border-bottom: 1px solid #1f2937; }
#log-body { overflow: auto; padding: 6px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #9ca3af; flex: 1; }
#log-body div { padding: 2px 0; border-bottom: 1px dashed #1f2937; word-break: break-word; }
#log-body .err { color: #fca5a5; }
@media (max-width: 900px) { .shell-side { display: none; } }