.header-left,.header-right{gap:10px}#loginForm,#profileDropdown{position:absolute;background:#111;display:none;box-shadow:0 0 10px rgba(255,255,255,.2)}#profileDropdown .profile-pic-large,.profile-pic{background:conic-gradient(#f58529,#dd2a7b,#8134af,#f58529)}#loginForm button,#loginForm h3,#loginForm input,#togglePassword,body{font-family:monospace}#sidebar a,nav a{text-decoration:none}body{margin:0;height:100vh;background:#0a0a0a;color:#d3e3fd;display:flex;flex-direction:column}.header-left,header{display:flex;align-items:center}header{height:50px;background:#162c46;justify-content:space-between;padding:0 15px;border-bottom:1px solid #333;position:relative;z-index:200}#menuToggle,.header-right{display:flex;align-items:center;cursor:pointer}.header-left .title{margin:0;font-size:24px;line-height:1}i.menu{display:inline-block;width:24px;height:24px;background:url("data:image/svg+xml;charset=UTF-8,%3Csvg id='icon-home' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cpath d='M479.18,91.897H32.821C14.69,91.897,0,77.207,0,59.077s14.69-32.821,32.821-32.821H479.18c18.13,0,32.82,14.69,32.82,32.821S497.31,91.897,479.18,91.897z' fill='%23d3e3fd'/%3E%3Cpath d='M295.385,288.821H32.821C14.69,288.821,0,274.13,0,256s14.69-32.821,32.821-32.821h262.564c18.13,0,32.821,14.69,32.821,32.821S313.515,288.821,295.385,288.821z' fill='%23d3e3fd'/%3E%3C/g%3E%3Cpath d='M479.18,288.821h-52.513c-18.13,0-32.821-14.69-32.821-32.821s14.69-32.821,32.821-32.821h52.513c18.13,0,32.82,14.69,32.82,32.821S497.31,288.821,479.18,288.821z' fill='%237cacf8'/%3E%3Cpath d='M479.18,485.744H32.821C14.69,485.744,0,471.053,0,452.923c0-18.13,14.69-32.821,32.821-32.821H479.18c18.13,0,32.82,14.69,32.82,32.821C512,471.053,497.31,485.744,479.18,485.744z' fill='%23d3e3fd'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}#menuToggle{background:0 0;border:none;padding:0}.header-right span{display:inline-block;line-height:1}.profile-pic{width:30px;height:30px;border-radius:50%;padding:1px;display:inline-block}.lock,.unlock{background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJIYXhvckFJX0xvY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCiAgICAgICAgICAgIDwhLS0gQmFja2dyb3VuZCBQZXJzZWdpIC0tPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idHJhbnNwYXJlbnQiIHJ4PSIyMCIgLz4KCiAgICAgICAgICAgIDwhLS0gSGFuZGxlIEdlbWJvayAtLT4KICAgICAgICAgICAgPHBhdGggZD0iTTY2LjEsMTI4LjFWNTkuOWMwLTE4LjQsMTQuOS0zMy4zLDMzLjMtMzMuM3MzMy4zLDE0LjksMzMuMywzMy4zdjM2LjgiIHN0eWxlPSJmaWxsOm5vbmU7IHN0cm9rZTp3aGl0ZXNtb2tlOyBzdHJva2Utd2lkdGg6MTQ7IHN0cm9rZS1saW5lY2FwOnJvdW5kOyBzdHJva2UtbGluZWpvaW46cm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OjEwOyIgLz4KCiAgICAgICAgICAgIDwhLS0gQm9keSBHZW1ib2sgLS0+CiAgICAgICAgICAgIDxnIGlkPSJsb2NrLWJvZHkiIHN0eWxlPSJ0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTIycHgpOyB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlLWluLW91dDsiPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iNTkiIHk9IjExNy41IiB3aWR0aD0iMTQuNSIgaGVpZ2h0PSI0LjciIHN0eWxlPSJvcGFjaXR5OjAuNjsgZmlsbDpncmV5OyIgLz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00OS44LDE3NS43YzAsMy45LDMuMSw3LDcsN0gxNDJjMy44LDAsNy0zLjEsNy03di00OC4zYzAtMy44LTMuMi03LTctN0g1Ni44Yy0zLjksMC03LDMuMi03LDdWMTc1Ljd6IiBzdHlsZT0iZmlsbDpoc2woMjE3LCA4MyUsIDUwJSk7IiAvPgoKICAgICAgICAgICAgICAgIDwhLS0gTHViYW5nIEt1bmNpIC8gSWtvbiBKYXJpbmdhbiAtLT4KICAgICAgICAgICAgICAgIDxnIGlkPSJuZXR3b3JrIiBzdHlsZT0idHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApOyB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlLWluLW91dDsiPgogICAgICAgICAgICAgICAgICAgIDxsaW5lIHgxPSIxMTEuNCIgeTE9IjE0MS42IiB4Mj0iMTExLjQiIHkyPSIxNjIuMSIgc3R5bGU9ImZpbGw6bm9uZTsgc3Ryb2tlOndoaXRlOyBzdHJva2Utd2lkdGg6Nzsgc3Ryb2tlLW1pdGVybGltaXQ6MTA7IiAvPgogICAgICAgICAgICAgICAgICAgIDxsaW5lIHgxPSI5OS40IiB5MT0iMTQ3LjQiIHgyPSI5OS40IiB5Mj0iMTYyLjEiIHN0eWxlPSJmaWxsOm5vbmU7IHN0cm9rZTp3aGl0ZTsgc3Ryb2tlLXdpZHRoOjc7IHN0cm9rZS1taXRlcmxpbWl0OjEwOyIgLz4KICAgICAgICAgICAgICAgICAgICA8bGluZSB4MT0iODcuNCIgeTE9IjE1MS44IiB4Mj0iODcuNCIgeTI9IjE2Mi4xIiBzdHlsZT0iZmlsbDpub25lOyBzdHJva2U6d2hpdGU7IHN0cm9rZS13aWR0aDo3OyBzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIC8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L3N2Zz4=')}.profile-pic img{width:100%;height:100%;border-radius:50%;display:block;object-fit:cover}#app{display:grid;grid-template-columns:200px 1fr;height:calc(100vh - 50px);transition:grid-template-columns .3s}#app.full{grid-template-columns:0px 1fr}nav{background:#111;padding:20px;border-right:1px solid #333;overflow:hidden;transition:width .3s,padding .3s}#app.full nav{width:0;padding:0}nav a{display:block;margin:10px 0;color:#0f0;pointer-events:none;opacity:.4;white-space:nowrap}nav a.active{pointer-events:auto;opacity:1}iframe{width:100%;height:100%;border:none;background:#000}#loginForm{top:50%;left:50%;transform:translate(-50%,-50%);padding:25px 30px;border:1px solid #ccc;z-index:500;text-align:center;border-radius:8px}#loginForm h3{font-size:20px;margin:10px 0 15px;color:#ccc}#loginForm input{display:block;margin:10px auto;padding:8px;width:220px;background:#000;border:1px solid #333;color:#fff;border-radius:4px}#loginForm button{background:rgb(237 237 237);border:none;width:100%;padding:8px 15px;cursor:pointer;font-weight:700;margin-top:10px;border-radius:4px;transition:background .2s}#loginForm button:hover,#profileDropdown button.logout:hover{background:#d0d0d0}#loginError{color:red;display:none;margin-top:10px;font-size:.9em}.password-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.password-wrapper input{width:100%;padding-right:50px}#togglePassword{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:rgb(0 255 145);font-size:.9em;user-select:none}#togglePassword:hover{text-decoration:underline}.login-footer{margin-top:15px;font-size:12px;color:#ccc;text-align:center}.login-footer strong{color:#ccc}.lock{display:inline-block;width:70px;height:70px;margin-bottom:8px}.unlock{width:60px;height:60px;margin:0 auto 15px}#profileDropdown{top:50px;right:17px;border-radius:4px;border:2px solid #ccc;padding:15px;width:250px;z-index:300}#profileDropdown header{display:flex;justify-content:space-between;align-items:center;background:0 0;border-bottom:1px solid grey;padding-bottom:5px;margin-bottom:10px}#profileDropdown header span{font-size:12px;color:#d3e3fd}#profileDropdown header button{background:0 0;border:none;color:rgb(234 67 53);cursor:pointer;font-size:16px}#profileDropdown .profile-pic-large{width:60px;height:60px;border-radius:50%;display:block;margin:10px auto;object-fit:cover}#profileDropdown p{text-align:center;margin:10px 0}#profileDropdown button.logout{display:block;margin:0 auto;background:rgb(237 237 237);color:#000;border:none;border-radius:4px;padding:5px 15px;cursor:pointer;font-family:monospace}@media (max-width:768px){#app{grid-template-columns:1fr}#sidebar{position:absolute;top:50px;left:0;bottom:0;width:200px;padding:20px;background:#111;border-right:1px solid #333;transform:translateX(-100%);transition:transform .3s;z-index:400}#app.showSidebar #sidebar{transform:translateX(0)}#mainFrame{position:relative;z-index:100}}#sidebar a{display:block;padding:10px 15px;color:#fff;transition:background .3s,color .3s}#sidebar a.active{background-color:orange;color:#000}