.portal-shell{display:flex;width:100%;height:100vh;overflow:hidden;background:#09090b;color:#f4f4f5}
.sidebar{position:relative;z-index:50;display:flex;flex:0 0 auto;width:16rem;height:100%;transition:width .3s ease-out}
.sidebar-inner{display:flex;flex-direction:column;width:100%;height:100%;border-right:1px solid rgba(39,39,42,.6);background:rgba(9,9,11,.9);backdrop-filter:blur(24px);user-select:none}
.brand-wrap{display:flex;flex:0 0 4rem;align-items:center;justify-content:space-between;padding:0 1rem;border-bottom:1px solid rgba(39,39,42,.6)}
.brand-link{display:flex;align-items:center;gap:.5rem}.brand-link img{display:block;width:7.5rem;height:2.25rem;object-fit:contain;object-position:left}
.sidebar-collapse,.sidebar-mobile-close,.mobile-menu{display:inline-flex;align-items:center;justify-content:center;padding:.5rem;border:0;border-radius:.5rem;background:transparent;color:#a1a1aa;transition:.2s}
.sidebar-collapse:hover{background:rgba(16,185,129,.1);color:#34d399}.sidebar-mobile-close{display:none}.mobile-menu{display:none;border:1px solid rgba(39,39,42,.6);border-radius:.75rem;background:rgba(24,24,27,.8)}.mobile-menu .icon{width:1.25rem;height:1.25rem}
.admin-badge{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-bottom:1px solid rgba(6,78,59,.3);background:rgba(6,78,59,.3);color:#34d399;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.admin-badge .icon{width:.875rem;height:.875rem}
.side-nav{display:block;flex:1;overflow-y:auto;padding:.75rem}.nav-caption{display:block;margin:0 0 .5rem;padding:0 .75rem;color:#71717a;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.side-link{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem;padding:.625rem .875rem;border:1px solid transparent;border-radius:.75rem;color:#a1a1aa;text-decoration:none;font-size:.875rem;font-weight:500;transition:all .2s}.side-link:hover{border-color:rgba(39,39,42,.6);background:rgba(24,24,27,.8);color:#f4f4f5}.side-link.active{border-color:rgba(16,185,129,.3);background:linear-gradient(90deg,rgba(16,185,129,.15),rgba(99,102,241,.1));color:#34d399;box-shadow:0 0 15px rgba(16,185,129,.1)}.side-link-main{display:flex;align-items:center;gap:.75rem}.side-link .icon{flex:none}.side-link:not(.active) .icon{color:#a1a1aa}.side-chevron{width:.875rem!important;height:.875rem!important;color:rgba(52,211,153,.7)}
.sidebar-footer{margin-top:auto;padding:.75rem;border-top:1px solid rgba(39,39,42,.6);background:rgba(9,9,11,.5)}.user-card{display:flex;align-items:center;gap:.75rem;margin:0 0 .5rem;padding:.625rem .75rem;border:1px solid rgba(39,39,42,.4);border-radius:.75rem;background:rgba(24,24,27,.6)}.user-avatar{display:flex;flex:0 0 2rem;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:.5rem;background:linear-gradient(135deg,#10b981,#4f46e5);color:#fff;font-size:.75rem;font-weight:700;box-shadow:inset 0 1px 2px rgba(255,255,255,.2)}.user-copy{min-width:0;flex:1}.user-copy b,.user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-copy b{color:#e4e4e7;font-size:.75rem}.user-copy small{margin-top:.15rem;color:#71717a;font-size:.625rem}.logout{display:flex;width:100%;align-items:center;justify-content:center;gap:.625rem;padding:.5rem .875rem;border:1px solid transparent;border-radius:.75rem;background:transparent;color:#a1a1aa;font-size:.75rem;font-weight:600;transition:.2s}.logout .icon{width:.875rem;height:.875rem}.logout:hover{border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.1);color:#fb7185}
.sidebar--collapsed{width:5rem}.sidebar--collapsed .brand-wrap{justify-content:center;padding:0 .5rem}.sidebar--collapsed .brand-link,.sidebar--collapsed .admin-badge span,.sidebar--collapsed .nav-caption,.sidebar--collapsed .side-label,.sidebar--collapsed .side-chevron,.sidebar--collapsed .user-copy,.sidebar--collapsed .logout span{display:none}.sidebar--collapsed .admin-badge,.sidebar--collapsed .side-link,.sidebar--collapsed .user-card{justify-content:center}.sidebar--collapsed .admin-badge{padding:.625rem .5rem}.sidebar--collapsed .side-nav{padding:.75rem .5rem}.sidebar--collapsed .side-link{padding:.75rem}.sidebar--collapsed .sidebar-footer{padding:.5rem}.sidebar--collapsed .user-card{padding:.625rem}.sidebar--collapsed .logout{padding:.5rem}
.portal-main{display:flex;min-width:0;flex:1;flex-direction:column;height:100%;overflow:hidden}.portal-main>main{flex:1;max-width:none;width:auto;margin:0;overflow-y:auto;padding:1rem;background:radial-gradient(ellipse at top,rgba(39,39,42,.5),#09090b 55%,#09090b)}
.topbar{position:sticky;top:0;z-index:40;display:flex;flex:0 0 4rem;min-height:4rem;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid rgba(39,39,42,.6);background:rgba(9,9,11,.7);backdrop-filter:blur(24px);user-select:none}.topbar-left,.breadcrumbs,.top-status,.sync-status,.live-status{display:flex;align-items:center}.topbar-left{gap:.75rem}.breadcrumbs{gap:.5rem;font-size:.875rem;font-weight:500}.crumb{display:flex;align-items:center;gap:.375rem;color:#71717a}.crumb .icon{width:.875rem;height:.875rem;color:#10b981}.breadcrumb-chevron{width:.875rem!important;height:.875rem!important;color:#52525b}.breadcrumbs strong{color:#f4f4f5;font-weight:600}.top-status{gap:.75rem}.sync-status,.live-status{gap:.5rem;padding:.375rem .75rem;border:1px solid rgba(39,39,42,.6);border-radius:.75rem;background:rgba(24,24,27,.8);color:#d4d4d8;font-size:.75rem;font-weight:500}.sync-status{transition:.2s}.sync-status:hover{background:rgba(39,39,42,.6);color:#fff}.sync-status .icon{width:.875rem;height:.875rem;color:#34d399}.sync-status.is-syncing .icon{animation:portal-spin .8s linear infinite}.live-status{padding:.375rem .625rem;border-color:rgba(39,39,42,.4);background:rgba(24,24,27,.6);color:#d4d4d8}.live-status i{position:relative;display:flex;width:.5rem;height:.5rem}.live-status i::before{content:"";position:absolute;inset:0;border-radius:50%;background:#34d399;opacity:.75;animation:portal-ping 1.5s cubic-bezier(0,0,.2,1) infinite}.live-status b{position:relative;display:block;width:.5rem;height:.5rem;border-radius:50%;background:#10b981}
.sidebar-overlay{display:none}.app-toast{position:fixed;z-index:100;top:5rem;right:1.25rem;max-width:24rem;padding:.875rem 1rem;border:1px solid rgba(16,185,129,.3);border-radius:.75rem;background:#052e25;color:#6ee7b7;font-size:.8rem;box-shadow:0 16px 40px rgba(0,0,0,.45)}.app-toast--error{border-color:rgba(244,63,94,.35);background:#3f0d1a;color:#fda4af}
@keyframes portal-spin{to{transform:rotate(360deg)}}@keyframes portal-ping{75%,100%{transform:scale(2);opacity:0}}
@media(min-width:640px){.portal-main>main{padding:1.5rem}}@media(min-width:1024px){.portal-main>main{padding:2rem}}
@media(max-width:767px){.sidebar{position:fixed;inset:0 auto 0 0;width:16rem;transform:translateX(-100%);box-shadow:0 25px 50px rgba(0,0,0,.75);transition:transform .25s ease}.sidebar.is-mobile-open{transform:translateX(0)}.sidebar-overlay{position:fixed;z-index:49;inset:0;display:none;background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}.sidebar-overlay.is-visible{display:block}.sidebar-collapse{display:none}.sidebar-mobile-close,.mobile-menu{display:inline-flex}.topbar{padding:0 1rem}.breadcrumbs{font-size:.75rem}.top-status span span,.sync-status span{display:none}.top-status{gap:.5rem}.sync-status{padding:.375rem .625rem}}