body{
    margin:0;
    padding:25px;
    background:#020812;
    font-family:Arial,sans-serif;
    color:#fff;

    min-height:100vh;

    overflow-x:hidden;
    overflow-y:auto;
}







.header{

color:#00aaff;

font-size:20px;

letter-spacing:3px;

}


.dot{

display:inline-block;

width:10px;

height:10px;

background:#00ff88;

border-radius:50%;

box-shadow:0 0 15px #00ff88;

}


.live{

float:right;

color:#00ff88;

}



.heartbeat svg{

width:100%;

height:100px;

}


.heartbeat polyline{

fill:none;

stroke:#00d9ff;

stroke-width:3;

filter:
drop-shadow(0 0 8px #00d9ff);

animation:pulse 2s infinite;

}


@keyframes pulse{

0%{
opacity:.5;
}

50%{
opacity:1;
}

100%{
opacity:.5;
}

}



.meters div{

margin:15px 0;

color:#7ddcff;

}


.meters span{

display:block;

height:8px;

background:#002c55;

border-radius:10px;

overflow:hidden;

}


.meters span::after{

content:"";

display:block;

height:100%;

width:70%;

background:#00aaff;

animation:load 2s infinite alternate;

}


@keyframes load{

from{
width:30%;
}

to{
width:90%;
}

}


input{

width:100%;

margin:8px 0;

padding:14px;

background:#020812;

border:1px solid #004d99;

color:white;

border-radius:5px;

}


button{

width:100%;

padding:15px;

margin-top:20px;

background:#007bff;

border:0;

color:white;

font-weight:bold;

border-radius:5px;

box-shadow:0 0 20px #007bff;

}

.timers{

margin:25px 0;

}


.timers div{

background:#071522;

border:1px solid #063d70;

padding:12px;

margin:10px 0;

border-radius:8px;

color:#6ecbff;

display:flex;

justify-content:space-between;

}


.timers span{

color:#00eaff;

font-weight:bold;

font-family:monospace;

}

.server-monitor{

    margin:25px 0;

}



.meter{

    margin:18px 0;

}



.meter-head{

    display:flex;

    justify-content:space-between;

    color:#7fdcff;

    font-size:13px;

    margin-bottom:8px;

}



.meter-head span{

    color:#00eaff;

    font-family:monospace;

}



.bar{

    width:100%;

    height:12px;

    background:#020b16;

    border:1px solid #063b68;

    border-radius:20px;

    overflow:hidden;

}



.fill{

    height:100%;

    border-radius:20px;

    box-shadow:0 0 15px #00aaff;

    animation:pulsebar 2s infinite alternate;

}



.upload{

    width:78%;

    background:#00aaff;

}



.storage{

    width:46%;

    background:#00eaff;

}



.network{

    width:91%;

    background:#0088ff;

}



@keyframes pulsebar{

    from{

        opacity:.6;

    }

    to{

        opacity:1;

    }

}

.fill{

height:100%;

border-radius:20px;

transition:width 1.5s ease;

box-shadow:
0 0 15px #00aaff;

}


.upload{

background:#00aaff;

}


.storage{

background:#00ffaa;

}


.network{

background:#0066ff;

}

.drop-zone{

margin:25px 0;

height:180px;

border:2px dashed #008cff;

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

cursor:pointer;

background:#020b18;

}


.drop-zone:hover{

box-shadow:0 0 30px #008cff;

}

.logout-btn{

display:inline-block;

padding:12px 25px;

background:#c62828;

color:#fff;

text-decoration:none;

border-radius:12px;

transition:.2s;

}


.profile-box{
    position: relative;
    z-index: 9999;
}

.profile-box a{
    position: relative;
    z-index: 10000;
    pointer-events: auto;
}

.heartbeat{
    pointer-events: none;
}
.heartbeat{

position:relative;
z-index:1;

}

.profile-box{

display:flex;
align-items:center;
gap:15px;
position:relative;
z-index:1000;

}

.logout-btn:hover{

background:#ff3b3b;

box-shadow:0 0 15px #ff3b3b;

}

.upload-icon{

font-size:45px;

color:#00eaff;

}



.drop-zone span{

font-size:12px;

color:#799;

}



.drop-zone input{

display:none;

}



#preview{

width:150px;

height:150px;

object-fit:cover;

border-radius:10px;

display:none;

margin:auto;

}





