:root{
 --orange:#f49a00;
 --orange2:#f47718;
 --purple:#9f59c5;
 --pink:#b8569c;
 --blue:#6279d9;
 --cyan:#49aaff;
 --yellow:#ffc43d;
 --green:#48ff5b;
 --red:#d74e36;
 --black:#020203;
 --line:#79450c;
}

*{
 box-sizing:border-box;
}

html,body{
 margin:0;
 width:100%;
 height:100%;
 background:#000;
 color:#ddd;
 font-family:Arial,Helvetica,sans-serif;
}

body{
 overflow:auto;
}

.space{
 position:fixed;
 inset:0;
 overflow:hidden;
 pointer-events:none;
}

.stars{
 position:absolute;
 inset:-300px;
}

.stars1{
 background:
 radial-gradient(circle,#fff 0 1px,transparent 1.5px);
 background-size:135px 135px;
 opacity:.17;
 animation:stars1 30s linear infinite;
}

.stars2{
 background:
 radial-gradient(circle,#428eff 0 1px,transparent 2px);
 background-size:215px 215px;
 opacity:.16;
 animation:stars2 45s linear infinite;
}

@keyframes stars1{
 to{transform:translateY(300px)}
}

@keyframes stars2{
 to{transform:translateX(300px)}
}

.scanlines{
 position:absolute;
 inset:0;
 background:repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent 3px,
 rgba(255,255,255,.018) 4px
 );
}

.lcars{
 position:relative;
 width:100%;
 min-width:1180px;
 min-height:100vh;
 padding:10px;
 background:
 radial-gradient(circle at 52% 35%,rgba(18,42,76,.20),transparent 28%);
}

.topbar{
 height:62px;
 display:flex;
 align-items:stretch;
 gap:8px;
}

.top-left{
 width:245px;
 display:flex;
}

.top-purple{
 width:115px;
 border-radius:38px 0 0 0;
 background:linear-gradient(180deg,#ad61cd,#9851b9);
 color:#080808;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 font-weight:900;
}

.top-orange{
 flex:1;
 margin-left:8px;
 background:linear-gradient(180deg,#ffa413,#ef8311);
 border-radius:0 32px 0 0;
}

.main-title{
 min-width:370px;
 display:flex;
 align-items:center;
 color:var(--yellow);
 font-size:31px;
 font-weight:900;
 letter-spacing:1px;
}

.top-code{
 width:250px;
 border-radius:0 30px 30px 0;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#eee;
 font-weight:bold;
}

.top-session{
 flex:1;
 min-width:340px;
 background:linear-gradient(90deg,#ff9d14,#ef8213);
 color:#111;
 border-radius:28px;
 display:flex;
 align-items:center;
 justify-content:space-around;
 font-weight:900;
}

.clock-box{
 width:120px;
 text-align:center;
 color:var(--yellow);
 display:flex;
 flex-direction:column;
 justify-content:center;
}

.clock-box strong{
 font-size:17px;
}

.main-layout{
 display:grid;
 grid-template-columns:100px 1fr;
 gap:10px;
}

.left-rail{
 padding-top:8px;
}

.rail-block{
 height:48px;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#070707;
 font-weight:bold;
 font-size:12px;
 border-bottom:4px solid #050505;
}

.rail-block.tall{
 height:92px;
 border-radius:30px 0 0 0;
}

.rail-block.big-number{
 height:86px;
}

.bottom-round{
 height:62px;
 border-radius:0 0 0 20px;
}

.purple{background:#a35fc6;}
.pink{background:#bd64a8;}
.blue{background:#7587df;}
.yellow{background:#ffbe28;}

.access-frame{
 min-height:645px;
 margin-top:8px;
 border:4px solid #b56810;
 border-radius:30px;
 display:grid;
 grid-template-columns:200px 1fr 310px;
 gap:12px;
 padding:18px;
 background:rgba(0,0,0,.92);
 box-shadow:
 inset 0 0 0 2px #311907,
 0 0 22px rgba(245,137,0,.12);
}

.access-node,
.system-access,
.security-box,
.monitor-box{
 border:1px solid #8b4e0c;
 border-radius:17px;
 background:rgba(0,0,0,.82);
}

.access-node{
 padding:15px;
}

h3,h4{
 margin:0;
 color:#f0a31c;
}

.access-node h3,
.system-access>h3{
 padding-bottom:12px;
 border-bottom:1px solid #3b250d;
}

.node-row{
 padding:18px 0;
 border-bottom:1px solid #3c260e;
 color:#bfc1c8;
 font-size:12px;
 line-height:1.45;
}

.node-row strong{
 display:block;
 color:#ddd;
}

.node-row span{
 color:#ffad18;
 display:block;
}

.cyan{
 color:var(--cyan)!important;
}

.green{
 color:var(--green)!important;
}

.orange-text{
 color:#ff9a0a!important;
}

.purple-text{
 color:#af6ddb!important;
}

.mini-data{
 margin-top:20px;
 height:150px;
 background:
 repeating-linear-gradient(
 0deg,
 rgba(76,144,255,.35) 0 2px,
 transparent 2px 9px
 );
 overflow:hidden;
 position:relative;
}

.mini-data::after{
 content:"";
 position:absolute;
 left:0;
 top:0;
 height:3px;
 width:45%;
 background:#ff8f00;
 box-shadow:0 20px #7948cb,0 40px #2499ff,0 60px #ff8f00,0 80px #7948cb,0 100px #2499ff;
 animation:dataMove 2s linear infinite alternate;
}

@keyframes dataMove{
 to{width:90%}
}

.login-core{
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 min-width:520px;
}

.federation-title{
 position:absolute;
 top:0;
 color:#aa66cf;
 letter-spacing:7px;
 font-size:14px;
}

.warp-lines{
 position:absolute;
 inset:45px 0 160px;
 overflow:hidden;
}

.warp-lines span{
 position:absolute;
 left:50%;
 top:50%;
 width:2px;
 height:500px;
 background:linear-gradient(#2387ff,transparent);
 transform-origin:top;
 opacity:.35;
 animation:warp 2.5s linear infinite;
}

.warp-lines span:nth-child(1){transform:rotate(65deg)}
.warp-lines span:nth-child(2){transform:rotate(82deg)}
.warp-lines span:nth-child(3){transform:rotate(98deg)}
.warp-lines span:nth-child(4){transform:rotate(115deg)}
.warp-lines span:nth-child(5){transform:rotate(245deg)}
.warp-lines span:nth-child(6){transform:rotate(262deg)}
.warp-lines span:nth-child(7){transform:rotate(278deg)}
.warp-lines span:nth-child(8){transform:rotate(295deg)}

@keyframes warp{
 0%{opacity:.08;height:80px}
 50%{opacity:.7}
 100%{opacity:0;height:600px}
}

.emblem{
 position:relative;
 width:210px;
 height:210px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-top:20px;
}

.ring{
 position:absolute;
 border-radius:50%;
}

.ring1{
 width:200px;
 height:200px;
 border:5px dashed #d46609;
 animation:spin 15s linear infinite;
}

.ring2{
 width:166px;
 height:166px;
 border:4px solid #ff9d00;
 animation:spinReverse 10s linear infinite;
}

.ring3{
 width:135px;
 height:135px;
 border:3px solid #ffc929;
 box-shadow:0 0 20px rgba(255,157,0,.28);
}

@keyframes spin{
 to{transform:rotate(360deg)}
}

@keyframes spinReverse{
 to{transform:rotate(-360deg)}
}

.star-core{
 width:116px;
 height:116px;
 border-radius:50%;
 background:radial-gradient(circle,#172a68,#030713 72%);
 position:relative;
 box-shadow:inset 0 0 25px #245cd4;
}

.star-core i{
 position:absolute;
 color:white;
 font-style:normal;
 text-shadow:0 0 9px white;
 animation:twinkle 1.4s infinite alternate;
}

.star-core i:nth-child(1){left:50px;top:24px;font-size:28px}
.star-core i:nth-child(2){left:26px;top:56px}
.star-core i:nth-child(3){right:22px;top:62px;font-size:18px}
.star-core i:nth-child(4){left:65px;top:80px}
.star-core i:nth-child(5){right:31px;top:31px}

@keyframes twinkle{
 to{opacity:.25;transform:scale(.7)}
}

.login-core h1{
 color:#f0a724;
 letter-spacing:4px;
 font-size:37px;
 margin:2px 0 2px;
}

.login-subtitle{
 color:#8b7dd0;
 font-size:16px;
 margin-bottom:18px;
}

#loginForm{
 width:72%;
 min-width:500px;
}

.field{
 height:62px;
 border:1px solid;
 border-radius:19px;
 display:grid;
 grid-template-columns:118px 1fr;
 align-items:center;
 margin:12px 0;
 overflow:hidden;
 background:#030304;
}

.field-user{
 border-color:#a85f07;
}

.field-pass{
 border-color:#9253a6;
}

.field-label{
 padding-left:15px;
 color:#f1a42c;
 font-weight:900;
 font-size:14px;
}

.field-pass .field-label{
 color:#b669cf;
}

.field-label small{
 display:block;
 font-size:8px;
 margin-top:5px;
}

input{
 height:100%;
 border:0;
 border-left:1px solid #777;
 border-radius:22px;
 background:#050506;
 color:#fff;
 padding:0 22px;
 outline:none;
 font-size:17px;
 letter-spacing:1px;
}

input:focus{
 box-shadow:inset 0 0 20px rgba(255,154,0,.14);
}

.login-controls{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:18px;
}

#loginButton{
 width:310px;
 height:52px;
 border:0;
 border-radius:28px;
 background:linear-gradient(90deg,#ff9e00,#f48c00);
 font-size:20px;
 font-weight:900;
 cursor:pointer;
 position:relative;
 overflow:hidden;
}

#loginButton::after{
 content:"";
 position:absolute;
 top:0;
 bottom:0;
 width:65px;
 left:-100px;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
 transform:skewX(-20deg);
 animation:buttonScan 3s infinite;
}

@keyframes buttonScan{
 40%,100%{left:380px}
}

#loginButton:hover{
 transform:scale(1.025);
 box-shadow:0 0 22px rgba(255,150,0,.5);
}

.clear-btn{
 background:none;
 color:#9d65bc;
 border:0;
 cursor:pointer;
 font-size:10px;
}

.authorization{
 display:flex;
 align-items:center;
 gap:12px;
 margin-top:6px;
 color:#42ff50;
 font-size:11px;
}

.auth-track{
 width:95px;
 height:13px;
 border:1px solid #114f1a;
 padding:2px;
}

.auth-track i{
 display:block;
 width:12px;
 height:7px;
 background:#45ff5b;
 animation:authMove 1.7s linear infinite alternate;
}

@keyframes authMove{
 to{margin-left:74px}
}

.system-access{
 padding:16px;
}

.sys-row{
 padding:18px 0;
 border-bottom:1px solid #42270c;
 font-size:12px;
}

.sys-row>div:first-child{
 display:flex;
 justify-content:space-between;
}

.segments{
 display:flex;
 gap:4px;
 margin-top:12px;
}

.segments i{
 width:18px;
 height:7px;
 animation:segmentPulse 1.4s infinite alternate;
}

.orange-segments i{background:#db8800}
.purple-segments i{background:#7c4aa7}
.blue-segments i{background:#327fc8}

.segments i:nth-child(2n){animation-delay:.2s}
.segments i:nth-child(3n){animation-delay:.4s}

@keyframes segmentPulse{
 to{opacity:.25}
}

.security-box{
 margin-top:14px;
 padding:13px;
 height:150px;
}

#securityCanvas{
 width:100%;
 height:90px;
 margin-top:8px;
}

.monitor-box{
 margin-top:10px;
 padding:12px;
}

.monitor-bars{
 height:70px;
 display:flex;
 justify-content:space-around;
 align-items:end;
}

.monitor-bars div{
 height:100%;
 display:flex;
 flex-direction:column;
 justify-content:flex-end;
 align-items:center;
}

.monitor-bars span{
 display:block;
 width:20px;
 height:42px;
 background:repeating-linear-gradient(
 to top,
 #8558c9 0 4px,
 transparent 4px 7px
 );
 animation:monitor 1s infinite alternate;
}

.monitor-bars div:nth-child(2) span{background:repeating-linear-gradient(to top,#2b89e2 0 4px,transparent 4px 7px)}
.monitor-bars div:nth-child(4) span,
.monitor-bars div:nth-child(5) span{background:repeating-linear-gradient(to top,#ed8c00 0 4px,transparent 4px 7px)}

.monitor-bars div:nth-child(2n) span{animation-delay:.3s}

@keyframes monitor{
 to{height:65px}
}

.bottom-dashboard{
 margin:10px 0;
 display:grid;
 grid-template-columns:1.4fr .55fr 1.3fr 1.2fr .8fr;
 gap:10px;
 min-height:195px;
}

.bottom-dashboard>section{
 border:1px solid #75450e;
 border-radius:18px;
 padding:13px;
 background:#020203;
}

.diagnostics{
 position:relative;
}

.ship{
 height:120px;
 position:relative;
}

.ship-body,
.ship-disc,
.ship-line{
 position:absolute;
 border:1px solid #7653aa;
}

.ship-body{
 width:165px;
 height:35px;
 left:20px;
 top:42px;
 border-radius:50%;
}

.ship-disc{
 width:90px;
 height:75px;
 left:65px;
 top:22px;
 border-radius:50%;
}

.ship-line{
 width:220px;
 height:1px;
 left:0;
 top:60px;
}

.diag-code{
 position:absolute;
 right:10px;
 bottom:18px;
 color:#8d62bd;
 font-size:10px;
 line-height:3;
}

.core-stats>div{
 margin-bottom:16px;
}

.core-stats small{
 display:block;
}

.core-stats strong{
 display:block;
 color:#ff9f0b;
 font-size:21px;
 margin:4px 0;
}

.tiny-meter{
 display:flex;
 gap:3px;
}

.tiny-meter i{
 width:12px;
 height:6px;
 background:#e88c00;
 animation:segmentPulse 1s infinite alternate;
}

.purple-meter i{background:#865ac0}
.blue-meter i{background:#4584d4}

.system-ready>strong{
 display:block;
 color:#4e9bff;
 font-size:20px;
 margin:12px 0;
}

.system-ready>span{
 color:#4fff51;
}

.ready-grid{
 margin-top:15px;
 display:flex;
 justify-content:space-around;
 color:#e79d12;
 font-size:10px;
}

.ready-grid i{
 font-style:normal;
}

.active-log #logEntries{
 margin-top:10px;
 font-size:10px;
 line-height:2.2;
}

.log-line{
 display:grid;
 grid-template-columns:65px 1fr 80px;
}

.log-time{
 color:#f2a00e;
}

.log-status{
 color:#42a8ff;
}

.radar-ring{
 width:120px;
 height:120px;
 margin:10px auto 0;
 border:1px solid #8f4c08;
 border-radius:50%;
 position:relative;
 background:
 repeating-radial-gradient(circle,transparent 0 14px,#55300b 15px,transparent 16px);
 overflow:hidden;
}

.radar-sweep{
 position:absolute;
 left:50%;
 top:50%;
 width:50%;
 height:1px;
 background:#ff9500;
 transform-origin:left;
 animation:radar 3s linear infinite;
}

@keyframes radar{
 to{transform:rotate(360deg)}
}

.delta{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#d76346;
 font-size:75px;
 font-weight:100;
}

footer{
 height:52px;
 display:flex;
 align-items:stretch;
 gap:5px;
}

.footer-code{
 width:225px;
 color:#a25bc2;
 display:flex;
 align-items:center;
 justify-content:center;
}

.footer-orange{
 width:275px;
 background:#ec8313;
 border-radius:28px 0 0 28px;
}

.footer-red{
 width:130px;
 background:#d65632;
}

.footer-title{
 min-width:250px;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#f3a11c;
 font-weight:900;
 font-size:19px;
}

.footer-purple{
 flex:1;
 background:#8558c5;
}

.footer-blue{
 width:220px;
 background:#7667c8;
}

.footer-end{
 width:110px;
 background:#a15dc5;
 color:#111;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:bold;
 border-radius:0 25px 25px 0;
}

@media(max-width:1300px){
 .access-frame{
   grid-template-columns:180px 1fr 260px;
 }
 .top-code{
   display:none;
 }
}



/* ==================================================
   LCARS BOOT SCREEN
================================================== */

.hidden{
 display:none!important;
}

.boot-screen{
 position:fixed;
 inset:0;
 z-index:100;
 background:
 radial-gradient(circle at center,#071527 0,#020306 42%,#000 78%);
 color:#ddd;
 padding:16px;
 overflow:hidden;
}

.boot-stars{
 position:absolute;
 inset:-300px;
 background:
 radial-gradient(circle,#fff 0 1px,transparent 1.5px);
 background-size:120px 120px;
 opacity:.18;
 animation:bootStars 13s linear infinite;
}

@keyframes bootStars{
 to{transform:translateY(300px)}
}

.boot-scan{
 position:absolute;
 left:0;
 right:0;
 height:2px;
 background:linear-gradient(
 90deg,
 transparent,
 #2e90ff,
 #fff,
 #2e90ff,
 transparent
 );
 box-shadow:0 0 20px #2e90ff;
 opacity:.55;
 animation:bootScan 3s linear infinite;
}

@keyframes bootScan{
 from{top:-5%}
 to{top:105%}
}

.boot-header{
 position:relative;
 z-index:2;
 height:60px;
 display:flex;
 gap:6px;
}

.boot-header-left{
 width:115px;
 background:#a660c9;
 color:#080808;
 border-radius:30px 0 0 0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
 font-size:20px;
}

.boot-header-orange{
 width:190px;
 background:#f18b0d;
}

.boot-header-title{
 flex:1;
 color:#ffc23e;
 display:flex;
 align-items:center;
 padding-left:24px;
 font-size:28px;
 font-weight:900;
 letter-spacing:3px;
}

.boot-header-purple{
 width:240px;
 background:#9058bc;
 border-radius:0 30px 0 0;
}

.boot-layout{
 position:relative;
 z-index:2;
 height:calc(100vh - 92px);
 display:grid;
 grid-template-columns:145px 1fr 280px;
 gap:12px;
}

.boot-left{
 padding-top:14px;
 display:flex;
 flex-direction:column;
}

.boot-left div{
 flex:1;
 min-height:55px;
 background:#a85fc9;
 color:#080808;
 border-bottom:4px solid #000;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
}

.boot-left div:nth-child(3),
.boot-left div:nth-child(4){
 background:#f28e0e;
}

.boot-left div:nth-child(5),
.boot-left div:nth-child(6){
 background:#7181dc;
}

.boot-left div:first-child{
 border-radius:30px 0 0 0;
}

.boot-left div:last-child{
 border-radius:0 0 0 30px;
}

.boot-center{
 border:2px solid #8d5310;
 border-radius:24px;
 margin-top:14px;
 padding:20px 40px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 background:rgba(0,0,0,.78);
 box-shadow:inset 0 0 60px rgba(20,93,173,.10);
}

.boot-core-animation{
 width:280px;
 height:280px;
 position:relative;
 display:flex;
 align-items:center;
 justify-content:center;
}

.boot-ring{
 position:absolute;
 border-radius:50%;
}

.br1{
 width:270px;
 height:270px;
 border:4px dashed #f28d0d;
 animation:spin 9s linear infinite;
}

.br2{
 width:225px;
 height:225px;
 border:3px solid #9356c2;
 border-left-color:transparent;
 border-right-color:transparent;
 animation:spinReverse 6s linear infinite;
}

.br3{
 width:178px;
 height:178px;
 border:5px dotted #428df2;
 animation:spin 4s linear infinite;
}

.br4{
 width:130px;
 height:130px;
 border:4px solid #ffc03c;
 box-shadow:
 0 0 30px rgba(255,165,0,.35),
 inset 0 0 25px rgba(36,100,220,.25);
 animation:bootPulse 1.4s infinite alternate;
}

@keyframes bootPulse{
 to{
  transform:scale(1.08);
  box-shadow:
   0 0 55px rgba(255,165,0,.75),
   inset 0 0 35px rgba(36,100,220,.5);
 }
}

.boot-core-text{
 color:#ffc03a;
 font-size:24px;
 font-weight:900;
 text-align:center;
 text-shadow:0 0 10px rgba(255,160,0,.7);
}

.boot-core-text small{
 display:block;
 color:#648cff;
 letter-spacing:5px;
}

.boot-center h1{
 margin:8px 0;
 color:#ffc03a;
 letter-spacing:4px;
 font-size:29px;
}

#bootStatus{
 color:#51a7ff;
 letter-spacing:2px;
 font-size:13px;
 min-height:20px;
}

.boot-progress{
 width:min(700px,80%);
 height:22px;
 margin-top:26px;
 border:1px solid #81500e;
 border-radius:12px;
 padding:3px;
 overflow:hidden;
}

#bootProgressBar{
 width:0%;
 height:100%;
 border-radius:9px;
 background:
 linear-gradient(
 90deg,
 #7749af,
 #2d84df,
 #f39a0c
 );
 box-shadow:0 0 18px #387ff0;
 transition:width .25s linear;
}

.boot-progress-info{
 width:min(700px,80%);
 display:flex;
 justify-content:space-between;
 color:#9a66c0;
 font-size:12px;
 margin-top:7px;
}

#bootPercent{
 color:#ffc03a;
}

.boot-modules{
 width:min(760px,88%);
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:8px;
 margin-top:24px;
}

.boot-modules div{
 border:1px solid #4b3113;
 padding:10px;
 border-radius:12px;
 display:flex;
 justify-content:space-between;
 color:#815f42;
 font-size:11px;
}

.boot-modules div.active{
 border-color:#f0920c;
 box-shadow:0 0 12px rgba(241,145,12,.25);
 color:#ffc03a;
}

.boot-modules div.online{
 border-color:#236e36;
 color:#4bff63;
}

.boot-modules strong{
 color:inherit;
}

.boot-right{
 margin-top:14px;
 border:1px solid #8d5310;
 border-radius:20px;
 padding:18px;
 background:#020203;
}

.boot-right h3{
 color:#f2a21e;
 margin-bottom:24px;
}

.boot-data-line{
 padding:18px 0;
 border-bottom:1px solid #40270d;
 color:#9b7657;
 font-size:12px;
 display:flex;
 justify-content:space-between;
}

.boot-data-line strong{
 color:#47a5ff;
}

.boot-equalizer{
 height:180px;
 margin-top:30px;
 display:flex;
 align-items:center;
 justify-content:space-around;
}

.boot-equalizer i{
 width:10px;
 height:40px;
 background:
 repeating-linear-gradient(
 to top,
 #8052bd 0 5px,
 transparent 5px 9px
 );
 animation:bootEq .7s infinite alternate;
}

.boot-equalizer i:nth-child(2n){
 background:
 repeating-linear-gradient(
 to top,
 #3488e5 0 5px,
 transparent 5px 9px
 );
 animation-delay:.15s;
}

.boot-equalizer i:nth-child(3n){
 background:
 repeating-linear-gradient(
 to top,
 #ec8d0a 0 5px,
 transparent 5px 9px
 );
 animation-delay:.3s;
}

@keyframes bootEq{
 to{height:155px}
}


/* ==================================================
   COMPUTER CORE SCREEN
================================================== */

.computer-core-screen{
 position:fixed;
 inset:0;
 z-index:90;
 background:
 radial-gradient(circle at 50% 30%,#071629 0,#020306 35%,#000 80%);
 color:#ddd;
 padding:14px;
 overflow:auto;
}

.core-header{
 height:65px;
 display:flex;
 gap:7px;
}

.core-elbow{
 width:130px;
 background:#a35fc8;
 color:#080808;
 border-radius:34px 0 0 0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
}

.core-orange{
 width:190px;
 background:#f28e0e;
}

.core-title{
 flex:1;
 display:flex;
 align-items:center;
 padding-left:25px;
 color:#ffc03a;
 font-size:32px;
 font-weight:900;
 letter-spacing:5px;
}

.core-purple{
 width:260px;
 background:#9156bb;
}

.core-clock{
 width:150px;
 border-radius:0 32px 0 0;
 background:#f28e0e;
 color:#080808;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
}

.core-body{
 min-height:calc(100vh - 100px);
 display:grid;
 grid-template-columns:170px 1fr 260px;
 gap:12px;
 margin-top:10px;
}

.core-menu{
 display:flex;
 flex-direction:column;
 gap:5px;
}

.core-menu button{
 flex:1;
 min-height:65px;
 border:0;
 color:#080808;
 text-align:right;
 padding-right:18px;
 font-weight:900;
 font-size:16px;
 cursor:pointer;
 transition:.15s;
}

.core-menu button:nth-child(1){background:#f28e0e;border-radius:30px 0 0 0}
.core-menu button:nth-child(2){background:#a85fc9}
.core-menu button:nth-child(3){background:#747fda}
.core-menu button:nth-child(4){background:#d65d9c}
.core-menu button:nth-child(5){background:#ffc03a}
.core-menu button:nth-child(6){background:#ef741d;border-radius:0 0 0 30px}

.core-menu button:hover{
 filter:brightness(1.25);
 transform:translateX(5px);
}

.core-main{
 border:1px solid #87500d;
 border-radius:25px;
 padding:30px;
 background:rgba(0,0,0,.80);
}

.core-welcome{
 border-bottom:1px solid #42270c;
 padding-bottom:22px;
}

.core-welcome small{
 color:#8c61b7;
 letter-spacing:4px;
}

.core-welcome h1{
 color:#ffc03a;
 font-size:35px;
 letter-spacing:3px;
 margin:10px 0;
}

.core-welcome span{
 color:#4fff62;
}

.core-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:16px;
 margin-top:25px;
}

.core-card{
 min-height:210px;
 border:1px solid #74450d;
 border-radius:18px;
 padding:20px;
 background:#030304;
 overflow:hidden;
}

.core-card h3{
 color:#ef9918;
}

.core-card strong{
 display:block;
 font-size:23px;
 margin-top:18px;
}

.core-online{
 color:#4bff63;
}

.core-blue{
 color:#4b9fff;
}

.core-bars{
 display:flex;
 gap:5px;
 margin-top:38px;
}

.core-bars i{
 flex:1;
 height:13px;
 background:#8b53bf;
 animation:segmentPulse 1s infinite alternate;
}

.core-bars i:nth-child(2n){
 background:#f18e0d;
 animation-delay:.2s;
}

.core-radar{
 width:100px;
 height:100px;
 border:1px solid #70500f;
 border-radius:50%;
 margin:20px auto 0;
 position:relative;
 overflow:hidden;
 background:
 repeating-radial-gradient(
 circle,
 transparent 0 16px,
 #3b290d 17px,
 transparent 18px
 );
}

.core-radar span{
 position:absolute;
 left:50%;
 top:50%;
 width:50%;
 height:2px;
 background:#47ff61;
 transform-origin:left;
 animation:radar 2.6s linear infinite;
}

.core-wave{
 height:60px;
 margin-top:25px;
 background:
 repeating-linear-gradient(
 90deg,
 #2866a7 0 2px,
 transparent 2px 12px
 );
 animation:coreWave .9s infinite alternate;
}

@keyframes coreWave{
 to{opacity:.35}
}

.core-loadbar{
 height:20px;
 border:1px solid #71430b;
 padding:3px;
 margin-top:25px;
}

.core-loadbar span{
 display:block;
 width:24%;
 height:100%;
 background:linear-gradient(90deg,#6549ad,#2b86de,#ec910a);
 transition:width .6s ease;
}

.core-right{
 border:1px solid #87500d;
 border-radius:22px;
 padding:18px;
 background:#020203;
}

.core-right-title{
 color:#f1a11d;
 font-size:17px;
 font-weight:900;
 margin-bottom:25px;
}

.core-status-row{
 border-bottom:1px solid #40270d;
 padding:20px 0;
 display:flex;
 justify-content:space-between;
 font-size:12px;
}

.core-status-row strong{
 color:#4cff61;
}

.core-right-animation{
 height:220px;
 display:flex;
 align-items:center;
 justify-content:space-around;
}

.core-right-animation i{
 width:14px;
 height:55px;
 background:
 repeating-linear-gradient(
 to top,
 #8b56bd 0 7px,
 transparent 7px 11px
 );
 animation:coreEq .8s infinite alternate;
}

.core-right-animation i:nth-child(2n){
 background:
 repeating-linear-gradient(
 to top,
 #f18f0b 0 7px,
 transparent 7px 11px
 );
 animation-delay:.2s;
}

@keyframes coreEq{
 to{height:185px}
}


/* ==================================================
   FIX: LOGIN FIELDS KLIKBAAR MAKEN
================================================== */

/* Alle decoratieve animaties mogen geen muisklikken blokkeren */
.space,
.stars,
.scanlines,
.warp-lines,
.warp-lines span,
.emblem,
.ring,
.star-core,
.scanner-line,
.boot-stars,
.boot-scan{
  pointer-events:none !important;
}

/* Loginformulier altijd boven de animaties */
.login-core{
  position:relative;
}

#loginForm{
  position:relative;
  z-index:50;
  pointer-events:auto !important;
}

.field{
  position:relative;
  z-index:51;
  pointer-events:auto !important;
}

.field input{
  position:relative;
  z-index:52;
  pointer-events:auto !important;
  cursor:text;
}

.login-controls{
  position:relative;
  z-index:52;
  pointer-events:auto !important;
}

#loginButton,
#clearButton{
  position:relative;
  z-index:53;
  pointer-events:auto !important;
  cursor:pointer;
}

.authorization{
  position:relative;
  z-index:40;
}

/* Zorg dat de bewegende achtergrond achter de login blijft */
.warp-lines{
  z-index:1 !important;
}

.emblem{
  z-index:2;
}

.login-core h1,
.login-subtitle{
  position:relative;
  z-index:10;
}


/* =========================================================
   FIXED LCARS COMPUTER CORE
========================================================= */

.fixed-core{
 position:fixed;
 inset:0;
 z-index:100;
 background:
 radial-gradient(circle at 52% 35%,#071424 0,#020305 37%,#000 78%);
 padding:10px;
 overflow:auto;
 color:#ddd;
 font-family:Arial,Helvetica,sans-serif;
}

.fixed-core *{
 box-sizing:border-box;
}

.fixed-header{
 height:62px;
 display:flex;
 gap:7px;
 align-items:stretch;
}

.fixed-lcars{
 width:100px;
 background:#a55bc5;
 color:#080808;
 border-radius:28px 28px 0 0;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 font-weight:900;
}

.fixed-lcars small{
 margin-top:5px;
}

.fixed-title{
 display:flex;
 align-items:center;
 padding:0 14px;
 color:#f5a01b;
 font-size:28px;
 font-weight:900;
 white-space:nowrap;
}

.fixed-header-code{
 margin-left:auto;
 color:#b46bd1;
 display:flex;
 align-items:center;
}

.fixed-access{
 min-width:335px;
 background:#ef8c0c;
 border-radius:28px;
 color:#080808;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
 font-size:12px;
}

.fixed-stardate,
.fixed-clock{
 display:flex;
 align-items:center;
 justify-content:center;
 color:#b96fd1;
 padding:0 10px;
 font-size:12px;
}

.fixed-clock{
 color:#f4a01b;
 min-width:85px;
}


.fixed-network-title{
 margin-left:100px;
 height:42px;
 display:flex;
 align-items:center;
 gap:5px;
}

.fixed-network-title strong{
 flex:1;
 text-align:center;
 color:#a85ac8;
 letter-spacing:6px;
 font-size:12px;
}

.network-line{
 height:14px;
 display:block;
}

.network-line.purple-line{
 width:110px;
 background:#8d51b8;
}

.network-line.orange-line{
 width:45px;
 background:#ef8d0c;
}

.network-line.blue-line{
 width:120px;
 background:#535cc2;
}


.fixed-body{
 display:grid;
 grid-template-columns:65px 225px minmax(720px,1fr);
 gap:8px;
 min-height:720px;
}


.fixed-rail{
 display:flex;
 flex-direction:column;
 gap:4px;
}

.fr{
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 color:#080808;
 font-size:9px;
 font-weight:900;
 line-height:2.6;
}

.fr.purple{
 background:#a45bc5;
 min-height:105px;
}

.fr.orange{
 background:#ef8d0c;
 min-height:55px;
}

.fr.blue{
 background:#596ac8;
}

.fr.grow{
 flex:1;
}

.fr.rail-end{
 min-height:100px;
 background:#9a56bb;
 border-radius:0 0 0 30px;
}


.fixed-menu{
 display:flex;
 flex-direction:column;
 gap:6px;
}

.menu-title{
 color:#f3a01b;
 font-weight:900;
 height:26px;
 display:flex;
 align-items:center;
}

.fixed-menu button{
 height:59px;
 flex:none;
 border:0;
 border-radius:10px;
 color:#eee;
 display:grid;
 grid-template-columns:35px 1fr 42px;
 align-items:center;
 gap:5px;
 padding:0 8px;
 cursor:pointer;
 font-weight:900;
 transition:.12s;
}

.fixed-menu button:hover{
 transform:translateX(4px);
 filter:brightness(1.2);
 box-shadow:0 0 14px rgba(166,88,200,.3);
}

.fixed-menu button b{
 font-size:23px;
}

.fixed-menu button span{
 text-align:left;
 font-size:11px;
}

.fixed-menu button small{
 background:#080808;
 padding:7px 3px;
 border-radius:6px;
 font-size:8px;
}

.fm-orange{
 background:linear-gradient(90deg,#ed770d,#d98a0b);
}

.fm-purple{
 background:linear-gradient(90deg,#9147ae,#623096);
}

.fm-blue{
 background:linear-gradient(90deg,#575bc7,#3541a2);
}

.fm-pink{
 background:linear-gradient(90deg,#ba3b72,#8f285e);
}

.fm-red{
 background:linear-gradient(90deg,#d14a25,#9e311e);
}


.fixed-dashboard{
 min-width:0;
}

.fixed-top{
 display:grid;
 grid-template-columns:minmax(410px,.9fr) minmax(500px,1.35fr);
 gap:8px;
}

.fixed-panel{
 border:1px solid #87500d;
 border-radius:13px;
 background:rgba(1,2,3,.94);
 padding:12px;
 overflow:hidden;
}

.fixed-panel h2{
 margin:0;
 padding-bottom:8px;
 border-bottom:1px solid #53310d;
 color:#f0a01a;
 font-size:14px;
}


.overview-layout{
 display:grid;
 grid-template-columns:1fr 160px;
 gap:8px;
 min-height:405px;
}

.enterprise-area{
 padding-top:14px;
}

.interface-online{
 color:#4b9eff;
 font-size:11px;
}

.enterprise-display{
 height:240px;
 position:relative;
 overflow:hidden;
}

.enterprise-display svg{
 width:100%;
 height:100%;
}

.enterprise-display ellipse,
.enterprise-display path{
 fill:none;
 stroke-width:2;
}

.ship-primary{
 stroke:#327ed8;
}

.ship-secondary{
 stroke:#7159ca;
}

.ship-orange{
 stroke:#e98b0b;
}

.enterprise-scan{
 position:absolute;
 left:8%;
 right:8%;
 height:2px;
 top:0;
 background:linear-gradient(90deg,transparent,#3289f2,transparent);
 box-shadow:0 0 14px #3289f2;
 animation:enterpriseScan 3s linear infinite;
}

@keyframes enterpriseScan{
 to{top:100%}
}

.enterprise-name{
 text-align:center;
 color:#a457c5;
 font-size:20px;
 font-weight:900;
}

.systems-online{
 text-align:center;
 color:#b99b80;
 font-size:10px;
 margin-top:6px;
}


.overview-stats{
 border-left:1px solid #75470e;
 padding-left:12px;
}

.overview-stat{
 padding:18px 0;
 border-bottom:1px solid #49300f;
}

.overview-stat label{
 display:block;
 color:#e89b17;
 font-size:10px;
}

.overview-stat strong{
 display:block;
 margin:10px 0;
 color:#a758c7;
 font-size:22px;
}

.overview-stat small{
 font-size:8px;
 color:#a9907d;
}

.overview-stat .integrity,
.overview-stat .secure{
 color:#4ad95a;
}

.integrity-blocks{
 display:flex;
 gap:3px;
}

.integrity-blocks i{
 width:13px;
 height:7px;
 background:#9b53bd;
 animation:fixedPulse 1.2s infinite alternate;
}


.metrics{
 min-height:430px;
}

.metric{
 min-height:95px;
 display:grid;
 grid-template-columns:42% 58%;
 align-items:center;
 border-bottom:1px solid #4e300d;
}

.metric:last-child{
 border-bottom:0;
}

.metric-value label{
 display:block;
 font-size:10px;
}

.metric-value strong{
 display:inline-block;
 font-size:25px;
 margin:8px 12px 5px 0;
}

.metric-leds{
 display:inline-flex;
 gap:3px;
}

.metric-leds i{
 width:14px;
 height:7px;
 background:currentColor;
 animation:fixedPulse 1s infinite alternate;
}

.metric-leds i:nth-child(2n){
 animation-delay:.2s;
}

.metric.cpu,
.metric.disk{
 color:#ef8d0c;
}

.metric.memory{
 color:#a650c4;
}

.metric.network{
 color:#3488e8;
}

.live-chart{
 height:62px;
 border:1px solid rgba(122,78,13,.25);
 background:
 linear-gradient(rgba(110,75,15,.12) 1px,transparent 1px),
 linear-gradient(90deg,rgba(110,75,15,.12) 1px,transparent 1px);
 background-size:15px 15px;
 position:relative;
 overflow:hidden;
}

.live-chart span{
 position:absolute;
 left:-10%;
 top:50%;
 width:120%;
 height:2px;
 background:currentColor;
 box-shadow:
 18px -15px currentColor,
 38px 12px currentColor,
 60px -22px currentColor,
 85px 8px currentColor,
 115px -17px currentColor,
 145px 15px currentColor,
 180px -10px currentColor;
 animation:chartMove 1.7s linear infinite alternate;
}

@keyframes chartMove{
 to{
  transform:translateY(10px) scaleY(1.5);
 }
}


.fixed-bottom{
 display:grid;
 grid-template-columns:1fr 1.15fr 1fr 1fr;
 gap:8px;
 margin-top:8px;
 min-height:245px;
}


.resource-columns{
 height:185px;
 display:flex;
 justify-content:space-around;
 align-items:flex-end;
 padding-top:15px;
}

.resource-columns>div{
 height:100%;
 display:flex;
 flex-direction:column;
 justify-content:flex-end;
 align-items:center;
}

.resource-columns span{
 width:25px;
 background:
 repeating-linear-gradient(
 to top,
 #438ae8 0 5px,
 transparent 5px 9px
 );
}

.resource-columns>div:nth-child(2) span{
 background:
 repeating-linear-gradient(
 to top,
 #9c50c1 0 5px,
 transparent 5px 9px
 );
}

.resource-columns>div:nth-child(3) span{
 background:
 repeating-linear-gradient(
 to top,
 #4dce5b 0 5px,
 transparent 5px 9px
 );
}

.resource-columns>div:nth-child(4) span{
 background:
 repeating-linear-gradient(
 to top,
 #ef900b 0 5px,
 transparent 5px 9px
 );
}

.resource-columns label{
 color:#4f9eea;
 font-size:9px;
 margin-top:5px;
}

.resource-columns strong{
 color:#4bd35a;
 margin-top:4px;
}


.storage-layout{
 height:185px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:20px;
}

.storage-circle{
 width:120px;
 height:120px;
 border-radius:50%;
 background:
 conic-gradient(
 #286bd1 0 45%,
 #e88a0a 45% 82%,
 #9b50bf 82% 100%
 );
 display:flex;
 align-items:center;
 justify-content:center;
}

.storage-circle>div{
 width:75px;
 height:75px;
 background:#030304;
 border-radius:50%;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
}

.storage-circle small{
 color:#aaa;
}

.storage-list{
 font-size:9px;
 line-height:2.2;
}

.storage-list p{
 display:flex;
 gap:7px;
}

.storage-list strong{
 margin-left:auto;
}

.volume1{
 color:#3c8ce7;
}

.volume2{
 color:#ed920c;
}

.volume3{
 color:#a251c2;
}


.docker-circle{
 width:110px;
 height:110px;
 border-radius:50%;
 margin:18px auto 8px;
 background:
 conic-gradient(
 #50c45a 0 80%,
 #e98b0a 80% 100%
 );
 display:flex;
 align-items:center;
 justify-content:center;
}

.docker-circle>div{
 width:72px;
 height:72px;
 border-radius:50%;
 background:#030304;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
}

.docker-circle strong{
 font-size:25px;
}

.docker-circle small{
 font-size:8px;
}

.docker-summary{
 font-size:9px;
}

.docker-summary p{
 display:flex;
 justify-content:space-between;
}

.green{
 color:#4bd85a!important;
}

.red{
 color:#ff4c42!important;
}


.pihole-online{
 color:#4ad85a;
 font-weight:900;
 margin:15px 0;
}

.pihole p{
 display:flex;
 justify-content:space-between;
 font-size:9px;
 border-bottom:1px solid #3d290d;
 padding-bottom:6px;
}

.pihole p strong{
 color:#4d9ee8;
}

.pihole-graph{
 height:45px;
 background:
 repeating-linear-gradient(
 120deg,
 transparent 0 7px,
 #42cf52 8px,
 transparent 9px 15px
 );
 animation:piholeMove .8s infinite alternate;
}

@keyframes piholeMove{
 to{
  opacity:.35;
  transform:scaleY(.8);
 }
}


.fixed-footer{
 height:50px;
 margin-left:100px;
 margin-top:7px;
 border:1px solid #79480d;
 display:grid;
 grid-template-columns:1.2fr 1fr 1.4fr 1.2fr .7fr;
 gap:7px;
 align-items:center;
 text-align:center;
 color:#a85ac6;
 font-size:10px;
}

.fixed-footer .session{
 height:35px;
 background:#ed8c0c;
 color:#070707;
 border-radius:20px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
}

.fixed-footer .clearance{
 height:35px;
 background:#8d3ca2;
 color:#070707;
 border-radius:20px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
}

.footer-status{
 height:35px;
 background:#455bc0;
 color:#070707;
 border-radius:20px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:900;
}


@keyframes fixedPulse{
 to{opacity:.25}
}



/* =========================================================
   LCARS FILE SYSTEMS UI
========================================================= */

.fs-panel{
  position:absolute;
  inset:0;
  z-index:40;
  overflow-y:auto;
  padding:28px;
  background:#050608;
  color:#f4f4f4;
}

.fs-panel.hidden{
  display:none !important;
}

.fs-header{
  display:grid;
  grid-template-columns:170px 1fr auto;
  gap:18px;
  align-items:stretch;
}

.fs-header-code{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:92px;
  border-radius:44px 0 0 44px;
  background:#cc99cc;
  color:#050505;
  font-weight:900;
  letter-spacing:2px;
}

.fs-header-title{
  padding:12px 22px;
  border-top:16px solid #ff9966;
  border-bottom:16px solid #9999ff;
}

.fs-header-title small{
  letter-spacing:2px;
}

.fs-header-title h1{
  margin:4px 0 0;
  font-size:34px;
  letter-spacing:3px;
}

#closeFileSystemsButton,
#fsHomeButton,
#fsBackButton{
  border:0;
  padding:12px 22px;
  border-radius:24px;
  background:#ff9966;
  color:#090909;
  font-weight:900;
  cursor:pointer;
}

.fs-lcars-strip{
  display:grid;
  grid-template-columns:130px 80px 1fr 80px 130px;
  gap:7px;
  align-items:center;
  margin:22px 0;
}

.fs-lcars-strip span{
  display:block;
  height:18px;
  border-radius:10px;
  background:#9999ff;
}

.fs-lcars-strip span:nth-child(2),
.fs-lcars-strip span:nth-child(4){
  background:#ff9966;
}

.fs-lcars-strip strong{
  text-align:center;
  letter-spacing:4px;
}

.fs-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-bottom:20px;
}

.fs-summary-card{
  min-height:110px;
  padding:18px;
  border:2px solid #9999ff;
  border-radius:18px;
  background:#111218;
}

.fs-summary-card small,
.fs-summary-card span{
  display:block;
  opacity:.75;
}

.fs-summary-card strong{
  display:block;
  margin:8px 0;
  font-size:22px;
  color:#ffcc99;
}

.fs-toolbar{
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  gap:12px;
  align-items:center;
  margin:18px 0;
}

#fsBreadcrumb{
  min-height:46px;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-radius:20px;
  background:#20212a;
  color:#ffcc99;
  font-weight:800;
  overflow:hidden;
}

.fs-share-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;
}

.fs-share-grid.hidden,
.fs-browser.hidden{
  display:none !important;
}

.fs-share-card{
  min-height:130px;
  padding:18px;
  border:2px solid #9999ff;
  border-radius:22px;
  background:#101116;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.fs-share-card:hover{
  transform:translateY(-2px);
}

.fs-share-card strong{
  display:block;
  margin:12px 0;
  font-size:20px;
  letter-spacing:1px;
}

.fs-share-card small{
  color:#99ff99;
}

.fs-share-card.offline small{
  color:#ff7777;
}

.fs-share-code{
  font-size:11px;
  letter-spacing:2px;
  color:#cc99cc;
}

.fs-browser{
  border:2px solid #9999ff;
  border-radius:18px;
  overflow:hidden;
}

.fs-browser-head,
.fs-file-row{
  display:grid;
  grid-template-columns:70px minmax(220px,1fr) 120px 220px;
  gap:10px;
  align-items:center;
}

.fs-browser-head{
  padding:13px 16px;
  background:#9999ff;
  color:#050505;
  font-weight:900;
}

.fs-file-row{
  width:100%;
  padding:13px 16px;
  border:0;
  border-bottom:1px solid #30313c;
  background:#0d0e13;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.fs-file-row:hover{
  background:#20212a;
}

.fs-file-type{
  font-size:22px;
  color:#ff9966;
}

.fs-file-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}

.fs-file-size,
.fs-file-date{
  color:#c7c7d2;
}

.fs-message,
.fs-loading,
.fs-empty{
  margin-top:18px;
  padding:15px 18px;
  border-radius:15px;
  background:#20212a;
  color:#ffcc99;
  letter-spacing:1px;
}

@media(max-width:900px){

  .fs-header{
    grid-template-columns:1fr;
  }

  .fs-summary{
    grid-template-columns:1fr;
  }

  .fs-toolbar{
    grid-template-columns:1fr 1fr;
  }

  #fsBreadcrumb{
    grid-column:1 / -1;
  }

  .fs-browser{
    overflow-x:auto;
  }

  .fs-browser-head,
  .fs-file-row{
    min-width:720px;
  }

}



/* LCARS FILE SYSTEMS UPLOAD */

#fsUploadButton{
  border:0;
  padding:12px 22px;
  border-radius:24px;
  background:#9999ff;
  color:#090909;
  font-weight:900;
  cursor:pointer;
}

#fsUploadButton:hover{
  filter:brightness(1.15);
}



/* =========================================================
   LCARS FILE TRANSFER CENTER
========================================================= */

.fs-transfer-center{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:20px 0;
}

.fs-transfer-unit{
  padding:16px 18px;
  border:2px solid #9999ff;
  border-radius:18px;
  background:#111218;
}

.fs-transfer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:12px;
  color:#ffcc99;
  font-weight:900;
  letter-spacing:1px;
}

.fs-transfer-head span{
  min-width:55px;
  text-align:right;
  color:#ffffff;
}

.fs-transfer-track{
  position:relative;
  height:24px;
  overflow:hidden;
  border-radius:14px;
  background:#252631;
  border:1px solid #4d4e5c;
}

.fs-transfer-bar{
  width:0%;
  height:100%;
  border-radius:14px;
  background:linear-gradient(
    90deg,
    #9999ff,
    #cc99cc,
    #ff9966
  );
  transition:width .15s linear;
}

.fs-transfer-bar.complete{
  animation:fsTransferComplete .8s ease-in-out 2;
}

.fs-transfer-bar.error{
  background:#ff4b43;
}

.fs-transfer-info{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:10px;
  font-size:13px;
  color:#c7c7d2;
}

.fs-transfer-info span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@keyframes fsTransferComplete{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.8)}
  100%{filter:brightness(1)}
}

@media(max-width:900px){

  .fs-transfer-center{
    grid-template-columns:1fr;
  }

}



/* =========================================================
   LCARS TRANSFER PERCENTAGE IN PROGRESS BAR
========================================================= */

.fs-transfer-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.fs-transfer-bar span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;
  font-weight:900;
  letter-spacing:1px;

  color:#050505;

  white-space:nowrap;

  pointer-events:none;
}



/* =========================================================
   LCARS FILE DELETE
========================================================= */

.fs-delete-button{
  margin-left:12px;
  padding:7px 14px;

  border:0;
  border-radius:14px;

  background:#ff4b43;
  color:#090909;

  font-size:12px;
  font-weight:900;
  letter-spacing:1px;

  cursor:pointer;
}

.fs-delete-button:hover{
  filter:brightness(1.2);
}



/* =========================================================
   LCARS FILE PREVIEW
========================================================= */

.fs-preview-overlay{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:30px;

  background:rgba(0,0,0,.86);
}

.fs-preview-overlay.hidden{
  display:none !important;
}

.fs-preview-window{
  width:min(1200px,96vw);
  height:min(820px,92vh);

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:3px solid #9999ff;
  border-radius:26px;

  background:#090a0f;

  box-shadow:
    0 0 45px rgba(153,153,255,.35);
}

.fs-preview-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  padding:18px 22px;

  background:#20212a;

  border-bottom:12px solid #ff9966;
}

.fs-preview-header small{
  display:block;

  color:#cc99cc;

  font-size:11px;
  letter-spacing:2px;
}

.fs-preview-header strong{
  display:block;

  margin-top:5px;

  font-size:20px;

  color:#fff;

  word-break:break-all;
}

.fs-preview-actions{
  display:flex;
  gap:10px;
}

#fsPreviewDownload,
#fsPreviewClose{
  border:0;
  border-radius:20px;

  padding:10px 18px;

  font-weight:900;

  cursor:pointer;
}

#fsPreviewDownload{
  background:#9999ff;
  color:#050505;
}

#fsPreviewClose{
  background:#ff9966;
  color:#050505;
}

.fs-preview-status{
  padding:10px 20px;

  background:#111218;

  color:#ffcc99;

  letter-spacing:2px;
  font-size:12px;
}

.fs-preview-content{
  flex:1;

  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:auto;

  padding:20px;
}

.fs-preview-image{
  max-width:100%;
  max-height:100%;

  object-fit:contain;

  border-radius:12px;
}

.fs-preview-pdf{
  width:100%;
  height:100%;

  border:0;

  background:white;
}

.fs-preview-video{
  max-width:100%;
  max-height:100%;

  background:black;

  border-radius:12px;
}

.fs-preview-audio-wrap{
  width:min(650px,90%);

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:24px;

  padding:40px;

  border:2px solid #9999ff;
  border-radius:24px;

  background:#111218;
}

.fs-preview-audio-icon{
  font-size:90px;

  color:#cc99cc;
}

.fs-preview-audio{
  width:100%;
}

.fs-preview-text{
  width:100%;
  height:100%;

  margin:0;

  overflow:auto;

  white-space:pre-wrap;
  word-break:break-word;

  padding:20px;

  background:#050608;
  color:#9dff9d;

  font-family:monospace;
  font-size:14px;

  border:1px solid #455bc0;
  border-radius:12px;
}

.fs-preview-loading,
.fs-preview-error,
.fs-preview-unsupported{
  padding:30px;

  text-align:center;

  color:#ffcc99;
}

.fs-preview-unsupported{
  display:flex;
  flex-direction:column;

  gap:15px;
}

.fs-preview-unsupported strong{
  font-size:24px;

  color:#ff9966;
}

@media(max-width:800px){

  .fs-preview-header{
    flex-direction:column;
    align-items:stretch;
  }

  .fs-preview-actions{
    width:100%;
  }

  #fsPreviewDownload,
  #fsPreviewClose{
    flex:1;
  }

}


/* LCARS PHOTO + MUSIC NAVIGATION */

#fsMediaNavigation{
  display:none;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:12px 18px 18px;
}

#fsMediaPrevious,
#fsMediaNext{
  border:0;
  border-radius:18px;
  padding:11px 20px;
  font-weight:900;
  cursor:pointer;
  background:#9999ff;
  color:#050505;
}

#fsMediaCounter{
  min-width:160px;
  text-align:center;
  color:#ffcc99;
  letter-spacing:1px;
}



/* =========================================================
   LCARS PHOTO FIT + FULLSCREEN
========================================================= */

#fsPhotoViewerControls{
  display:none;
  gap:10px;
  align-items:center;
}

#fsPhotoFitButton,
#fsPhotoFullscreenButton{
  border:0;
  border-radius:18px;
  padding:11px 18px;
  font-weight:900;
  cursor:pointer;
  background:#ff9966;
  color:#050505;
}

.fs-preview-image.fs-photo-contain{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.fs-preview-window:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  border-radius:0;
}

.fs-preview-window:fullscreen
.fs-preview-content{
  padding:10px;
}

.fs-preview-window:fullscreen
.fs-preview-image{
  width:100%;
  height:100%;
  object-fit:contain;
}



/* =========================================================
   LCARS PHOTO VIEWER AUTO-HIDE
========================================================= */

/*
   In FIT TO SCREEN mode verdwijnen
   de bedieningsknoppen automatisch.
*/

.fs-preview-window.fs-photo-auto-hide
.fs-preview-actions,

.fs-preview-window.fs-photo-auto-hide
#fsMediaNavigation{
  opacity:0;
  pointer-events:none;

  transition:
    opacity .25s ease;
}


/*
   Zodra de muis beweegt worden
   de controls weer zichtbaar.
*/

.fs-preview-window.fs-photo-auto-hide.fs-photo-controls-visible
.fs-preview-actions,

.fs-preview-window.fs-photo-auto-hide.fs-photo-controls-visible
#fsMediaNavigation{
  opacity:1;
  pointer-events:auto;
}


/*
   Mooie vloeiende overgang.
*/

.fs-preview-actions,
#fsMediaNavigation{
  transition:
    opacity .25s ease;
}



/* =========================================================
   LCARS IMMERSIVE PHOTO MODE V2
========================================================= */

/*
   Hele overlay wordt zwart.
*/

.fs-preview-overlay.fs-photo-overlay-immersive{
  padding:0 !important;
  background:#000 !important;
}


/*
   Geen zichtbaar venster meer.
*/

.fs-preview-window.fs-photo-immersive{
  position:fixed !important;

  inset:0 !important;

  width:100vw !important;
  height:100vh !important;

  max-width:none !important;
  max-height:none !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  background:#000 !important;
}


/*
   Header en status verdwijnen volledig.
*/

.fs-preview-window.fs-photo-immersive
.fs-preview-header,

.fs-preview-window.fs-photo-immersive
.fs-preview-status{
  display:none !important;
}


/*
   Foto gebruikt werkelijk het hele scherm.
*/

.fs-preview-window.fs-photo-immersive
.fs-preview-content{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  padding:0 !important;
  margin:0 !important;

  background:#000 !important;

  overflow:hidden !important;
}


.fs-preview-window.fs-photo-immersive
.fs-preview-image{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;

  border-radius:0 !important;
}


/*
   Navigatie zweeft onderaan over de foto.
*/

.fs-preview-window.fs-photo-immersive
#fsMediaNavigation{
  position:absolute !important;

  left:50% !important;
  bottom:24px !important;

  transform:translateX(-50%) !important;

  z-index:50 !important;

  width:auto !important;

  padding:10px 16px !important;

  border-radius:24px !important;

  background:rgba(0,0,0,.70) !important;

  backdrop-filter:blur(5px);
}


