*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Fira Code',monospace;background:#000000;color:#00ff41;height:100vh;width:100vw;overflow:hidden}
h1, h2, h3, h4, h5, h6 {color: revert;font-family:"Electrolize",sans-serif} 
a{cursor: pointer;user-select:none;text-decoration:none;color:#00ff41;}
#app{position:relative;display:flex;flex-direction:column;background:#000000;width:100% !important;max-width:100%;height:100vh;padding:6px 8px 46px;margin-bottom:0px;z-index:1;}
.container{display:flex;flex:1;min-height:0;gap:6px;overflow:hidden}
.centercolumn{flex:1;display:flex;flex-direction:column;min-width:0}
.rightcolumn{display:flex;flex-direction:column;width:280px;gap:8px;overflow-y:auto;flex-shrink:0}
.leftcolumn{display:flex;flex-direction:column;width:280px;gap:8px;overflow-y:auto;flex-shrink:0}
.centerconsole{flex:1;display:flex;flex-direction:column;background:#000;border:1px solid #02ff41;border-radius:2px 2px 0 0;overflow:hidden;min-height:0;box-shadow:0 0 30px rgba(0,0,0,.8),inset 0 0 15px rgba(0,0,0,.3)}
.consoleheader{display:flex;background:#020c02;align-items:center;padding:6px 10px;gap:6px;border-bottom:1px solid #012309;flex-shrink:0}
.consoleheader .consoletext{flex:1;font-size:10px;text-align:left;color:#444}
.consoleheader .consolesign{display:flex;align-items:center;font-size:9px;color:#00aa2a;gap:4px}
.panel{background:#080808;border:1px solid #008d23;border-radius:2px;overflow:hidden;transition:border-color .5s,box-shadow .5s}
.paneltitle{padding:5px 9px;font-family:"Electrolize", sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;color:#00cc41;background:#020c02;border-bottom:1px solid #012309;display:flex;align-items:center;gap:5px;text-transform:uppercase}
.panelbody{padding:7px 9px;font-size:10px}
.dotblink{width:6px;height:6px;background:#00ff41;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.dot{width:10px;height:10px;border-radius:50%}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
.bottomrow{display:flex;align-items:center;flex-shrink:0}
.bottompanel1{width:stretch;align-content:center;height:180px;background:#0a0a0a;border:1px solid #008d23;padding:10px 14px;border-radius:0 0 0 2px}
.bottompanel2{width:stretch;align-content:center;height:180px;background:#0a0a0a;border:1px solid #008d23;padding:10px 14px;border-radius:0 0 2px 0}
.footer{display:flex;position:fixed;width:100% !important;max-width:100%;height:40px;bottom:0;left:0;right:0;background:#000600;font-size:13px;align-items:center;border-top:1px solid #282828;padding:0 6px;z-index:100;margin-bottom:0px;}
#footerleft {background:none;color:#00aa2a;font-family:"Electrolize",sans-serif;font-size:12px;font-weight:600;padding:3px 12px;margin-left:auto;border:1px solid rgba(0, 255, 65, 0.2);flex-shrink:0;}
#footerright {background:none;color:#00aa2a;font-family:"Electrolize",sans-serif;font-size:12px;font-weight:600;padding:3px 12px;margin-right:auto;border:1px solid rgba(0, 255, 65, 0.2);flex-shrink:0;}
::-webkit-scrollbar{width: 8px;}
::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #03b500;border-radius:5px;}
::-webkit-scrollbar-thumb{background:#037501;border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background: #03b500; }
dialog {top:20%;left:35%;border:none;border-radius:5px;padding:0;box-shadow:0 2px 4px rgba(67, 255, 100, 0.85);max-width:600px;width:100%;}
dialog::backdrop {background: rgba(0, 0, 0, 0.8);backdrop-filter: blur(4px);}
.bg-matrix {background-image: url('../img/binary.gif');background-repeat:repeat;background-color:rgba(0,0,0,0.8);background-blend-mode:color;width:100%;height:110vh;}
.modal-content {background:#000;color:#00ff41;font-size:13px;padding:25px;border:1px solid #008d23;}
.close-button {position:absolute;float:right;top:8px;right:12px;color: #00ff41;font-size:16px;font-weight:bold;cursor:pointer;}

@media(max-width:860px){
  .leftcol{display:none;position:fixed;top:0;right:0;bottom:40px;width:260px;z-index:50;background:#000000;border-left:1px solid #1a1a1a;padding:6px;box-shadow:-10px 0 30px rgba(0,0,0,.7)}
  .leftcol.open{display:flex}
  .bottomrow{flex-wrap:wrap}
  .consoleheader .consoleheader {display:none}
}
@media (max-width: 360px) {
    .leftcol {
        display: none;
    }
    .rightcol {
        display: none;
    }		
}