.progress-box{

height:12px;

background:#001522;

border-radius:20px;

margin-top:20px;

overflow:hidden;

}


#progress{

height:100%;

width:0%;

background:#00eaff;

box-shadow:0 0 20px #00eaff;

transition:.4s;

}



#percent{

text-align:center;

color:#00eaff;

margin:10px;

}

.gallery{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:25px;

}




.file-card{

background:#071522;

border:1px solid #073b70;

border-radius:12px;

padding:15px;

box-shadow:

0 0 20px rgba(0,120,255,.15);

}





.file-card img{

width:100%;

height:160px;

object-fit:cover;

border-radius:8px;

}





.file-info h3{

font-size:14px;

overflow:hidden;

color:#00d9ff;

}





.file-info p{

font-size:12px;

color:#aaa;

}




.file-card a{

display:block;

text-align:center;

margin-top:15px;

padding:10px;

background:#ff1744;

color:white;

border-radius:6px;

text-decoration:none;

}

.log-panel{

max-width:900px;

}



.logs-box{

margin-top:25px;

height:400px;

overflow-y:auto;

padding:15px;

background:#020914;

border-radius:15px;

border:1px solid #073b70;

}



.log-item{

display:flex;

gap:15px;

padding:15px;

margin-bottom:12px;

background:#071827;

border-radius:10px;

animation:showLog .4s;

box-shadow:
0 0 15px rgba(0,140,255,.15);

}



.status-dot{

width:12px;

height:12px;

margin-top:7px;

border-radius:50%;

background:#00ff99;

box-shadow:
0 0 15px #00ff99;

}



.log-title{

color:#00eaff;

font-size:15px;

}



.log-user{

color:#aaa;

font-size:12px;

}



.log-time{

color:#555;

font-size:11px;

margin-top:5px;

}



@keyframes showLog{

from{

opacity:0;

transform:translateX(30px);

}


to{

opacity:1;

transform:translateX(0);

}

}

/* =========================
   NOC BUTTON SYSTEM
========================= */


.actions{

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

margin-top:30px;

}



.actions a,
button{

position:relative;

padding:14px 28px;

min-width:170px;

border-radius:12px;

border:1px solid #0077ff;

background:
linear-gradient(
135deg,
#061522,
#002b55
);

color:#00eaff;

text-decoration:none;

font-size:14px;

font-weight:bold;

letter-spacing:1px;

cursor:pointer;

overflow:hidden;

transition:.3s;

box-shadow:

0 0 15px rgba(0,150,255,.25);

}





.actions a:hover,
button:hover{


transform:translateY(-4px);


color:white;


border-color:#00ffff;


box-shadow:

0 0 20px #009dff,
0 0 40px rgba(0,220,255,.5);


}





.actions a::before,
button::before{


content:"";


position:absolute;


top:0;

left:-100%;


width:100%;

height:100%;


background:

linear-gradient(
120deg,
transparent,
rgba(0,255,255,.4),
transparent
);


transition:.5s;


}




.actions a:hover::before,
button:hover::before{


left:100%;


}






/* Upload Button */


button[name="upload"]{


background:

linear-gradient(
135deg,
#003b66,
#0055ff
);


}






/* Delete Button */


.delete{


border-color:#ff1744 !important;

color:#ff6680 !important;


}


.delete:hover{


box-shadow:

0 0 25px #ff1744 !important;


}






/* Header LIVE */


.live{


padding:6px 15px;


border-radius:20px;


background:#002b22;


color:#00ff99;


font-size:12px;


box-shadow:

0 0 15px #00ff99;


}





/* Dot Animation */


.dot{


display:inline-block;


width:10px;

height:10px;


background:#00ff99;


border-radius:50%;


margin-right:10px;


box-shadow:

0 0 15px #00ff99;


animation:pulse 1.5s infinite;


}




@keyframes pulse{


50%{

opacity:.3;

transform:scale(1.4);

}


}






/* Cards */


.card{


background:

linear-gradient(
145deg,
#071827,
#020914
);


border:1px solid #073b70;


border-radius:18px;


padding:25px;


transition:.3s;


}




.card:hover{


transform:translateY(-8px);


box-shadow:

0 0 30px rgba(0,150,255,.4);


}





.card strong{


display:block;


font-size:35px;


color:#00eaff;


margin-top:15px;


}





/* Inputs */