/*
   Default verborgen.
*/

.fs-preview-window.fs-photo-immersive
#fsMediaNavigation,

.fs-preview-window.fs-photo-immersive
.fs-preview-actions{

  opacity:0 !important;

  pointer-events:none !important;

  transition:opacity .2s ease !important;
}


/*
   Alleen na muisbeweging zichtbaar.
*/

.fs-preview-window.fs-photo-immersive.fs-photo-controls-visible
#fsMediaNavigation,

.fs-preview-window.fs-photo-immersive.fs-photo-controls-visible
.fs-preview-actions{

  opacity:1 !important;

  pointer-events:auto !important;
}



/* =========================================================
   LCARS FLOATING MINI MUSIC PLAYER
========================================================= */

#fsMiniMusicPlayer{

  position:fixed;

  right:22px;
  bottom:22px;

  z-index:15000;

  width:330px;

  display:none;

  padding:14px;

  border:3px solid #9999ff;

  border-radius:24px;

  background:
    rgba(8,9,14,.96);

  box-shadow:
    0 0 35px
    rgba(153,153,255,.35);

}


#fsMiniMusicPlayer.active{

  display:block;

}


.fs-mini-music-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}


.fs-mini-music-header small{

  display:block;

  color:#cc99cc;

  font-size:10px;

  letter-spacing:1.5px;

}


