body{
    margin:0;
    font-family: "Segoe UI", system-ui;
    background:#f4f7fb;
}

.container{
    max-width:1200px;
    margin:auto;
    padding:30px 20px;
}

.card{
    background:white;
    border-radius:14px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    animation:fadeUp .6s ease;
}

@keyframes fadeUp{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:none;}
}

h1,h2{
    margin:0 0 20px;
    color:#222;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.btn{
    padding:14px 18px;
    border-radius:10px;
    text-decoration:none;
    color:white;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.3s;
}

.btn:hover{transform:translateY(-2px);}

.blue{background:linear-gradient(135deg,#2196f3,#00bcd4);}
.green{background:linear-gradient(135deg,#4caf50,#8bc34a);}
.orange{background:linear-gradient(135deg,#ff9800,#ff5722);}
.purple{background:linear-gradient(135deg,#9c27b0,#673ab7);}
.red{background:linear-gradient(135deg,#f44336,#e91e63);}

.doc-card{
    padding:18px;
    border-radius:12px;
    background:#f9fbff;
    box-shadow:0 6px 15px rgba(0,0,0,.05);
    transition:.3s;
}
.doc-card:hover{transform:scale(1.03);}

.topbar{
    background:#0f172a;
    color:white;
    padding:15px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logout{
    color:white;
    text-decoration:none;
    font-weight:600;
}
.upload-loader{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    z-index:9999;
}

.upload-loader img{
    width:70px;
    margin-bottom:12px;
}

.upload-loader p{
    color:white;
    font-size:16px;
    font-weight:600;
}