input,
select{


width:90%;


padding:15px;


margin:10px;


background:#020914;


border:1px solid #07549b;


border-radius:10px;


color:white;


outline:none;


}





input:focus,
select:focus{


border-color:#00eaff;


box-shadow:

0 0 20px rgba(0,220,255,.4);


}

/* SIMPLE NOC BUTTON */

.actions{

display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:25px;

}


.actions a,
button{

background:#061827;

border:1px solid #0077cc;

color:#00d9ff;

padding:12px 22px;

border-radius:8px;

text-decoration:none;

font-size:14px;

cursor:pointer;

transition:.2s;

}


.actions a:hover,
button:hover{

background:#07345c;

border-color:#00ffff;

transform:translateY(-2px);

}


/* cards light */

.card{

background:#071522;

border:1px solid #0b4b80;

border-radius:12px;

padding:20px;

transition:.2s;

}


.card:hover{

border-color:#00d9ff;

}


/* remove heavy animation */

*{

animation-duration:0s !important;

}

body{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:#020812;

}



.dashboard-box{

width:420px;

max-height:90vh;

padding:30px;

background:#071522;

border:1px solid #07549b;

border-radius:20px;

box-shadow:

0 0 40px rgba(0,140,255,.25);

text-align:center;

}




.mini-cards{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin:25px 0;

}



.mini-cards div{

background:#020b16;

border:1px solid #083b6b;

border-radius:12px;

padding:15px;

color:#8aa;


}



.mini-cards b{

display:block;

font-size:25px;

color:#00eaff;

margin-top:8px;

}





.actions{

display:flex;

flex-direction:column;

gap:10px;

}



.actions a{

padding:12px;

border-radius:10px;

background:#06233d;

border:1px solid #006eff;

color:#00eaff;

text-decoration:none;

}



.footer{

margin-top:20px;

font-size:12px;

color:#00ff99;

}

body{

margin:0;

background:#020812;

font-family:Arial;

color:white;

overflow:hidden;

}


.console{

height:100vh;

display:flex;

}



.sidebar{

width:220px;

background:#061321;

border-right:1px solid #073b70;

padding:25px;

}



.brand{

font-size:20px;

color:#00d9ff;

margin-bottom:40px;

}



.sidebar a{

display:block;

padding:14px;

margin:10px 0;

border-radius:10px;

color:#9bb;

text-decoration:none;

}



.sidebar a:hover,
.sidebar .active{

background:#07345c;

color:#00eaff;

}






.main{

flex:1;

padding:30px;

}



.top{

display:flex;

justify-content:space-between;

align-items:center;

}



.live{

color:#00ff99;

}



.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:25px;

}



.stat{

background:#071827;

border:1px solid #084a85;

border-radius:15px;

padding:25px;

}



.stat strong{

display:block;

font-size:30px;

color:#00eaff;

margin-top:15px;

}



.panel{

margin-top:30px;

background:#071827;

border:1px solid #084a85;

border-radius:15px;

padding:20px;

}



.activity{

padding:12px;

border-bottom:1px solid #123;

}

/* ===== NOC ENTERPRISE STYLE ===== */


body{

background:
linear-gradient(
90deg,
#020812 1px,
transparent 1px
),
linear-gradient(
#020812 1px,
transparent 1px
),
#020812;

background-size:40px 40px;

}



/* Sidebar Upgrade */


.sidebar{

background:

linear-gradient(
180deg,
#071827,
#020914
);

box-shadow:

10px 0 40px rgba(0,100,255,.15);

}



.sidebar a{

position:relative;

overflow:hidden;

}




.sidebar a:hover{

padding-left:25px;

}



/* Top Header */


.top{

background:#071827;

padding:20px;

border-radius:18px;

border:1px solid #084a85;

box-shadow:

0 0 25px rgba(0,150,255,.15);

}




.top h2{

color:#00eaff;

letter-spacing:2px;

}




/* Live Badge */


.live{

background:#02251c;

padding:8px 18px;

border-radius:30px;

border:1px solid #00ff99;

}





/* Stats */


.stat{

position:relative;

overflow:hidden;

}



.stat::after{

content:"";

position:absolute;

width:80px;

height:80px;

right:-30px;

top:-30px;

background:#009dff;

opacity:.08;

border-radius:50%;

}




.stat strong{

text-shadow:

0 0 15px #00d9ff;

}






/* Activity */


.activity{

background:#020b16;

margin:10px 0;

border-radius:10px;

border-left:3px solid #00ff99;

transition:.2s;

}



.activity:hover{

background:#06233d;

padding-left:20px;

}




/* Heartbeat */

.heartbeat svg{

width:100%;

height:80px;

}



.heartbeat polyline{

fill:none;

stroke:#00eaff;

stroke-width:3;

filter:

drop-shadow(0 0 8px #00eaff);

}





/* Scroll ???? ??? ?? ?? ???? */


.main{

overflow:hidden;

}





/* Brand */


.brand{

font-weight:bold;

letter-spacing:2px;

text-shadow:

0 0 15px #00eaff;

}

/* PROFILE */


.profile-box{

display:flex;

align-items:center;

gap:12px;

background:#020b16;

border:1px solid #084a85;

padding:10px 15px;

border-radius:15px;

}



.avatar{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0055aa;

color:white;

font-size:20px;

font-weight:bold;

box-shadow:

0 0 15px #008cff;

}



.profile-info{

display:flex;

flex-direction:column;

}


.profile-info strong{

color:#00eaff;

}


.profile-info span{

font-size:12px;

color:#00ff99;

}



.profile-box a{

padding:8px 15px;

border-radius:8px;

background:#071827;

border:1px solid #ff1744;

color:#ff6680;

text-decoration:none;

font-size:12px;

}



.profile-box a:hover{

background:#30101a;

}

.upload-panel{

max-width:600px;

margin-top: -18px;

}

.back-small{

display:inline-block;

margin-top:12px;

padding:8px 18px;

background:#0b2236;

border:1px solid #2b6cff;

border-radius:8px;

color:#fff;

text-decoration:none;

font-size:13px;

transition:.25s;

}

.back-top{

text-decoration:none;

color:#fff;

cursor:pointer;

transition:.3s;

}

.back-top:hover{

color:#00bfff;

text-shadow:0 0 10px #00bfff;

}

.back-small:hover{

background:#2b6cff;

box-shadow:0 0 10px #2b6cff;

}

.drop-zone{

height:170px;

margin:20px 0;

border:2px dashed #0077ff;

border-radius:15px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:#020914;

}



.drop-zone input{

display:none;

}



.drop-zone label{

font-size:20px;

color:#00eaff;

cursor:pointer;

}



#fileName{

color:#aaa;

font-size:13px;

}




.upload-status{

height:12px;

background:#020812;

border-radius:20px;

overflow:hidden;

border:1px solid #084a85;

}



#progress{

height:100%;

width:0;

background:#00eaff;

transition:.3s;

}




.message{

padding:12px;

background:#062b22;

border:1px solid #00ff99;

color:#00ff99;

border-radius:10px;

}

.file-box{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:15px;

}



.file-card{


background:#071827;

border:1px solid #084a85;

border-radius:15px;

padding:20px;


}


.file-name{

color:#00eaff;

font-size:16px;

margin-bottom:15px;

}


.file-info{

font-size:12px;

color:#aaa;

line-height:25px;

}



.file-actions{

display:flex;

gap:8px;

margin-top:15px;

}



.file-actions a{


font-size:12px;

padding:8px;

border-radius:8px;

background:#020914;

border:1px solid #07549b;

color:#00eaff;

text-decoration:none;


}

.file-tools{

margin:20px 0;

}


.file-tools input{

width:80%;

}



.file-box{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:15px;

}



.file-card{

background:#071827;

border:1px solid #084a85;

border-radius:15px;

padding:15px;

transition:.2s;

}



.file-card:hover{

border-color:#00eaff;

transform:translateY(-3px);

}



.preview{

width:100%;

height:130px;

object-fit:cover;

border-radius:10px;

}



.file-icon{

font-size:70px;

text-align:center;

padding:25px;

}



.file-name{

color:#00eaff;

margin-top:15px;

}



.file-info{

color:#aaa;

font-size:13px;

line-height:25px;

margin-top:10px;

}



.file-actions{

display:flex;

gap:5px;

margin-top:15px;

}



.file-actions a{

font-size:12px;

padding:8px;

}

.folder-create{

display:flex;

gap:10px;

margin:20px 0;

}



.folder-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}



.folder-card{


background:#071827;

border:1px solid #084a85;

border-radius:18px;

padding:25px;

text-align:center;

transition:.2s;


}



.folder-card:hover{


border-color:#00eaff;


transform:translateY(-5px);


box-shadow:

0 0 25px rgba(0,200,255,.2);


}



.folder-icon{


font-size:55px;


}



.folder-name{


color:#00eaff;

font-size:18px;

margin:15px;


}



.folder-info{


color:#aaa;

font-size:13px;


}



.folder-actions{


display:flex;

justify-content:center;

gap:10px;

margin-top:20px;


}



.folder-actions a{


padding:8px 15px;

background:#020914;

border:1px solid #07549b;

border-radius:8px;

color:#00eaff;

text-decoration:none;

font-size:12px;


}

/* ONLY FOLDER PAGE */

.folder-page .folder-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

max-height:500px;

overflow-y:auto;

padding:15px;

}



.folder-page .folder-card{

min-width:0;

overflow:hidden;

}



.folder-page .folder-name{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}



.folder-page{

overflow:visible !important;

padding-bottom:30px;

}



.folder-create{

display:flex;

flex-direction:column;

gap:12px;

width:100%;

margin-bottom:20px;

}



.folder-input-box{

width:100%;

display:flex;

align-items:center;

gap:12px;

background:#081b2d;

border:1px solid #006cff;

border-radius:15px;

padding:10px 15px;

box-sizing:border-box;

}



.folder-input-box input{

width:100%;

height:45px;

background:#102a40;

border:1px solid #24557d;

border-radius:10px;

padding:0 15px;

color:white;

font-size:16px;

outline:none;

display:block;

}



.folder-create button{

width:100%;

height:50px;

background:#006cff;

border:none;

color:white;

border-radius:15px;

cursor:pointer;

font-size:16px;

}



.folder-wrapper{

width:100%;

}



.folder-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:20px;

padding:10px 0;

}



.back-btn{

display:inline-flex;

margin-top:15px;

padding:12px 25px;

border-radius:15px;

background:#071827;

border:1px solid #006cff;

color:white;

text-decoration:none;

}



.back-btn:hover{

background:#006cff;

box-shadow:0 0 20px #006cff;

}



.folder-page .folder-create{

display:flex;

gap:15px;

margin-bottom:20px;

}



.folder-page .folder-create input{

flex:1;

}




@media(max-width:800px){


.folder-page .folder-grid{

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:500px){


.folder-page .folder-grid{

grid-template-columns:1fr;

}


}

.folder-wrapper{
    width:100%;
    overflow:hidden;
}


.folder-wrapper .folder-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    max-height:450px;
    overflow-y:auto;
    padding:15px;
    box-sizing:border-box;
}


.folder-wrapper .folder-card{
    min-width:0;
    overflow:hidden;
}


.folder-wrapper .folder-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.folder-page .folder-wrapper{

width:100%;

overflow:hidden;

}



.folder-page .folder-grid{

display:grid !important;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:20px;

width:100%;

max-height:450px;

overflow-y:auto;

padding:10px;

box-sizing:border-box;

}



.folder-page .folder-card{

width:100%;

box-sizing:border-box;

overflow:hidden;

}