.fs-mini-music-header strong{

  display:block;

  margin-top:4px;

  max-width:250px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:#fff;

  font-size:13px;

}


#fsMiniMusicClose{

  border:0;

  border-radius:50%;

  width:32px;
  height:32px;

  cursor:pointer;

  background:#ff4b43;

  color:#050505;

  font-size:20px;

  font-weight:900;

}


.fs-mini-music-progress{

  width:100%;

  height:9px;

  margin-top:13px;

  overflow:hidden;

  border-radius:10px;

  background:#252631;

}


#fsMiniMusicProgressBar{

  width:0%;

  height:100%;

  background:
    linear-gradient(
      90deg,
      #9999ff,
      #cc99cc,
      #ff9966
    );

}


.fs-mini-music-time{

  display:flex;

  justify-content:space-between;

  margin-top:5px;

  color:#b8b8c8;

  font-size:10px;

}


.fs-mini-music-controls{

  display:flex;

  justify-content:center;

  gap:12px;

  margin-top:12px;

}


.fs-mini-music-controls button{

  border:0;

  border-radius:18px;

  min-width:65px;

  padding:9px 14px;

  cursor:pointer;

  background:#9999ff;

  color:#050505;

  font-weight:900;

}


@media(max-width:600px){

  #fsMiniMusicPlayer{

    left:10px;

    right:10px;

    bottom:10px;

    width:auto;

  }

}



