:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#152238;
  --muted:#6b7890;
  --line:#e7edf6;
  --primary:#3457ff;
  --primary2:#18a0fb;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#f59e0b;
  --shadow:0 20px 60px rgba(17,35,80,.09);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(135deg,#eef5ff 0%,#f7f9fc 45%,#f5fbff 100%);color:var(--text);min-height:100vh}
a{text-decoration:none}.min-w-0{min-width:0}
.app-shell{min-height:100vh;display:flex;padding:18px;gap:18px}
.sidebar{width:286px;min-width:286px;background:rgba(255,255,255,.86);backdrop-filter:blur(22px);border:1px solid rgba(231,237,246,.95);border-radius:28px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;position:sticky;top:18px;height:calc(100vh - 36px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}.brand:hover{color:var(--text)}
.brand-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;box-shadow:0 12px 26px rgba(52,87,255,.25)}
.brand-icon i{font-size:25px}.brand strong{display:block;font-size:1.05rem}.brand small{display:block;color:var(--muted);font-size:.78rem}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 14px;color:#506078;font-weight:700;transition:.15s}.sidebar .nav-link i{font-size:21px}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background:#eef3ff;color:var(--primary)}
.sidebar-user{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:10px}
.avatar{width:42px;height:42px;border-radius:15px;background:#ecf2ff;color:var(--primary);display:grid;place-items:center;font-weight:900;border:1px solid #dbe7ff}.avatar.small{width:36px;height:36px;border-radius:13px}
.logout{margin-left:auto;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#f7f9fc;color:#7a869a}.logout:hover{background:#fee2e2;color:var(--danger)}
.main-content{flex:1;min-width:0;padding:12px 6px 30px}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:6px 0 22px}.page-header h1{font-size:2.1rem;margin:0;font-weight:900;letter-spacing:-.04em}.eyebrow{text-transform:uppercase;font-weight:900;color:var(--primary);font-size:.72rem;letter-spacing:.14em}.header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.btn{border-radius:14px;font-weight:800}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));border:0;box-shadow:0 12px 28px rgba(52,87,255,.22)}.btn-light{background:#fff;border:1px solid var(--line)}
.breadcrumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted)}.breadcrumbs a{color:#5d6a80;font-weight:700}.breadcrumbs a:hover{color:var(--primary)}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}.stat-card{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 36px rgba(17,35,80,.06);padding:18px;display:flex;align-items:center;gap:14px}.stat-card span{width:48px;height:48px;border-radius:18px;background:#eef3ff;color:var(--primary);display:grid;place-items:center}.stat-card span i{font-size:25px}.stat-card strong{display:block;font-size:1.35rem;line-height:1;font-weight:900}.stat-card small{color:var(--muted);font-weight:700}
.toolbar-card,.files-card{background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:26px}.toolbar-card{padding:12px;margin-bottom:14px;display:flex;align-items:center;gap:12px}.search-box{flex:1;display:flex;align-items:center;gap:10px;background:#f7f9fc;border:1px solid var(--line);border-radius:18px;padding:0 14px}.search-box i{color:#7a869a;font-size:20px}.search-box input{border:0;background:transparent;outline:0;width:100%;padding:14px 2px;font-weight:700;color:var(--text)}
.files-card{overflow:hidden}.files-table{margin:0}.files-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#718096;background:#f8fbff;border-bottom:1px solid var(--line);padding:15px 18px}.files-table td{padding:15px 18px;border-color:#eef2f7;color:#40506a}.file-name-cell{display:flex;align-items:center;gap:12px}.file-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:#f2f5fa;color:#62728a;flex:none}.file-icon.folder{background:#fff6db;color:#d98a00}.file-icon i{font-size:25px}.file-link{font-weight:900;color:var(--text);max-width:520px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-link:hover{color:var(--primary)}
.badge-soft{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 10px;font-weight:900;font-size:.78rem}.badge-soft.folder{background:#eafaf0;color:#147a3d}.badge-soft.file{background:#eef3ff;color:var(--primary)}.badge-soft.danger{background:#fee2e2;color:#b91c1c}.action-btn{width:36px;height:36px;padding:0}
.empty-state{text-align:center;padding:64px 20px}.empty-icon{width:88px;height:88px;border-radius:30px;background:#eef3ff;color:var(--primary);display:grid;place-items:center;margin:0 auto 18px}.empty-icon i{font-size:48px}.empty-state h3{font-weight:900;letter-spacing:-.02em}.empty-state p{color:var(--muted)}
.modern-modal{border:0;border-radius:26px;box-shadow:0 26px 80px rgba(17,35,80,.24);overflow:hidden}.modal-header,.modal-footer{border-color:var(--line)}.form-control,.form-select{border-radius:14px;border-color:#dfe7f3;padding:.78rem .9rem;font-weight:700}.form-control:focus,.form-select:focus{box-shadow:0 0 0 .25rem rgba(52,87,255,.12);border-color:#9bb0ff}
.upload-drop{border:2px dashed #b9c8ff;background:linear-gradient(135deg,#f7f9ff,#ffffff);border-radius:24px;padding:34px 18px;text-align:center;transition:.15s}.upload-drop.dragover{background:#eef3ff;border-color:var(--primary)}.upload-drop>i{font-size:52px;color:var(--primary)}.upload-drop h4{font-weight:900;margin:8px 0 4px}.upload-drop p{color:var(--muted)}.selected-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.selected-files .chip{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:7px 11px;font-size:.82rem;font-weight:800;color:#506078}.progress{height:18px;border-radius:999px;background:#e7edf6}.progress-bar{font-size:.72rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--primary2))}
.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top left,#dce8ff 0,#f5f8fc 36%,#eef6ff 100%)}.login-card{width:100%;max-width:440px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:32px}.login-card h1{font-weight:900;letter-spacing:-.04em}.input-icon{position:relative}.input-icon i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8090aa}.input-icon .form-control{padding-left:42px}.demo-box{border-radius:18px;background:#f8fbff;border:1px solid var(--line);padding:12px 14px;color:#506078;font-size:.9rem}
@media (max-width: 992px){.app-shell{display:block;padding:10px}.sidebar{position:relative;top:0;width:100%;min-width:0;height:auto;margin-bottom:12px;border-radius:24px}.sidebar .nav{flex-direction:row!important;overflow-x:auto;padding-bottom:2px}.sidebar .nav-link{white-space:nowrap}.sidebar-user{margin-top:14px}.main-content{padding:4px}.page-header{flex-direction:column}.header-actions{width:100%;justify-content:stretch}.header-actions .btn{flex:1}.stats-grid{grid-template-columns:1fr}.toolbar-card{flex-direction:column;align-items:stretch}.files-table thead{display:none}.files-table,.files-table tbody,.files-table tr,.files-table td{display:block;width:100%}.files-table tr{border-bottom:1px solid var(--line);padding:12px}.files-table td{border:0;padding:6px 4px}.files-table td:not(:first-child){display:flex;justify-content:space-between;align-items:center}.files-table td:nth-child(2)::before{content:'Type';font-weight:900;color:#718096}.files-table td:nth-child(3)::before{content:'Taille';font-weight:900;color:#718096}.files-table td:nth-child(4)::before{content:'Modifié';font-weight:900;color:#718096}.files-table td:nth-child(5){justify-content:flex-end}.file-link{max-width:260px}.page-header h1{font-size:1.7rem}}