:root{font-family:system-ui,sans-serif;color:#18212e;background:#f5f7fa;font-size:15px}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:#fff;border-bottom:1px solid #e0e5ec}header span{margin-left:18px;color:#536174}nav,.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}main{max-width:1550px;margin:auto;padding:28px}h1{font-size:28px}h2{font-size:21px;overflow-wrap:anywhere}p{line-height:1.6}a{color:#215ccc}button,.button{display:inline-block;background:#215ccc;border:1px solid #215ccc;color:white;padding:10px 15px;border-radius:7px;text-decoration:none;cursor:pointer;font:inherit}.secondary{color:#215ccc;background:white;border-color:#c5cfdf}button:disabled{opacity:.5;cursor:wait}label{display:block;font-weight:600;margin:12px 0}input{display:block;width:100%;padding:11px;border:1px solid #bdc8d9;border-radius:6px;font:inherit;margin-top:6px}.layout{display:grid;grid-template-columns:350px 1fr;gap:24px}.panel,aside{background:white;border:1px solid #e0e5ec;border-radius:10px;padding:22px}.video-choice{display:block;width:100%;text-align:left;background:white;color:#18212e;border-color:#e0e5ec;margin:8px 0;font-size:13px;overflow-wrap:anywhere}.video-choice.active{border-color:#215ccc;background:#eef4ff}.video-choice small{display:block;color:#526174;margin-top:6px}#videos{max-height:550px;overflow:auto}video{width:100%;max-height:470px;background:#0c1015;border-radius:7px;margin-bottom:18px}.hidden{display:none!important}.message{padding:12px 0;color:#334964;min-height:40px}.message.error{color:#9b1c1c}.desktop-heading{display:flex;justify-content:space-between;gap:14px;align-items:center}#desktop-panel{margin-top:24px}iframe{width:100%;height:850px;border:1px solid #d6dfeb;background:#202020}.login{max-width:430px;margin:12vh auto;padding:30px;background:white;border:1px solid #e0e5ec;border-radius:10px}.login button{width:100%;margin-top:16px}@media(max-width:800px){header{flex-wrap:wrap;gap:12px}.layout{grid-template-columns:1fr}main{padding:16px}#videos{max-height:250px}iframe{height:650px}}
body:has(#desktop){height:100vh;display:flex;flex-direction:column}body:has(#desktop) header{padding:8px 14px;gap:12px}body:has(#desktop) nav{gap:8px}body:has(#desktop) button{padding:6px 9px;font-size:13px}#desktop{flex:1;width:100%;height:0;min-height:500px;border:0}#message{padding:6px 14px}#message:empty{display:none}[hidden]{display:none!important}