* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --primary: #f4f5f7;  
  --secondary: #1a1a29;
  --tertiary:linear-gradient(135deg, #38bdf8, #2563eb);
  --border-soft: rgba(0,0,0,.08);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.05);
  --radius-lg: 16px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 72px;
}

body{
      z-index:1;
      background-color:#FAFAFB;
      width:100%;
      scroll-behavior:smooth;    
}  
.modal-backdrop {
      z-index: 1040 !important;
}
.modal {
      z-index:1050!important;
}

.net-status {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 8px 14px;
      text-align: center;
      font-size: 10px;
      font-weight: 500;
      z-index: 100000;
      transform: translateY(-100%);
      transition: transform 0.3s ease, background 0.3s ease;
}

.net-status.offline {
      background: gray; /* red */
      color: #ffffff;
      transform: translateY(0);
}

.net-status.online {
      background: #16a34a; /* green */
      color: #ffffff;
      transform: translateY(0);
}