*{box-sizing:border-box}
html,body,#app,.view{margin:0;width:100%;height:100%;min-height:100%;background:#050b11;color:#eef7ff;font-family:Inter,system-ui,Arial,sans-serif}
body{overflow:hidden}
.hidden{display:none!important}
.muted{color:#a7bac9}
#pairView{display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top,#12304a 0,#07131d 42%,#03070a 100%)}
.pair-card{width:min(520px,100%);padding:38px;border:1px solid #26445a;border-radius:18px;background:rgba(8,24,36,.94);box-shadow:0 24px 80px rgba(0,0,0,.45)}
.brand{font-size:18px;font-weight:800;letter-spacing:.08em;color:#62b0ff;text-transform:uppercase}
h1{font-size:34px;margin:8px 0 8px}
form{display:grid;gap:14px;margin-top:26px}
input,button{font:inherit}
input{width:100%;padding:18px;border:1px solid #36546a;border-radius:12px;background:#06121b;color:#fff;text-align:center;font-size:34px;letter-spacing:.25em;outline:none}
input:focus{border-color:#62b0ff;box-shadow:0 0 0 3px rgba(98,176,255,.15)}
button{border:1px solid #3e6a89;border-radius:10px;background:#16344a;color:#fff;padding:12px 16px;font-weight:700;cursor:pointer}
form button{background:#5ca7f6;color:#07131d;border-color:#5ca7f6}
.error{margin-top:16px;padding:12px;border-radius:8px;background:#4b1717;color:#ffd2d2}
.receiver-meta{margin-top:28px;padding-top:18px;border-top:1px solid #20394b;display:flex;justify-content:space-between;gap:15px;color:#7590a3;font-size:13px}
#playerView{position:relative;background:#000}
#signageRoot{position:absolute;inset:0;display:grid;grid-template-rows:0px 1fr 0px;background:#000;overflow:hidden}
#signageHeader{grid-row:1}
#stage{grid-row:2;position:relative;min-width:0;min-height:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
#signageFooter{grid-row:3}
#stage img,#stage video{width:100%;height:100%;object-fit:contain;background:#000}
#stage img.signage-image{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:#000}
#stage iframe{width:100%;height:100%;border:0;background:#fff}
.text-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:7vw;text-align:center;font-size:clamp(34px,6vw,96px);line-height:1.15;background:#07131d;color:#fff;white-space:pre-wrap}
.waiting{font-size:clamp(24px,3.5vw,54px);color:#9eb2c2;text-align:center;padding:40px}
.status-overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:18px;opacity:0;transition:opacity .2s}
.status-overlay.visible{opacity:1}
.status-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);margin:-18px;padding:18px 18px 50px}
.status-top>div:first-child{display:flex;gap:12px;align-items:center}
.badge{padding:5px 9px;border-radius:999px;background:#5c4f16;color:#fff3ab;font-size:12px}
.badge.online{background:#155d3d;color:#caffdf}
.badge.offline{background:#6d2020;color:#ffd0d0}
.actions{pointer-events:auto;display:flex;gap:8px}
.actions button{font-size:12px;padding:8px 10px;background:rgba(6,18,27,.85)}
.status-message{align-self:center;margin-bottom:18px;padding:8px 13px;border-radius:999px;background:rgba(0,0,0,.65);font-size:13px}

/* Receiver 0.3.0: controls/status are hidden until user activity triggers .visible. */

.signage-region{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px;color:#fff;overflow:hidden}
.signage-region.hidden{display:none!important}
.region-text{font-size:clamp(18px,2vw,34px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-clock{font-size:clamp(18px,2vw,34px);font-weight:800;white-space:nowrap;margin-left:auto}
.marquee-wrap{position:relative;flex:1;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;white-space:nowrap;will-change:transform;padding-left:100%;animation-name:ivoice-marquee;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes ivoice-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
#signageRoot.overlay-mode{display:block}
#signageRoot.overlay-mode #stage{position:absolute;inset:0;width:100%;height:100%}
#signageRoot.overlay-mode #signageHeader{position:absolute;left:0;right:0;top:0}
#signageRoot.overlay-mode #signageFooter{position:absolute;left:0;right:0;bottom:0}