/* =========================================================
   LCARS MKV FAST SEEK
========================================================= */

#fsFastSeekControls{

  width:100%;

  margin-top:14px;

  padding:12px 16px;

  box-sizing:border-box;

  border-radius:20px;

  background:
    rgba(10,10,18,.92);

  border:
    2px solid #9999ff;

}


.fs-fast-seek-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}


.fs-fast-seek-top strong{

  color:#ffcc99;

  letter-spacing:1.5px;

}


#fsFastSeekBack,
#fsFastSeekForward{

  border:0;

  border-radius:18px;

  padding:9px 15px;

  cursor:pointer;

  font-weight:900;

  background:#9999ff;

  color:#050505;

}


#fsFastSeekSlider{

  width:100%;

  margin-top:12px;

  cursor:pointer;

}


.fs-fast-seek-time{

  display:flex;

  justify-content:space-between;

  margin-top:5px;

  color:#ccccdd;

  font-size:11px;

  letter-spacing:1px;

}



/* =========================================================
   LCARS FILE TABLE V3
========================================================= */

.fs-browser{
  overflow-x:auto;
}

.fs-browser-head,
.fs-file-row{
  box-sizing:border-box;
  display:grid;

  grid-template-columns:
    60px
    minmax(340px,1fr)
    95px
    175px
    120px
    75px
    90px;

  column-gap:10px;
  align-items:center;
}


