html, body { margin: 0; height: 100%; background: #0b1020; color: #e2e8f0; font-family: Segoe UI, Arial, sans-serif; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #111827; }
.bar a, .bar button, .bar select { color: #e2e8f0; background: #312e81; border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; text-decoration: none; font: inherit; margin-right: 6px; }
.bar button:disabled { opacity: .4; cursor: default; }
.role-switch { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.role-switch label { color: #c7d2fe; font-size: 13px; white-space: nowrap; }
.role-switch select { margin-right: 0; min-width: 11.5rem; appearance: auto; }
.stage { height: calc(100% - 56px); display: flex; align-items: center; justify-content: center; padding: 12px; }
.stage img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.meta { color: #94a3b8; font-size: 14px; }