* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f5f7fb;

    color: #172033;

}


/* ==============================
   TOPBAR
============================== */

.topbar {

    height: 72px;

    background: white;

    border-bottom:
        1px solid #e7eaf0;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding:
        0 28px;

}


.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 21px;

    font-weight: 800;

}


.brand-icon {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    background: #1f8f5f;

    color: white;

    display: grid;

    place-items: center;

}


.top-actions {

    display: flex;

    gap: 12px;

    align-items: center;

}


.search {

    width: 360px;

    border:
        1px solid #dfe4ec;

    border-radius: 12px;

    padding: 11px 14px;

    outline: none;

}


.search:focus {

    border-color: #1f8f5f;

}


/* ==============================
   BUTTON
============================== */

.btn {

    border:
        1px solid #dfe4ec;

    background: white;

    color: #172033;

    border-radius: 11px;

    padding:
        10px 16px;

    cursor: pointer;

    font-weight: 700;

}


.primary {

    background: #1f8f5f;

    border-color: #1f8f5f;

    color: white;

}


.big {

    padding:
        13px 20px;

}


/* ==============================
   LAYOUT
============================== */

.layout {

    display: flex;

    min-height:
        calc(100vh - 72px);

}


/* ==============================
   SIDEBAR
============================== */

.sidebar {

    width: 235px;

    background: white;

    border-right:
        1px solid #e7eaf0;

    padding: 22px 14px;

    display: flex;

    flex-direction: column;

}


.nav {

    border: 0;

    background: transparent;

    text-align: left;

    padding: 13px 15px;

    border-radius: 10px;

    margin-bottom: 4px;

    color: #5b6474;

    cursor: pointer;

    display: flex;

    gap: 13px;

    align-items: center;

}


.nav:hover,
.nav.active {

    background: #eaf7f0;

    color: #167448;

    font-weight: 700;

}


.side-bottom {

    margin-top: auto;

    padding:
        18px 10px 8px;

}


.storage-title {

    display: flex;

    justify-content:
        space-between;

    font-size: 13px;

    margin-bottom: 9px;

}


.progress {

    height: 7px;

    background: #e8edf1;

    border-radius: 99px;

    overflow: hidden;

}


.progress i {

    display: block;

    height: 100%;

    width: 0;

    background: #1f8f5f;

}


/* ==============================
   MAIN
============================== */

.main {

    flex: 1;

    padding: 30px;

    max-width: 1500px;

    margin: auto;

    width: 100%;

}


/* ==============================
   HERO
============================== */

.hero {

    background:
        linear-gradient(
            135deg,
            #173d2c,
            #1f8f5f
        );

    color: white;

    border-radius: 18px;

    padding: 30px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

}


.eyebrow {

    font-size: 11px;

    letter-spacing: 1.8px;

    opacity: .7;

    margin-bottom: 8px;

}


.hero h1 {

    font-size: 30px;

    margin-bottom: 8px;

}


.hero p:last-child {

    opacity: .86;

}


/* ==============================
   DROPZONE
============================== */

.dropzone {

    margin-top: 22px;

    border:
        2px dashed #b8c8c0;

    background: #fbfefc;

    border-radius: 18px;

    padding: 34px;

    text-align: center;

}


.dropzone.over {

    border-color: #1f8f5f;

    background: #effaf4;

}


.drop-icon {

    width: 50px;

    height: 50px;

    margin:
        auto auto 12px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: #eaf7f0;

    color: #1f8f5f;

    font-size: 25px;

    font-weight: 800;

}


.dropzone h2 {

    font-size: 20px;

}


.dropzone p {

    color: #7c8797;

    margin:
        6px 0 16px;

}


/* ==============================
   FILE SECTION
============================== */

.section-head {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin:
        30px 0 15px;

}


.section-head h2 {

    display: inline;

    margin-right: 10px;

    font-size: 21px;

}


.section-head span {

    color: #8a93a3;

    font-size: 13px;

}


.icon-btn {

    border:
        1px solid #dfe4ec;

    background: white;

    border-radius: 9px;

    padding:
        7px 11px;

    cursor: pointer;

    font-size: 18px;

}


/* ==============================
   FILE GRID
============================== */

.files-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(245px, 1fr)
        );

    gap: 15px;

}


.file-card {

    background: white;

    border:
        1px solid #e7eaf0;

    border-radius: 14px;

    overflow: hidden;

}


.thumb {

    height: 150px;

    background: #f0f3f7;

    display: grid;

    place-items: center;

    overflow: hidden;

}


.thumb img,
.thumb video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.file-icon {

    font-size: 45px;

}


.file-info {

    padding: 13px;

}


.file-name {

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.meta {

    color: #8992a1;

    font-size: 12px;

    margin-top: 5px;

}


.actions {

    display: flex;

    gap: 7px;

    margin-top: 12px;

}


.actions a,
.actions button {

    flex: 1;

    text-align: center;

    padding: 8px;

    border-radius: 8px;

    border:
        1px solid #e0e4ea;

    background: white;

    text-decoration: none;

    color: #334052;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

}


.actions .danger {

    color: #c43d4b;

}


/* ==============================
   EMPTY
============================== */

.empty {

    text-align: center;

    padding: 65px 10px;

    color: #8b94a2;

}


.empty div {

    font-size: 48px;

}


.empty h3 {

    color: #344052;

    margin: 10px;

}


.hidden {

    display: none !important;

}


/* ==============================
   MODAL
============================== */

.modal {

    position: fixed;

    inset: 0;

    background: #0008;

    z-index: 50;

    display: grid;

    place-items: center;

    padding: 20px;

}


.modal-card {

    width:
        min(900px, 95vw);

    max-height: 90vh;

    overflow: auto;

    background: white;

    border-radius: 16px;

    padding: 20px;

    position: relative;

}


.modal-close {

    position: absolute;

    right: 12px;

    top: 10px;

    border: 0;

    background: #eef1f5;

    border-radius: 50%;

    width: 34px;

    height: 34px;

    cursor: pointer;

    font-size: 23px;

}


/* ==============================
   MOBILE
============================== */

@media(max-width:800px) {

    .sidebar {

        width: 64px;

        padding:
            15px 8px;

    }

    .nav span {

        display: none;

    }

    .nav {

        justify-content: center;

    }

    .main {

        padding: 18px;

    }

    .hero {

        flex-direction: column;

        align-items:
            flex-start;

    }

    .search {

        width: 150px;

    }

}