.sidebar{position:fixed;top:0;left:-330px;width:330px;height:100%;z-index:1000;padding:22px;background:rgba(9,16,32,.97);border-right:1px solid rgba(96,165,250,.18);box-shadow:22px 0 55px rgba(0,0,0,.42);transition:left .22s ease}
.sidebar.active{left:0}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(148,163,184,.12);padding-bottom:18px;margin-bottom:18px}
.sidebar-brand{display:flex;align-items:center;gap:12px}
.sidebar-brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#3b82f6,#2563eb);font-size:22px;font-weight:900}
.sidebar-brand strong{display:block;font-size:19px}.sidebar-brand span{display:block;margin-top:2px;font-size:11px;color:#7f8ea8}
.sidebar-menu{display:flex;flex-direction:column;gap:8px}
.sidebar-item{min-height:50px;margin:0;background:transparent;color:#aebbd0;justify-content:flex-start;border:1px solid transparent}
.sidebar-item:hover{background:#121d31;border-color:rgba(96,165,250,.14);color:#fff}
.sidebar-separator{height:1px;background:rgba(148,163,184,.12);margin:10px 0}
.sidebar-logout{color:#ff7676}.sidebar-footnote{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;color:#53627a;font-size:11px}
.menu-trigger{position:fixed;top:20px;left:20px;z-index:999;background:rgba(30,41,59,.92);border:1px solid rgba(148,163,184,.12)}
body.sidebar-open::after{content:"";position:fixed;inset:0;background:rgba(2,6,23,.48);z-index:900}
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.82);z-index:2000;align-items:center;justify-content:center}
.modal-content{background:#1e293b;padding:30px;border-radius:18px;max-width:500px;width:90%;position:relative;box-shadow:0 10px 25px rgba(0,0,0,.5)}
.close-modal{position:absolute;top:15px;right:15px;background:none;padding:0;margin:0;color:#64748b}
@media(max-width:700px){.sidebar{width:min(88vw,330px);left:-100vw}}