.folder-page .folder-name{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

body{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:40px 20px;

box-sizing:border-box;

overflow-y:auto;

}



.folder-page{

width:100%;

max-width:900px;

margin:auto;

padding:35px;

box-sizing:border-box;

overflow:visible !important;

}





.folder-create{

margin-top:25px;

}



.folder-input-box{

height:55px;

box-sizing:border-box;

}



.folder-input-box input{

display:block !important;

visibility:visible !important;

opacity:1 !important;

height:40px !important;

background:#102a40 !important;

color:white !important;

}



.back-btn{

display:inline-flex;

margin-top:10px;

margin-bottom:20px;

}



.folder-wrapper{

margin-bottom:20px;

}



.folder-grid{

max-height:none;

overflow:visible;

}

<style>

.noc-panel.file-page{

    width:95%;
    max-width:1300px;

    margin:30px auto;

    padding:30px;

    box-sizing:border-box;
}

.upload-btn{

width:100%;

padding:15px;

margin-top:20px;

background:#0078ff;

color:#fff;

border:none;

border-radius:12px;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.upload-btn:hover{

background:#0094ff;

box-shadow:0 0 20px #0078ff;

}



.folder-btn{

display:block;

margin-top:20px;

padding:14px;

text-align:center;

background:#08345d;

color:#fff;

text-decoration:none;

border-radius:12px;

transition:.3s;

}

.folder-btn:hover{

background:#006cff;

}



.back-btn{

display:block;

margin-top:15px;

padding:14px;

text-align:center;

background:#151d2d;

border:1px solid #0078ff;

color:#fff;

text-decoration:none;

border-radius:12px;

transition:.3s;

}

.back-btn:hover{

background:#0078ff;

box-shadow:0 0 20px #0078ff;

}

.file-page .file-card{

width:100%;

box-sizing:border-box;

overflow:hidden;

}



.file-page .preview{

width:100%;

height:180px;

object-fit:cover;

border-radius:12px;

}



.file-page .file-actions{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:15px;

}



.file-page .bottom-buttons{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}



.file-page .bottom-buttons a{

padding:12px 20px;

border-radius:12px;

text-decoration:none;

}



@media(max-width:600px){

.file-page{

    display:block;

    width:100%;
}	


.file-page .file-box{

grid-template-columns:1fr;

}

}



/* CARD */

.file-card{

background:#071827;

border:1px solid #12395c;

border-radius:18px;

padding:18px;

box-sizing:border-box;

overflow:hidden;

transition:.3s;

}



.file-card:hover{

border-color:#008cff;

box-shadow:0 0 20px #006cff;

transform:translateY(-3px);

}



/* IMAGE PREVIEW */

.preview{

width:100%;

height:150px;

object-fit:cover;

border-radius:12px;

margin-bottom:12px;

}




.file-icon{

height:150px;

display:flex;

align-items:center;

justify-content:center;

font-size:60px;

}




/* FILE NAME */

.file-name{

color:white;

font-size:15px;

font-weight:bold;

margin-bottom:10px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}




.file-info{

color:#8ab4ff;

font-size:13px;

line-height:22px;

margin-bottom:15px;

}



/* BUTTONS */


.file-actions{

display:flex;

gap:8px;

flex-wrap:wrap;

}



.file-actions a{


flex:1;

min-width:70px;

text-align:center;

background:#06345d;

color:white;

padding:9px 8px;

border-radius:10px;

font-size:12px;

text-decoration:none;

transition:.3s;


}



.file-actions a:hover{

background:#006cff;

box-shadow:0 0 12px #006cff;

}





/* SEARCH */

.file-tools{

margin-bottom:20px;

}



.file-tools input{


width:100%;

height:42px;

box-sizing:border-box;

background:#081b2d;

border:1px solid #006cff;

border-radius:12px;

padding:0 15px;

color:white;

font-size:15px;


}




/* CURRENT FOLDER */


.current-folder{


background:#081b2d;

border:1px solid #006cff;

padding:12px;

border-radius:12px;

margin-bottom:15px;

color:white;


}



/* LINKS ????? */


.file-page > a{


display:inline-flex;

margin-top:20px;

padding:12px 25px;

border-radius:15px;

background:#071827;

border:1px solid #006cff;

color:white;

text-decoration:none;


}



.file-page > a:hover{

background:#006cff;

}





@media(max-width:600px){

.file-box{

grid-template-columns:1fr;

}


.file-actions a{

min-width:100%;

}


}
.file-box{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));

gap:25px;

width:100%;

max-height:550px;

overflow-y:auto;

padding:15px;

box-sizing:border-box;

}



.file-card{

min-height:360px;

display:flex;

flex-direction:column;

justify-content:flex-start;

}



.preview,
.file-icon{

height:160px;

margin-bottom:15px;

flex-shrink:0;

}



.file-name{

margin-top:5px;

min-height:25px;

}



.file-info{

min-height:45px;

}



.file-actions{

margin-top:auto;

padding-top:15px;

}



.file-actions a{

display:flex;

align-items:center;

justify-content:center;

height:35px;

}





.file-page{

padding-bottom:40px;

}



.bottom-buttons{

margin-top:30px;

padding-bottom:20px;

}




</style>

.bottom-buttons{

display:flex;

gap:15px;

margin-top:20px;

flex-wrap:wrap;

}


.bottom-buttons a{

padding:12px 25px;

background:#071827;

border:1px solid #006cff;

border-radius:15px;

color:white;

text-decoration:none;

}


.bottom-buttons a:hover{

background:#006cff;

}

.preview{

width:100%;
height:150px;

}

.noc-panel.file-page{

    width:95%;
    max-width:1300px;

    margin:0 auto;

    box-sizing:border-box;

}