/* De eerste vier velden vormen samen één klikbaar mapgedeelte */

.fs-file-main{
  grid-column:1 / 5;

  display:grid;
  grid-template-columns:
    60px
    minmax(340px,1fr)
    95px
    175px;

  column-gap:10px;
  align-items:center;

  width:100%;
  min-width:0;

  padding:0;
  border:0;

  background:transparent;
  color:inherit;

  text-align:left;
  font:inherit;
}


/* Rij */

.fs-file-row{
  width:100%;
  padding:12px 16px;

  border:0;
  border-bottom:1px solid #30313c;

  background:#0d0e13;
  color:#fff;
}

.fs-file-row:hover{
  background:#20212a;
}


/* Bestandsnaam */

.fs-file-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}


/* SIZE en MODIFIED */

.fs-file-size,
.fs-file-date{
  text-align:left;
  white-space:nowrap;
  color:#c7c7d2;
}


/* DOWNLOAD */

.fs-download-button{
  justify-self:center;

  width:46px;
  height:36px;
  padding:0;

  border:2px solid #ff9966;
  border-radius:12px;

  background:#111218;
  color:#ff9966;

  font-size:24px;
  font-weight:900;

  cursor:pointer;
}

.fs-download-button:hover{
  background:#ff9966;
  color:#050505;
}


