/* Demo portal - layout (palette + primitives from ../theme.css) */
body{display:flex;flex-direction:column}

#bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border)}
#bar .sub{color:var(--muted)}
.status{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.status.up{color:var(--ok)} .status.up::before{background:var(--ok)}
.status.down{color:var(--emergency)} .status.down::before{background:var(--emergency)}

main{flex:1;display:grid;grid-template-columns:1.5fr 1fr;gap:16px;padding:16px;min-height:0;background:var(--surface)}
.pane{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:0;box-shadow:var(--shadow)}
.cap{padding:10px 16px;background:var(--card);color:var(--text);font-weight:600;border-bottom:1px solid var(--border)}
.cap span{color:var(--muted);font-weight:400;font-size:12px;margin-left:8px}
iframe{flex:1;border:0;width:100%;background:var(--bg)}
.kiosk{max-width:580px}

#err{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.96);color:var(--muted);text-align:center;padding:2rem;font-size:16px}
@media(max-width:880px){main{grid-template-columns:1fr;grid-auto-rows:1fr}.kiosk{max-width:none}}