:root{
    --sidebar-w: 260px;
}
body{ overflow-x:hidden; }
.app-shell{
    display:flex;
    min-height:100vh;
}
.sidebar{
    width:var(--sidebar-w);
    background: linear-gradient(180deg, #0d1b2a, #1b263b);
    color:#fff;
    position:sticky;
    top:0;
    height:100vh;
    transition: transform .2s ease;
    z-index:1040;
}
.brand-logo{
    width:38px;height:38px;border-radius:12px;
    background:#fff; padding:6px;
    object-fit:contain;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.sidebar .nav-link{
    color: rgba(255,255,255,.82);
    border-radius: 14px;
    padding:.65rem .8rem;
}
.sidebar .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar .nav-link.active{
    background: rgba(255,255,255,.14);
    color:#fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.sidebar-section{ letter-spacing:.08em; }
.main{ flex:1; min-width:0; }
.topbar{ position:sticky; top:0; z-index:1030; }
.card-soft{
    border:0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(13,27,42,.08);
}

/* mobile sidebar */
@media (max-width: 991.98px){
    .sidebar{ position:fixed; transform: translateX(-110%); }
    .sidebar.show{ transform: translateX(0); }
    .app-shell{ display:block; }
}

/* login */
.login-card{
    border:0;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(13,27,42,.12);
    overflow:hidden;
}
.login-hero{
    background: linear-gradient(135deg, #0d1b2a, #415a77);
    color:#fff;
}