:root{
  --dms-accent:#6f42c1;
  --dms-accent-2:#8b5cf6;
  --dms-sidebar:#1d1b2e;
  --dms-sidebar-2:#26233a;
}
*{box-sizing:border-box}
body{background:#f4f5f9;margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

.dms-layout{display:flex;min-height:100vh}
.dms-sidebar{
  width:248px;flex-shrink:0;background:var(--dms-sidebar);color:#cfd0e0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh
}
.dms-brand{font-size:1.2rem;font-weight:600;color:#fff;padding:18px 20px}
.dms-brand i{color:var(--dms-accent-2)}
.dms-sidebar .nav-link{color:#b9bacb;padding:10px 20px;border-left:3px solid transparent}
.dms-sidebar .nav-link:hover{color:#fff;background:var(--dms-sidebar-2)}
.dms-sidebar .nav-link.active{color:#fff;background:var(--dms-sidebar-2);border-left-color:var(--dms-accent-2)}
.dms-sidebar .nav-link i{width:20px;margin-right:8px}
.dms-nav-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#6f6e85;padding:6px 20px}
.dms-sidebar-foot{margin-top:auto;padding:14px 20px;border-top:1px solid #34314a;font-size:.9rem}
.dms-main{flex:1;padding:26px 30px;min-width:0}

.btn-accent{background:var(--dms-accent);border-color:var(--dms-accent);color:#fff}
.btn-accent:hover{background:#5a35a3;border-color:#5a35a3;color:#fff}
a{color:var(--dms-accent)}

.page-title{font-weight:600;margin-bottom:20px}
.card{border:none;box-shadow:0 1px 3px rgba(20,20,40,.08);border-radius:12px}

.stat-card{padding:18px 20px}
.stat-card .num{font-size:1.9rem;font-weight:700;line-height:1}
.stat-card .lbl{color:#7a7a8c;font-size:.85rem}
.stat-card i{font-size:1.4rem;color:var(--dms-accent)}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.doc-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(20,20,40,.08);transition:.15s;display:flex;flex-direction:column}
.doc-card:hover{box-shadow:0 6px 18px rgba(20,20,40,.16);transform:translateY(-2px)}
.doc-thumb{height:200px;background:#eceef4 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#aab}
.doc-thumb i{font-size:2.4rem}
.doc-body{padding:10px 12px}
.doc-body .t{font-weight:600;font-size:.92rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-body .m{font-size:.78rem;color:#8a8a9a;margin-top:4px}
.doc-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}

.dropzone{border:2px dashed #c9c9da;border-radius:14px;padding:40px;text-align:center;color:#888;background:#fff;cursor:pointer;transition:.15s}
.dropzone.drag{border-color:var(--dms-accent);background:#f6f2fd;color:var(--dms-accent)}

mark{background:#fff1a8;padding:0 2px}

@media(max-width:768px){
  .dms-layout{flex-direction:column}
  .dms-sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap}
  .dms-sidebar .nav{flex-direction:row !important;flex-wrap:wrap}
  .dms-sidebar-foot{margin:0}
  .dms-main{padding:16px}
}