:root{
  --sidebar-w: 240px;
  --primary:#4f46e5;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f6fa;margin:0}

/* AUTH */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:20px}
.auth-card{background:#fff;border-radius:14px;padding:32px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.2)}

/* APP */
.app-wrap{display:flex;min-height:100vh}
.app-sidebar{width:var(--sidebar-w);background:#111827;color:#cbd5e1;padding:20px 0;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}
.app-sidebar .brand{color:#fff;font-weight:700;font-size:1.15rem;padding:0 20px 20px;border-bottom:1px solid #1f2937}
.app-sidebar nav{padding:14px 0}
.app-sidebar a{display:flex;gap:10px;align-items:center;padding:10px 20px;color:#cbd5e1;text-decoration:none;font-size:.92rem}
.app-sidebar a:hover{background:#1f2937;color:#fff}
.app-sidebar hr{border-color:#1f2937;margin:10px 0}
.app-main{flex:1;margin-left:var(--sidebar-w)}
.app-topbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:12px 20px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.app-content{padding:24px}

/* CARDS */
.stat-card{background:#fff;border-radius:10px;padding:16px;display:flex;align-items:center;gap:14px;border-left:4px solid #4f46e5;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.stat-card i{font-size:1.6rem}
.stat-value{font-size:1.4rem;font-weight:700;line-height:1}
.stat-label{color:#6b7280;font-size:.8rem}
.card{border:none;box-shadow:0 2px 8px rgba(0,0,0,.05);border-radius:10px}
.card-header{background:#fff;border-bottom:1px solid #f1f3f6;font-weight:600}

/* DARK MODE */
[data-theme="dark"] body{background:#0f172a;color:#e2e8f0}
[data-theme="dark"] .app-topbar,[data-theme="dark"] .card,[data-theme="dark"] .card-header{background:#1e293b;color:#e2e8f0;border-color:#334155}
[data-theme="dark"] .stat-card{background:#1e293b;color:#e2e8f0}

/* RESPONSIVE */
@media (max-width:992px){
  .app-sidebar{transform:translateX(-100%);transition:.2s;z-index:30}
  .app-sidebar.open{transform:none}
  .app-main{margin-left:0}
}

/* ================== FILE MANAGER ================== */
.dropzone{
  border:2px dashed #cbd5e1;border-radius:12px;padding:26px;text-align:center;
  color:#6b7280;cursor:pointer;transition:.2s;background:#fff;
}
.dropzone:hover,.dropzone.dragover{border-color:#4f46e5;background:#eef2ff;color:#4f46e5}
.dropzone i{font-size:2rem;margin-bottom:6px;display:block}

.page-head h5{margin:0}
.breadcrumb{background:none;padding:0;margin:0}
.breadcrumb-item a{text-decoration:none}

/* Folder grid */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.folder-card{
  position:relative;background:#fff;border-radius:10px;padding:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);transition:.2s
}
.folder-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.folder-card .folder-link{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#111827}
.folder-card .folder-link i{font-size:2rem}
.folder-card .folder-name{font-size:.85rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.folder-menu{position:absolute;top:4px;right:4px}

/* File grid */
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.file-grid .file-card{
  position:relative;background:#fff;border-radius:10px;padding:12px;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.05);transition:.2s;display:flex;flex-direction:column;
}
.file-grid .file-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.file-grid .file-card.selected{outline:2px solid #4f46e5;background:#eef2ff}
.file-grid .file-check{position:absolute;top:6px;left:6px;z-index:2}
.file-grid .file-thumb{
  display:flex;align-items:center;justify-content:center;
  height:120px;background:#f3f4f6;border-radius:8px;overflow:hidden;margin-bottom:8px;
}
.file-grid .file-thumb img{width:100%;height:100%;object-fit:cover}
.file-grid .file-name{font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-grid .file-sub{font-size:.72rem;color:#6b7280}
.file-grid .file-menu{position:absolute;top:4px;right:4px}

/* File list */
.file-list .file-card{
  position:relative;background:#fff;border-radius:8px;padding:8px 10px;margin-bottom:6px;
  display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:.15s;cursor:pointer;
}
.file-list .file-card:hover{background:#f9fafb}
.file-list .file-card.selected{background:#eef2ff;outline:2px solid #4f46e5}
.file-list .file-thumb{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:6px;overflow:hidden;flex-shrink:0}
.file-list .file-thumb img{width:100%;height:100%;object-fit:cover}
.file-list .file-meta{flex:1;min-width:0}
.file-list .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .file-sub{font-size:.75rem;color:#6b7280}
.file-list .file-menu{display:flex;gap:4px}

/* Upload list */
.upload-item{background:#fff;border-radius:8px;padding:8px 12px;margin-bottom:6px;box-shadow:0 1px 3px rgba(0,0,0,.05)}

/* Dark mode */
[data-theme="dark"] .dropzone{background:#1e293b;border-color:#334155;color:#94a3b8}
[data-theme="dark"] .folder-card,
[data-theme="dark"] .file-grid .file-card,
[data-theme="dark"] .file-list .file-card,
[data-theme="dark"] .upload-item{background:#1e293b;color:#e2e8f0}
[data-theme="dark"] .file-grid .file-thumb,
[data-theme="dark"] .file-list .file-thumb{background:#0f172a}
[data-theme="dark"] .breadcrumb-item a{color:#93c5fd}

/* PDF preview container */
.pdf-container{background:#e5e7eb;padding:8px 0}
[data-theme="dark"] .pdf-container{background:#111827}

/* DOCX preview tweak */
.docx-wrapper{background:#e5e7eb !important;padding:10px 0}
.docx{background:#fff}
[data-theme="dark"] .docx-wrapper{background:#111827 !important}
[data-theme="dark"] .docx{background:#fff;color:#000}

/* XLSX tab */
.preview-body .nav-tabs .nav-link{font-size:.85rem}
.preview-body table td,.preview-body table th{padding:.25rem .5rem !important}