*{box-sizing:border-box}body{margin:0;background:#071d27;color:#ecf7f8;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif} .wrap{max-width:1150px;margin:auto;padding:36px 22px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}h1{font-size:clamp(28px,4vw,46px);margin:0 0 12px}h2{margin:0 0 16px;font-size:23px}.sub{color:#b5cbd2}.panel{padding:28px;margin:26px 0;background:#102e3b;border:1px solid #2c4a57;border-radius:18px}input,select{background:#f9ffff;color:#092531;border:1px solid #8daab0;border-radius:8px;padding:11px;min-height:45px;min-width:0;width:100%;font:inherit}label{display:block;margin:12px 0;font-weight:600;min-width:190px}button{background:#35b89e;color:#082d2d;border:0;border-radius:9px;font:inherit;font-weight:700;padding:12px 18px;min-height:44px;cursor:pointer}.muted{background:#294958;color:white}button:disabled{opacity:.6}a{color:#7ce9d3}nav,.actions,.formrow{display:flex;gap:15px;flex-wrap:wrap;align-items:end}table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}th,td{padding:12px 13px;border-bottom:1px solid #355461;text-align:left;vertical-align:middle;white-space:nowrap}.notice{background:#174f54;color:#e9fffa;padding:15px;border-radius:10px}.paircode{font-size:clamp(28px,5vw,48px);letter-spacing:7px;font-weight:800;color:#87ffe3}.code{font-weight:800;font-size:19px;color:#87ffe3;display:inline-block}footer{color:#b5cbd2;margin:35px 0}form{margin:0}#message:not(:empty){padding:12px 0}

/* Additive HSEArabia brand treatment; no existing form, table or pairing styles replaced. */
.hse-heading-brand{display:flex;align-items:center;gap:17px;min-width:0;flex-wrap:wrap}
.hse-heading-brand>div{min-width:0}
.hse-heading-brand h1{margin:0 0 12px}
.hse-logo{width:110px;max-width:30vw;height:80px;object-fit:contain;flex:none;filter:invert(1);}
.hse-footer{margin:32px 0 12px;padding:18px 0 8px;border-top:1px solid #355461;color:#b5cbd2;font-size:14px}
.hse-footer-inner,.hse-footer-contact{display:flex;gap:12px 24px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.hse-footer-contact{justify-content:flex-start}
.hse-footer a{color:#b3eee3;text-decoration:none}
.hse-footer a:hover,.hse-footer a:focus-visible{text-decoration:underline}
@media(max-width:580px){.hse-logo{width:78px;height:58px}.hse-heading-brand{gap:10px}.hse-footer-inner{align-items:flex-start}}
body{background:linear-gradient(160deg,#071b25,#092e36)}.panel{box-shadow:0 10px 30px #0002}.screenrow,.playlistrow{border:1px solid #2c5660;background:#0a2530;border-radius:10px;margin:10px 0;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.screenrow small{display:block;color:#bbd0d5}.playlistrow label{margin:0;min-width:100px;width:130px}.playlistrow input{width:130px}.mini{padding:8px 12px;font-size:14px}.viewerbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;background:#102e3b}#viewer{margin:12px 0}#frame{width:100%;height:76vh;min-height:360px;border:0;background:#fff}#viewer:fullscreen{background:#071d27;display:flex;flex-direction:column}#viewer:fullscreen #frame{height:100%;flex:1}.heading nav{gap:14px}.hse-heading-brand .hse-logo{filter:none;background:#fff;border-radius:14px;padding:8px}h3{margin-top:25px}@media(max-width:650px){.wrap{padding:14px}.panel{padding:17px}#frame{height:60vh}}

/* v3.1 playback improvements (additive; pairing/admin untouched) */
#viewer{position:relative;overflow:hidden}
#viewer .viewerbar{position:relative;z-index:5;transition:opacity .22s ease,transform .22s ease}
#viewer.controls-hidden .viewerbar{opacity:0;transform:translateY(-105%);pointer-events:none;position:absolute;top:0;left:0;right:0}
#showControls{display:none;position:absolute;z-index:6;right:14px;top:14px;background:#0b2a36cc;color:#fff;border:1px solid #96bdc4;border-radius:12px;opacity:.78}
#viewer.controls-hidden #showControls{display:block}
#viewer #position{background:#204a57;padding:5px 10px;border-radius:15px;white-space:nowrap;font-size:14px}
#viewer:fullscreen{width:100vw;height:100vh;margin:0}
#viewer:fullscreen #frame{width:100%;height:100%;min-height:0}
#viewer:fullscreen>.sub{display:none}
#viewer:fullscreen .viewerbar{flex:none}
#viewer:not(:fullscreen) .viewerbar{min-height:56px}
#viewer:not(:fullscreen).controls-hidden #frame{height:calc(76vh + 56px)}
@media(max-width:650px){#viewer:not(:fullscreen).controls-hidden #frame{height:calc(60vh + 56px)}}

/* v3.2 iframe scaling: zoom applies to the embedded browsing context, without editing products. */
#viewer #frame{position:absolute;inset:0;display:block;min-height:0;max-width:none;transform-origin:top left}
#viewer{min-height:76vh}
#viewer:not(:fullscreen){height:76vh}
#viewer:fullscreen{height:100vh}
#viewer .viewerbar{position:absolute;top:0;left:0;right:0;z-index:5}
#viewer .sub{display:none}
#viewer .viewerbar + #showControls{z-index:6}
#viewer:not(:fullscreen).controls-hidden #frame{height:auto}
#viewer:fullscreen #frame{flex:none}
.playlistrow label{min-width:94px;width:126px;font-size:13px}
.playlistrow input{width:100%}
@media(max-width:650px){#viewer:not(:fullscreen){height:60vh;min-height:360px}}
/* HSEArabia TV Hub v3.3 - Connection instructions */

.mode-description {
    background-color: #eaf8f4 !important;
    color: #173b46 !important;
    padding: 15px 18px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid #b7ddd4;
}

/* Connection mode cards */

.connection-card {
    color: #173b46 !important;
}

.connection-card h3,
.connection-card p {
    color: #173b46 !important;
}

.connection-card.active {
    background-color: #eaf8f4 !important;
    border-color: #168c7a !important;
}