/* ---------------- LOGIN PAGE ---------------- */

#login{
position:fixed !important;
inset:0 !important;

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

background:linear-gradient(135deg,#ff8aa3,#b7a7ff,#7ed6c4) !important;
background-size:400% 400% !important;

animation:loginGradient 20s ease infinite;
}


@keyframes loginGradient{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

#login form{

width:320px;
padding:40px;

border-radius:20px;

background:rgba(255,255,255,0.75);
backdrop-filter:blur(14px);

box-shadow:
0 20px 60px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.5);

text-align:center;
}

#login img{
width:60px;
margin-bottom:12px;
}

#login h1{
font-size:24px;
margin-bottom:25px;
font-weight:600;
}

#login .input{

border-radius:10px;
border:1px solid rgba(0,0,0,0.1);

padding:10px 12px;
margin-bottom:12px;

transition:all .2s;
}

#login .input:focus{

outline:none;
border-color:#6a7cff;

box-shadow:0 0 0 2px rgba(106,124,255,0.2);
}

#login .button{

border-radius:10px;
border:none;

padding:10px;

font-weight:600;
color:white;

background:linear-gradient(90deg,#6a7cff,#61d3b3);

transition:all .25s;
}

#login .button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,0.15);
}


/* ---------------- LOGGED IN APP BACKGROUND ---------------- */

#app{

background:linear-gradient(135deg,#ff8aa3,#b7a7ff,#7ed6c4);
background-size:400% 400%;

animation:appGradient 25s ease infinite;
}

@keyframes appGradient{

0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}

}


/* ---------------- SIDEBAR ---------------- */

#app nav{

background:rgba(255,255,255,0.35);

backdrop-filter:blur(18px);

border-right:1px solid rgba(255,255,255,0.3);

box-shadow:4px 0 30px rgba(0,0,0,0.05);
}

#app nav .action{

border-radius:10px;

margin:6px 10px;
padding:8px;

transition:all .2s;
}

#app nav .action:hover{

background:rgba(255,255,255,0.4);

transform:translateX(4px);
}


/* ---------------- HEADER / TOOLBAR ---------------- */

#app header{

background:rgba(255,255,255,0.35);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,0.3);

box-shadow:0 10px 30px rgba(0,0,0,0.05);
}


/* ---------------- SEARCH BAR ---------------- */

#app #search input{

border-radius:20px;

border:none;

padding:10px 14px;

background:rgba(255,255,255,0.6);

box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);

transition:all .2s;
}

#app #search input:focus{

outline:none;

background:white;

box-shadow:0 0 0 2px rgba(120,140,255,0.25);
}


/* ---------------- FILE GRID ---------------- */

#app .item{

border-radius:16px;

padding:14px;

background:rgba(255,255,255,0.35);

backdrop-filter:blur(10px);

transition:all .25s;

box-shadow:0 4px 20px rgba(0,0,0,0.05);
}

#app .item:hover{

transform:translateY(-6px);

background:rgba(255,255,255,0.55);

box-shadow:0 12px 30px rgba(0,0,0,0.12);
}


/* ---------------- FOLDER ICON ---------------- */

#app .item i.material-icons{

font-size:36px;

color:#f2a93b;
}


/* ---------------- FILE NAME ---------------- */

#app .item .name{

font-weight:500;
}


/* ---------------- BUTTONS ---------------- */

#app button{

border-radius:10px;
}


/* ---------------- MODALS ---------------- */

#app .modal{

background:rgba(255,255,255,0.65);

backdrop-filter:blur(16px);

border-radius:18px;
}


/* ---------------- SCROLLBAR ---------------- */

::-webkit-scrollbar{

width:8px;
}

::-webkit-scrollbar-thumb{

background:rgba(120,120,120,0.35);

border-radius:10px;
}