/* General body */
body { font-family: 'Inter', sans-serif; background: #f3f4f6; margin: 0; padding: 30px; color: #333; }
h1 { text-align: center; margin-bottom: 40px; font-size: 2rem; color: #111; }

/* Folder styles */
.folder { margin-bottom: 10px; border-left: 3px solid #17314d; }
.folder-header { padding: 10px 15px; background: #17314d; color: #fff; font-weight: 600; cursor: pointer; border-radius: 5px; margin-bottom: 5px; transition: background 0.3s; }
.folder-header:hover { background: #0056b3; }
.folder-content { display: none; padding-left: 20px; }
.back-btn { padding: 5px 10px; margin-bottom: 10px; background: #f0f0f0; cursor: pointer; border-radius: 5px; color: #17314d; font-weight: 500; display: inline-block; }
.back-btn:hover { background: #e0e0e0; }

/* File item */
.file-item { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.file-title { flex: 1; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-btn { text-decoration: none; background: #007bff; color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 0.85rem; transition: background 0.3s; }
.file-btn:hover { background: #0056b3; }

/* Loading screen */
#loading-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 1.5rem;
    color: #083e77;
    flex-direction: column;
}
.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #17314d;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }