#top-bar{display:flex;align-items:center;height:64px;padding:0 4px 0 16px;background:var(--md-primary);border-bottom:none;position:sticky;top:0;z-index:10;flex-shrink:0;}
#top-bar-title{font-size:26px;font-family:"Anton",sans-serif;font-weight:400;letter-spacing:1.5px;color:var(--md-on-primary);flex:1;}
#top-bar-actions,#top-bar-right{display:flex;align-items:center;gap:4px;margin-left:auto;}
#top-bar img{height:36px;width:auto;object-fit:contain;display:block;}
#top-bar .icon-btn{color:rgba(255,255,255,.85);}
#top-bar .icon-btn:hover{background:rgba(255,255,255,.12);}
#logo-wrapper{display:flex;align-items:center;}
header{box-shadow:0 1px 0 rgba(0,0,0,.06),0 2px 8px rgba(10,40,81,.12);}

#server-status{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:600;white-space:nowrap;user-select:none;transition:background .3s,color .3s;}
#status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;transition:background .3s;}
#server-status.online{background:var(--md-success-container);color:var(--md-on-success-container);border:1.5px solid #6dbf5a;}
#server-status.offline{background:var(--md-error-container);color:var(--md-on-error-container);border:1.5px solid #e57373;}
#server-status.checking{background:var(--md-surface-container-high);color:var(--md-on-surface-variant);border:1.5px solid var(--md-outline-variant);}
#server-status.online #status-dot{background:#2E7D32;animation:pulse-green 2s infinite;}
#server-status.offline #status-dot{background:var(--md-error);}
#server-status.checking #status-dot{background:var(--md-outline);animation:pulse-grey 1s infinite;}

#bottom-nav{display:flex;flex-shrink:0;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--md-surface-container-low);border-top:1px solid var(--md-outline-variant);padding-bottom:env(safe-area-inset-bottom);}
#bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 0 6px;gap:3px;color:var(--md-on-surface-variant);text-decoration:none;font-size:11px;font-weight:500;}
#bottom-nav a.active{color:var(--md-primary);}
#bottom-nav a.active .nav-pill{background:var(--md-primary-container);}
#notif-sheet{transition:transform .25s cubic-bezier(.32,.72,0,1);}

@media(max-width:839px){
  #top-bar{padding:0 8px 0 12px;}
  #top-bar-actions,#top-bar-right{gap:2px;}
  #server-status{padding:4px 8px;font-size:11px;}
}

@media(min-width:840px){
  .page-header{padding:24px 32px 16px!important;}
  #bottom-nav{display:none!important;}
  #sidebar{display:flex!important;}
}

#sidebar{transition:width .2s ease;box-shadow:1px 0 0 rgba(0,0,0,.02);}
#sidebar.collapsed{width:76px;}
#sidebar.collapsed .nav-label,#sidebar.collapsed .side-group-title,#sidebar.collapsed #side-backend,#sidebar.collapsed #side-status-text{display:none;}
#sidebar.collapsed a{justify-content:center;padding-left:0;padding-right:0;}
#sidebar.collapsed .side-footer{display:flex;justify-content:center;padding:12px 8px;}
#sidebar.collapsed>div:first-child{justify-content:center;}
#sidebar a{transition:background-color .15s,color .15s;}
#sidebar a:hover:not([aria-current="page"]){background:var(--ax-bg-muted);}
#sidebar a svg{transition:transform .15s;}
#sidebar a:hover svg{transform:translateX(1px);}
#sidebar a[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(10,40,81,.06);}
#sidebar-toggle svg{transition:transform .2s ease;}
#sidebar.collapsed #sidebar-toggle svg{transform:rotate(180deg);}
.side-group-header{transition:background .15s;}
.side-group-header:hover{background:var(--md-surface-container-high);}
.side-group-chevron{transition:transform .18s ease;}
.side-group.group-collapsed .side-group-items{display:none;}
.side-group.group-collapsed .side-group-chevron{transform:rotate(-90deg);}
#sidebar.collapsed .side-group-header{display:none;}