/* PLAY */

.fs-play-button{
  justify-self:center;

  width:38px;
  height:38px;
  padding:0 0 0 3px;

  border:2px solid #9999ff;
  border-radius:50%;

  background:#111218;
  color:#9999ff;

  font-size:17px;
  font-weight:900;

  cursor:pointer;
}

.fs-play-button:hover{
  background:#9999ff;
  color:#050505;
}


/* DELETE */

.fs-delete-button{
  justify-self:center;

  box-sizing:border-box;

  width:80px;
  min-width:80px;
  height:34px;

  margin:0;
  padding:0 8px;

  border:0;
  border-radius:17px;

  background:#ff4b43;
  color:#090909;

  font-size:11px;
  font-weight:900;
  letter-spacing:.4px;

  white-space:nowrap;

  cursor:pointer;
}

.fs-delete-button:hover{
  filter:brightness(1.2);
}


.fs-action-empty{
  display:block;
}


/* Bestandsnaam zelf is geen PLAY meer */

.fs-file-main[data-fs-action="none"]{
  cursor:default;
}

.fs-file-main[data-fs-action="open"]{
  cursor:pointer;
}


@media(max-width:1150px){

  .fs-browser-head,
  .fs-file-row{
    min-width:1050px;
  }

}



/* =========================================================
   LCARS PREVIEW FULL SCREEN
========================================================= */

