body{font-family:'IBM Plex Sans', Helvetica, Arial, sans-serif;background:#0B1224;color:#E9EEFB;margin:0;position:relative;}
body::before{content:'';position:fixed;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(9,17,36,0.04)"/></svg>') repeat;background-size:50px 50px;pointer-events:none;z-index:1;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;}
.scanline{background:none;pointer-events:none;position:fixed;inset:0;z-index:100;opacity:0;}
.status-pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.hidden{display:none!important;}
.glass{background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,0.3);box-shadow:0 4px 16px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.8);}
.glass-card{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,0.25);border-radius:12px;box-shadow:0 4px 20px rgba(15,23,42,0.1), inset 0 1px 0 rgba(255,255,255,1);transition:all 0.3s ease;}
.glass-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(33,150,243,0.12), inset 0 1px 0 rgba(255,255,255,1);border-color:rgba(33,150,243,0.25);}
.glass-sidebar{background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-right:1px solid rgba(148,163,184,0.2);box-shadow:2px 0 16px rgba(15,23,42,0.08);}
.glass-header{background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(148,163,184,0.2);box-shadow:0 2px 12px rgba(15,23,42,0.06);}
.glass-input{background:rgba(248,250,252,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,0.3);border-radius:8px;transition:all 0.3s ease;color:#1e293b;}
.glass-input:focus{background:rgba(255,255,255,0.95);border-color:rgba(33,150,243,0.6);box-shadow:0 0 16px rgba(33,150,243,0.15);}
.glass-button{background:rgba(33,150,243,0.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(33,150,243,0.3);border-radius:8px;transition:all 0.3s ease;}
.glass-button:hover{background:rgba(33,150,243,0.2);box-shadow:0 0 16px rgba(33,150,243,0.2);transform:translateY(-1px);}
.nav-active{background:rgba(33,150,243,0.08)!important;color:#1976d2!important;border-left:4px solid #1976d2!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 12px rgba(33,150,243,0.08);}
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .mobile-menu-btn {
    display: block !important;
  }
}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:rgba(226,232,240,0.5);backdrop-filter:blur(8px);}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.5);border-radius:4px;backdrop-filter:blur(8px);}
::-webkit-scrollbar-thumb:hover{background:rgba(100,149,237,0.6);}
#installedAppsList{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,0.5) rgba(248,250,252,0.8);}
#installedAppsList::-webkit-scrollbar{width:8px;}
#installedAppsList::-webkit-scrollbar-track{background:rgba(248,250,252,0.6);border-radius:4px;}
#installedAppsList::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.5);border-radius:4px;}
#installedAppsList::-webkit-scrollbar-thumb:hover{background:rgba(100,149,237,0.6);}
#sideNav{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,0.4) transparent;}
#sideNav::-webkit-scrollbar{width:6px;}
#sideNav::-webkit-scrollbar-track{background:transparent;}
#sideNav::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.4);border-radius:3px;}
#sideNav::-webkit-scrollbar-thumb:hover{background:rgba(100,149,237,0.6);}
#cameraFrame{max-width:100%;height:auto;border:2px solid rgba(33,150,243,0.3);border-radius:12px;box-shadow:0 0 20px rgba(33,150,243,0.15), inset 0 0 12px rgba(33,150,243,0.05);}
.device-container{margin:0 auto;}
@media (max-height: 900px){.device-container{max-width:min(300px,35vh)!important;}}
@media (max-height: 700px){.device-container{max-width:min(250px,30vh)!important;}}
@keyframes slide-in-right{from{transform:translateX(400px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slide-out-right{from{transform:translateX(0);opacity:1;}to{transform:translateX(400px);opacity:0;}}
.animate-slide-in-right{animation:slide-in-right 0.4s ease-out forwards;}
.animate-slide-out-right{animation:slide-out-right 0.3s ease-in forwards;}

/* ========== MOBILE RESPONSIVE STYLES ========== */
/* Mobile First - Optimized for Android phones and tablets */

/* Hide sidebar on mobile, show as overlay */
@media (max-width: 768px) {
  /* Sidebar becomes full-screen overlay on mobile */
  #sideNav {
    position: fixed;
    left: -100%;
    top: 0;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    z-index: 9999;
    transition: left 0.3s ease;
    overflow-y: auto;
  }
  
  #sideNav.mobile-open {
    left: 0;
  }
  
  /* Mobile overlay backdrop */
  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
  
  .mobile-sidebar-backdrop.active {
    display: block;
  }
  
  /* Adjust main content for mobile */
  #dashboardSection {
    padding-left: 0 !important;
  }
  
  aside {
    position: fixed;
    left: -100%;
    width: 80%;
    max-width: 300px;
    transition: left 0.3s ease;
    z-index: 9999;
  }
  
  aside.mobile-open {
    left: 0;
  }
  
  /* Header adjustments */
  header {
    left: 0 !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Add hamburger menu button */
  .mobile-menu-btn {
    display: block !important;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .sidebar.mobile-open,
  .sidebar.open,
  aside.mobile-open {
    left: 0 !important;
    transform: translateX(0) !important;
  }

  .mobile-sidebar-backdrop.active {
    display: block !important;
  }
  
  /* Content area */
  .content-section {
    padding: 1rem !important;
    margin-top: 4rem !important;
  }
  
  /* Grid layouts become single column */
  .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Cards stack vertically */
  .glass-card {
    margin-bottom: 1rem;
  }
  
  /* Buttons become full width */
  button {
    width: 100%;
    justify-content: center;
  }
  
  /* Tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Form inputs full width */
  input, select, textarea {
    width: 100% !important;
  }

  /* Ransomware dropdown dark override */
  #ransomwareDeviceSelect {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    color-scheme: dark !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  #ransomwareDeviceSelect option,
  #ransomwareDeviceSelect optgroup {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
  }

  #ransomwareDeviceSelect option:hover,
  #ransomwareDeviceSelect option:checked {
    background: rgba(5, 74, 218, 0.35) !important;
    color: #ffffff !important;
  }

  #ransomwareDeviceSelect {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #ransomwareDeviceSelect::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Device frame smaller on mobile */
  .device-container {
    max-width: 90vw !important;
    margin: 0 auto;
  }
  
  /* Hide side control buttons on mobile */
  .flex.flex-col.gap-2 {
    display: none !important;
  }
  
  /* Stats cards */
  .stat-card {
    padding: 1rem;
  }
  
  /* Font sizes */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  
  /* Spacing */
  .gap-6 { gap: 1rem !important; }
  .gap-4 { gap: 0.75rem !important; }
  .p-8 { padding: 1rem !important; }
  .p-6 { padding: 0.75rem !important; }
  
  /* Login screen */
  #loginSection .max-w-md {
    max-width: 90vw !important;
    padding: 2rem !important;
  }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  aside {
    width: 200px;
  }
  
  header {
    width: calc(100% - 200px);
  }
  
  .device-container {
    max-width: 50vw !important;
  }
}

/* Small phones */
@media (max-width: 480px) {
  /* Even smaller text */
  body {
    font-size: 14px;
  }
  
  /* Tighter spacing */
  .p-4 { padding: 0.5rem !important; }
  .gap-2 { gap: 0.5rem !important; }
  
  /* Smaller buttons */
  button {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Device frame even smaller */
  .device-container {
    max-width: 95vw !important;
  }
}

/* Landscape mode on phones */
@media (max-height: 500px) and (orientation: landscape) {
  .device-container {
    max-height: 80vh !important;
  }
  
  aside {
    width: 60%;
  }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  button, a, input, select {
    min-height: 44px;
    min-width: 44px;
  }
  
  .nav-item {
    padding: 1rem !important;
  }
}

/* Prevent text selection on mobile */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  
  /* But allow selection in inputs */
  input, textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}