:root{--hdc-sidebar-w:280px;}
.hdc-shell{display:flex;min-height:100vh;background:#f5f7fb;}
.hdc-content{flex:1;min-width:0;}
.hdc-sidebar{width:var(--hdc-sidebar-w);background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;padding:14px;position:sticky;top:0;height:100vh;overflow:auto;flex-direction:column;gap:6px;}
.hdc-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.10);margin-bottom:4px;}
.hdc-brand .dot{width:10px;height:10px;background:var(--accent);border-radius:999px;}
.hdc-brand .title{font-weight:800;line-height:1.1;}
.hdc-brand .sub{font-size:12px;opacity:.75;}
.hdc-nav-title{font-size:12px;opacity:.75;padding:10px 10px 6px;}
.hdc-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#eaf2ff;text-decoration:none;}
.hdc-link:hover{background:rgba(255,255,255,.12);color:#fff;}
.hdc-link.active{background:rgba(255,255,255,.20);color:#fff;font-weight:800;}
.hdc-link i{width:18px;text-align:center;}
.hdc-sep{height:1px;background:rgba(255,255,255,.18);margin:10px 0;}
.hdc-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 10px 25px rgba(0,0,0,.06);margin:16px 16px 0;}
.hdc-main{padding:16px;}
@media (max-width: 992px){
  .hdc-topbar{margin:12px 12px 0;}
  .hdc-main{padding:12px;}
}