/* data manager */

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

/* cards */

.data-manager-card{
    padding:24px;
    border-radius:18px;
    background:var(--card);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:.3s;
}

.data-manager-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}

.data-manager-card h3{
    margin-bottom:10px;
    color:var(--primary);
    font-size:20px;
}

.data-manager-card p{
    color:var(--text-light);
    margin-bottom:18px;
    line-height:1.6;
    font-size:14px;
}

/* file input */

#importFileInput{
    display:block;
    width:100%;
    padding:14px;
    margin:14px 0;
    border:2px dashed var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.03);
    cursor:pointer;
    transition:.3s;
    color:var(--text-light);
}

#importFileInput:hover{
    border-color:var(--primary);
    background:rgba(56,189,248,.08);
}

/* drag state */

.file-drag-active{
    border-color:var(--primary) !important;
    background:rgba(56,189,248,.12) !important;
}

/* buttons */

#exportDataBtn,
#importDataBtn{
    width:100%;
    padding:12px 18px;
    margin-top:8px;
}

/* filename */

.file-name-display{
    margin-top:10px;
    font-size:13px;
    color:var(--text-light);
    word-break:break-word;
}

/* status */

.import-success{
    color:var(--success);
    font-size:13px;
    margin-top:8px;
}

.import-error{
    color:var(--danger);
    font-size:13px;
    margin-top:8px;
}

/* mobile */

@media(max-width:768px){

    .data-manager-grid{
        grid-template-columns:1fr;
    }

    .data-manager-card{
        padding:18px;
    }

    .data-manager-card h3{
        font-size:18px;
    }

    .data-manager-card p{
        font-size:13px;
    }
}