* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #555; }
body { display: flex; min-height: 100vh; }
body { font: 9px/11px Geneva, Verdana, Arial, sans-serif; color: #cecece; user-select: none; letter-spacing: 0.5px; -webkit-font-smoothing: none; font-smooth: never; }
#app { width: 843px; margin: auto; position: relative; flex: none; }   /* auto margins stay scrollable in small windows */
/* neighbouring panels overlap by 1 px so their shared border is a single line */
#desk { display: grid; grid-template-columns: 224px 475px 144px; grid-template-rows: 309px 406px; width: 843px; height: 715px; position: relative; }
.panel { position: relative; overflow: hidden; background: #313131; }
#p-draw { grid-column: 1 / span 2; grid-row: 1; }
#p-set { grid-column: 3; grid-row: 1; }
#p-equalizer { grid-column: 1; grid-row: 2; }
#p-system { grid-column: 2 / span 2; grid-row: 2; margin-left: -1px; }

.sp { position: absolute; }
.sp img { display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.sp canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.sp .tx { position: absolute; inset: 0; text-align: center; white-space: nowrap; font: 9px/11px Geneva, Verdana, Arial, sans-serif; }
.sp .tx.field { white-space: pre; overflow: hidden; }
.sp .bar { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.sp input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; font: 9px/11px Geneva, Verdana, Arial, sans-serif; letter-spacing: 0.5px; text-align: center; outline: none; cursor: inherit; }
.sp input.on { background: #fff; color: #000 !important; }
.sp.setlist { overflow: hidden; }
.sp.setlist .tx { text-align: left; bottom: auto; }

#bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 7px 0 8px; background: #101010; position: relative; margin-top: -1px; color: #cecece; border: 1px solid #cecece; border-top: 0; }   /* the top edge is the panels' bottom line */
/* aligned with "clear stage" and "update stage" above, with the same 4 px gap */
#stage-open { width: 70px; padding-left: 0; padding-right: 0; }
#stage-fullscreen { width: 90px; margin-left: -2px; padding-left: 0; padding-right: 0; }
#bar .lbl { color: #888; }
#bar .sp-right { flex: 1; }
#bar select, #bar button, #modal button { font: 9px/11px Geneva, Verdana, Arial, sans-serif; background: #313131; color: #cecece; border: 1px solid #777; padding: 3px 7px; }
#bar select { max-width: 200px; }
#bar button:hover:not(:disabled), #modal button:hover { border-color: #ffce00; color: #ffce00; }
#bar button:disabled { opacity: .4; }
#audio-state { color: #888; margin-left: 4px; }
#bar.live #audio-state { color: #ffce00; }

#notice { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 9000; background: #ffce00; color: #000; padding: 6px 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
#notice.on { opacity: 1; }

#modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 9999; }
#modal.on { display: flex; }
#modal .box { width: 260px; background: #212121; border: 1px solid #cecece; }
#modal .title { background: #101010; padding: 5px 8px; border-bottom: 1px solid #cecece; }
#modal .list { max-height: 320px; overflow: auto; padding: 4px; display: grid; }
#modal .list button { text-align: left; border: 0; background: transparent; padding: 3px 6px; }
#modal .row { display: flex; justify-content: flex-end; gap: 6px; padding: 6px; border-top: 1px solid #555; }