#fsPreviewFullscreen{
  border:0;
  border-radius:20px;

  padding:10px 18px;

  background:#cc99cc;
  color:#050505;

  font-weight:900;

  white-space:nowrap;
  cursor:pointer;
}

#fsPreviewFullscreen:hover{
  filter:brightness(1.15);
}


/*
   Het volledige LCARS-venster wordt fullscreen.
   Header en DOWNLOAD blijven dus zichtbaar.
*/

.fs-preview-window:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;

  border-radius:0;
  border-width:0;

  background:#090a0f;
}


.fs-preview-window:fullscreen
.fs-preview-content{
  flex:1;
  min-height:0;
}


/*
   Video en afbeeldingen vullen de beschikbare
   ruimte zonder vervorming.
*/

.fs-preview-window:fullscreen
.fs-preview-video{
  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;
  border-radius:0;
}


.fs-preview-window:fullscreen
.fs-preview-image{
  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;
}


/*
   Mobiel / smallere vensters.
*/

@media(max-width:800px){

  #fsPreviewFullscreen{
    flex:1;
  }

}



/* =========================================================
   LCARS MANUAL FULLSCREEN AUTO-HIDE CONTROLS V1
========================================================= */

/*
   In handmatig fullscreen vullen foto/video
   het volledige previewgebied.
*/

.fs-preview-window.fs-manual-fullscreen:fullscreen{
  position:relative;
  overflow:hidden;
}


.fs-preview-window.fs-manual-fullscreen:fullscreen
.fs-preview-content{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  padding:0;

  z-index:1;

  background:#000;
}


/*
   Header wordt een zwevende balk bovenop
   de foto/video.
*/

.fs-preview-window.fs-manual-fullscreen:fullscreen
.fs-preview-header{

  position:absolute;

  top:0;
  left:0;
  right:0;

  z-index:100;

  opacity:0;
  pointer-events:none;

  transform:translateY(-100%);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


/*
   Statusbalk zweeft direct onder de header.
*/

.fs-preview-window.fs-manual-fullscreen:fullscreen
.fs-preview-status{

  position:absolute;

  top:86px;
  left:0;
  right:0;

  z-index:99;

  opacity:0;
  pointer-events:none;

  transform:translateY(-25px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


/*
   Foto PREVIOUS / NEXT navigatie
   zweeft onderaan.
*/

.fs-preview-window.fs-manual-fullscreen:fullscreen
#fsMediaNavigation{

  position:absolute !important;

  left:50% !important;
  bottom:24px !important;

  transform:
    translateX(-50%)
    translateY(30px) !important;

  z-index:100 !important;

  width:auto !important;

  padding:10px 18px !important;

  border-radius:24px;

  background:rgba(0,0,0,.72);

  opacity:0;
  pointer-events:none;

  transition:
    opacity .25s ease,
    transform .25s ease !important;
}


/*
   MUIS BEWEEGT:
   alle bediening weer zichtbaar.
*/

.fs-preview-window.fs-manual-fullscreen.fs-manual-fullscreen-controls:fullscreen
.fs-preview-header{

  opacity:1;
  pointer-events:auto;

  transform:translateY(0);
}


.fs-preview-window.fs-manual-fullscreen.fs-manual-fullscreen-controls:fullscreen
.fs-preview-status{

  opacity:1;
  pointer-events:auto;

  transform:translateY(0);
}


.fs-preview-window.fs-manual-fullscreen.fs-manual-fullscreen-controls:fullscreen
#fsMediaNavigation{

  opacity:1;
  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0) !important;
}


/*
   Foto en video maximaal groot.
*/

.fs-preview-window.fs-manual-fullscreen:fullscreen
.fs-preview-image,

.fs-preview-window.fs-manual-fullscreen:fullscreen
.fs-preview-video{

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  border-radius:0;
}



/* =========================================================
   LCARS MINI MUSIC PLAYER V2
========================================================= */

#fsMiniMusicPlayer{

  width:360px;

  padding:0;

  overflow:hidden;

  border:
    3px solid #9999ff;

  border-radius:
    28px 28px 18px 28px;

  background:
    rgba(6,7,12,.98);

  box-shadow:
    0 0 36px
    rgba(153,153,255,.38),
    inset 0 0 25px
    rgba(255,153,102,.04);

  user-select:none;
}


#fsMiniMusicPlayer.dragging{

  opacity:.92;

  cursor:grabbing;
}


/* HEADER / DRAG HANDLE */

