*{box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:dark;--bg:#030405;--panel:#11131a;--ink:#e8fff7;--muted:#7898ad;--blue:#8edaff;--green:#55ff8a;--line:#23404f}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font:14px/1.45 "Courier New",monospace}
a{color:var(--blue)}
button{font:inherit;background:#0a141b;color:var(--blue);border:1px solid #8edaff66;border-radius:.25rem;padding:.15rem .6rem;cursor:pointer}
button:hover{border-color:var(--blue);color:#d9f4ff}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:1px dashed var(--green);outline-offset:2px}
/* compact 40px header */
.topbar{flex:0 0 40px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 .5rem;background:var(--panel);border-bottom:1px dashed #8edaff55}
.brand{display:flex;align-items:center;gap:.5rem;white-space:nowrap;overflow:hidden}
.brand strong{color:var(--blue);text-shadow:0 0 .4rem #39bfff88;font-size:.9rem;letter-spacing:.1em}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--green);box-shadow:0 0 .4rem var(--green);flex:none}
.dot.off{background:#ff3dbb;box-shadow:0 0 .4rem #ff3dbb}
.topstatus{display:flex;align-items:center;gap:.4rem}
.pill{font-size:.7rem;border:1px solid var(--line);border-radius:999px;padding:0 .5rem;color:var(--muted);white-space:nowrap}
.pill.live{color:var(--blue);border-color:var(--blue)}
.pill.ok{color:var(--green);border-color:var(--green)}
.pill.bad{color:#ff3dbb;border-color:#ff3dbb}
/* viewport-filling stage + 240px side */
.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:6px;padding:6px}
body.info-hidden .layout{grid-template-columns:minmax(0,1fr)}
body.info-hidden .side{display:none}
.stage{display:flex;flex-direction:column;min-height:0;min-width:0;background:#000;border:1px solid var(--line);border-radius:.25rem;overflow:hidden}
.banner{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.25rem .5rem;font-size:.78rem;background:#0a141b;border-bottom:1px dashed #8edaff55;flex:none}
.banner.preview{background:#0d1c12;border-bottom-color:var(--green)}
.stage-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;padding:6px}
.stage-body img{max-width:100%;max-height:100%;object-fit:contain}
.stage-body video{max-width:100%;max-height:100%}
.stage-body audio{width:min(480px,100%);flex:none}
.stage-body iframe{width:100%;height:100%;flex:1 1 auto;min-height:0;border:0;background:#fff}
.stage-body pre{align-self:stretch;flex:1;min-width:0;min-height:0;overflow:auto;margin:0;white-space:pre-wrap;word-break:break-word;background:#030405;color:var(--ink);padding:.6rem;font:inherit}
.muted{color:var(--muted)}
/* compact side panel, internal scroll */
.side{min-height:0;min-width:0;overflow:auto;background:var(--panel);border:1px dashed #8edaff55;border-radius:.25rem;padding:.6rem;font-size:.8rem}
.side h1{font-size:.95rem;margin:0 0 .2rem;color:var(--blue);overflow-wrap:anywhere}
.side p{margin:.3rem 0;overflow-wrap:anywhere}
#itemCaption{white-space:pre-wrap}
.links{display:flex;gap:1rem}
/* drawers below header */
.drawer{position:fixed;top:40px;right:0;bottom:0;width:min(360px,94vw);z-index:10;overflow:auto;background:var(--panel);border-left:1px dashed #8edaff55;padding:.7rem}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:var(--blue)}
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.hist li button{width:100%;text-align:left;display:block}
.hist .t{font-weight:700;color:var(--ink)}
.hist .m{font-size:.7rem;color:var(--muted)}
.hist li.current button{border-color:var(--green);box-shadow:0 0 .4rem #55ff8a44}
#moreBtn{width:100%;margin-top:.6rem}
form label{display:block;margin:.5rem 0;font-size:.8rem}
input[type=text],textarea{width:100%;background:#030405;color:var(--ink);border:1px solid var(--line);border-radius:.25rem;padding:.4rem;margin-top:.2rem;font:inherit}
input[type=file]{max-width:100%;font:inherit;font-size:.75rem}
.row{display:flex!important;gap:.5rem;align-items:center}
@media (max-width:700px){
  .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  body.info-hidden .layout{grid-template-rows:minmax(0,1fr)}
  .side{max-height:26dvh;border-top:1px dashed #8edaff55}
  .pill{display:none}
  .pill.live{display:inline}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* login form (public; password-manager friendly, dash-style) */
body:has(.login-screen){display:grid;height:auto;min-height:100dvh;overflow:auto}
.login-screen{display:grid;min-height:100dvh;place-items:center;padding:1rem}
.login-card{width:min(100%,22rem);background:var(--panel);border:1px dashed #8edaff55;border-radius:.25rem;padding:1.2rem}
.login-card h1{margin:0 0 .2rem;color:var(--blue);font-size:1rem;letter-spacing:.08em}
.login-form{display:grid;gap:.7rem;margin-top:1rem}
.login-form input{width:100%;background:#030405;color:var(--ink);border:1px solid var(--line);border-radius:.25rem;padding:.5rem .6rem;font:inherit}
.login-submit{width:100%;background:var(--green);color:#030405;border:1px solid var(--green);padding:.45rem;font-weight:700}
.login-submit:hover{border-color:var(--blue);background:var(--blue);color:#030405}
.flash{color:#ff3dbb;border:1px solid #ff3dbb66;padding:.4rem .6rem;margin:.6rem 0}
#logoutLink{color:var(--muted);text-decoration:none;font-size:.75rem}
#logoutLink:hover{color:var(--blue)}