.fs-mini-music-header{

  position:relative;

  padding:
    13px 14px
    12px 22px;

  min-height:68px;

  background:
    #1d1e27;

  border-bottom:
    9px solid #ff9966;

  cursor:grab;
}


.fs-mini-music-header:active{
  cursor:grabbing;
}


.fs-mini-music-header > div{
  min-width:0;
  flex:1;
}


.fs-mini-lcars-strip{

  display:grid;

  grid-template-columns:
    46px 22px 1fr;

  gap:5px;

  align-items:center;

  margin-bottom:7px;
}


.fs-mini-lcars-strip span{

  display:block;

  height:7px;

  border-radius:7px;

  background:#9999ff;
}


.fs-mini-lcars-strip span:nth-child(2){
  background:#ff9966;
}


.fs-mini-lcars-strip strong{

  text-align:right;

  color:#ffcc99;

  font-size:9px;

  letter-spacing:1.5px;
}


.fs-mini-music-header small{

  color:#cc99cc;

  font-size:10px;

  letter-spacing:2px;
}


.fs-mini-music-header strong{

  max-width:275px;

  margin-top:3px;

  font-size:13px;

  color:#fff;
}


/* CLOSE */

#fsMiniMusicClose{

  flex:0 0 auto;

  width:34px;
  height:34px;

  margin-left:8px;

  border-radius:17px;

  background:#ff4b43;

  box-shadow:
    inset 0 0 0 2px
    rgba(0,0,0,.20);
}


/* PROGRESS */

.fs-mini-music-progress{

  margin:
    14px 18px 0;

  height:11px;

  border:
    1px solid #55566a;

  border-radius:8px;

  background:#171820;
}


#fsMiniMusicProgressBar{

  border-radius:8px;

  box-shadow:
    0 0 10px
    rgba(255,153,102,.35);
}


.fs-mini-music-time{

  margin:
    6px 20px 0;

  color:#c9c9d5;

  letter-spacing:1px;
}


/* CONTROLS */

.fs-mini-music-controls{

  margin-top:14px;

  padding:
    0 16px;

  gap:10px;
}


.fs-mini-music-controls button{

  min-width:0;

  width:62px;

  height:38px;

  padding:0;

  border-radius:18px;

  background:#9999ff;

  font-size:15px;

  box-shadow:
    inset 0 0 0 2px
    rgba(0,0,0,.18);
}


#fsMiniMusicPlay{

  width:78px;

  background:#ff9966;
}


/* FOOTER */

.fs-mini-music-footer{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-top:14px;

  padding:
    10px 14px;

  border-top:
    2px solid #333543;

  background:#111218;
}


#fsMiniMusicPlaylistToggle{

  border:0;

  border-radius:14px;

  padding:
    8px 12px;

  background:#cc99cc;

  color:#050505;

  font-size:10px;

  font-weight:900;

  letter-spacing:.8px;

  cursor:pointer;
}


.fs-mini-music-channel{

  color:#ff9966;

  font-size:9px;

  font-weight:900;

  letter-spacing:1.5px;
}


/* PLAYLIST */

.fs-mini-music-playlist{

  display:none;

  max-height:260px;

  overflow-y:auto;

  padding:
    8px;

  border-top:
    1px solid #333543;

  background:#090a0f;
}


#fsMiniMusicPlayer.playlist-open
.fs-mini-music-playlist{

  display:block;
}


.fs-mini-playlist-item{

  width:100%;

  display:grid;

  grid-template-columns:
    34px minmax(0,1fr);

  align-items:center;

  gap:8px;

  padding:
    9px 10px;

  margin-bottom:4px;

  border:0;

  border-radius:10px;

  background:#15161d;

  color:#ddd;

  text-align:left;

  cursor:pointer;
}


.fs-mini-playlist-item:hover{

  background:#252733;
}


.fs-mini-playlist-item.active{

  background:#2d2730;

  box-shadow:
    inset 6px 0 0 #ff9966;

  color:#fff;
}


.fs-mini-playlist-code{

  color:#cc99cc;

  font-size:10px;

  font-weight:900;

  text-align:center;
}


.fs-mini-playlist-item.active
.fs-mini-playlist-code{

  color:#ff9966;
}


.fs-mini-playlist-name{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:11px;

  font-weight:700;
}


.fs-mini-playlist-empty{

  padding:18px;

  text-align:center;

  color:#77788a;

  font-size:10px;

  letter-spacing:1.5px;
}


/* Scrollbar iets meer LCARS */

.fs-mini-music-playlist::-webkit-scrollbar{
  width:8px;
}

.fs-mini-music-playlist::-webkit-scrollbar-thumb{
  background:#9999ff;
  border-radius:8px;
}

.fs-mini-music-playlist::-webkit-scrollbar-track{
  background:#111218;
}


/* MOBILE */

@media(max-width:600px){

  #fsMiniMusicPlayer{

    width:
      calc(100vw - 20px);

    max-height:
      calc(100vh - 20px);

  }

  .fs-mini-music-playlist{
    max-height:190px;
  }

}



/* =========================================================
   LCARS MINI MUSIC PLAYER V3 - ADD MUSIC
========================================================= */

.fs-mini-music-footer{

  flex-wrap:wrap;

  justify-content:flex-start;
}


#fsMiniMusicPlaylistToggle,
#fsMiniMusicAdd{

  border:0;

  border-radius:14px;

  padding:
    8px 11px;

  color:#050505;

  font-size:9px;

  font-weight:900;

  letter-spacing:.6px;

  cursor:pointer;
}


#fsMiniMusicAdd{

  background:#ff9966;
}


#fsMiniMusicAdd:hover{

  filter:brightness(1.15);
}


#fsMiniMusicPlayer.add-music-mode
#fsMiniMusicAdd{

  background:#99ff99;

  box-shadow:
    0 0 14px
    rgba(153,255,153,.35);
}


.fs-mini-music-channel{

  margin-left:auto;
}


/*
   Muziekbestand dat tijdens ADD MODE
   geselecteerd kan worden.
*/

.fs-file-row.fs-add-music-candidate{

  box-shadow:
    inset 5px 0 0 #99ff99;

  background:
    rgba(80,120,80,.14);
}


.fs-file-row.fs-add-music-candidate
.fs-file-name{

  color:#caffca;
}


.fs-file-row.fs-add-music-candidate
.fs-file-name::after{

  content:"  + ADD";

  margin-left:10px;

  color:#99ff99;

  font-size:10px;

  font-weight:900;

  letter-spacing:1px;
}


.fs-file-row.fs-add-music-candidate
.fs-file-main{

  cursor:copy;
}



/* =========================================================
   LCARS MINI MUSIC PLAYER V4
   ADD COMPLETE MUSIC FOLDER
========================================================= */

.fs-file-row.fs-add-folder-candidate{

  box-shadow:
    inset 5px 0 0 #cc99ff;

  background:
    rgba(130,90,170,.12);

}


.fs-file-row.fs-add-folder-candidate
.fs-file-name{

  color:#e6c8ff;

}


.fs-file-row.fs-add-folder-candidate
.fs-file-name::after{

  content:"  + ADD FOLDER";

  margin-left:10px;

  color:#cc99ff;

  font-size:10px;

  font-weight:900;

  letter-spacing:1px;

}


.fs-file-row.fs-add-folder-candidate
.fs-file-main{

  cursor:copy;

}


#fsMiniMusicPlayer.scanning-music{

  box-shadow:
    0 0 45px
    rgba(204,153,255,.60),
    inset 0 0 25px
    rgba(204,153,255,.08);

}


#fsMiniMusicPlayer.scanning-music
#fsMiniMusicAdd{

  animation:
    lcarsMusicScanPulse
    .8s infinite alternate;

}


@keyframes lcarsMusicScanPulse{

  from{
    opacity:.55;
  }

  to{
    opacity:1;
  }

}



/* =========================================================
   LCARS ADD FOLDER SCAN V5
========================================================= */

.fs-file-row.fs-add-folder-scanning{

  box-shadow:
    inset 6px 0 0 #ffcc66,
    0 0 18px rgba(255,204,102,.28);

}


.fs-file-row.fs-add-folder-scanning
.fs-file-name::after{

  content:"  SCANNING..." !important;

  color:#ffcc66 !important;

}


.fs-file-row.fs-add-folder-scanning{

  animation:
    lcarsFolderScanV5
    .7s infinite alternate;

}


@keyframes lcarsFolderScanV5{

  from{
    opacity:.72;
  }

  to{
    opacity:1;
  }

}



/* =========================================================
   LCARS MUSIC DIRECTORY ACTIONS
========================================================= */

.fs-music-folder-play,
.fs-music-folder-download{

  position:relative;
  z-index:4;

}


.fs-music-folder-play::after{

  content:"";

}


.fs-music-folder-download::after{

  content:"";

}



/* =========================================================
   LCARS TRANSFER BAR TEXT FIX
   Percentage + snelheid + resterend altijd zichtbaar
========================================================= */

.fs-transfer-track{

  position:relative;

}


/*
   Laat de tekst buiten het gekleurde gedeelte
   doorlopen over de volledige transfer-track.
*/

.fs-transfer-bar{

  overflow:visible !important;

}


.fs-transfer-bar span{

  width:max-content !important;

  min-width:360px;

  left:8px !important;

  right:auto !important;

  justify-content:flex-start !important;

  color:#ffffff !important;

  font-size:11px !important;

  font-weight:900 !important;

  letter-spacing:.4px !important;

  text-shadow:
    0 1px 2px #000,
    0 0 4px #000;

  z-index:20;

}


/*
   Klein scherm iets compacter.
*/

@media(max-width:700px){

  .fs-transfer-bar span{

    min-width:280px;

    font-size:9px !important;

  }

}