body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
  
  .nav-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: #6b7280; transition: all 0.2s; cursor: pointer;
  }
  .nav-item:hover { background: #f3f4f6; color: #111827; }
  .nav-item.active {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }
  .nav-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
    height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700;
  }
  .nav-item.active .nav-badge { background: rgba(255, 255, 255, 0.3); }
  .nav-item:not(.active) .nav-badge { background: #ef4444; color: white; }
  
  /* Pill Status Badges */
  .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
  }
  .status-online { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
  .status-offline { background: rgba(107, 114, 128, 0.15); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.3); }
  .status-presenting { background: rgba(59, 130, 246, 0.15); color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.3); }
  
  .help-pulse { 
    animation: pulse-red 1.5s ease-in-out infinite; 
  }
  @keyframes pulse-red { 
    0%, 100% { 
      transform: scale(1); 
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    } 
    50% { 
      transform: scale(1.05); 
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    } 
  }
  
  .room-card-help {
    animation: flash-red-border 1.5s ease-in-out infinite;
  }
  @keyframes flash-red-border {
    0%, 100% {
      border-color: #ef4444;
      background-color: #fef2f2;
      box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
      border-color: #dc2626;
      background-color: #fee2e2;
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    }
  }
  
  .sync-indicator {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  }
  .sync-online { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.5); animation: pulse 2s ease-in-out infinite; }
  .sync-offline { background: #6b7280; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  
  .tab-button {
    padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 8px;
    transition: all 0.2s; cursor: pointer; border: none; background: none;
  }
  .tab-button.active {
    background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .tab-button:not(.active) {
    color: #6b7280;
  }
  .tab-button:not(.active):hover {
    background: rgba(255,255,255,0.5);
  }
  
  /* ============================================================================
     RESPONSIVE BREAKPOINTS - MOBILE & TABLET OPTIMIZATION
     ============================================================================ */
  
  /* Tablet Styles (768px - 1024px) */
  @media (max-width: 1024px) and (min-width: 769px) {
    /* Reduce side padding */
    .max-w-7xl { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
    
    /* Adjust navigation */
    .nav-item { padding: 8px 12px; font-size: 13px; }
    .nav-item span { display: inline; } /* Keep labels */
    
    /* Adjust grid columns */
    .grid.grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
    .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    
    /* Compact cards */
    .rounded-xl { padding: 1rem; }
  }
  
  /* Mobile Styles (max-width: 768px) */
  @media (max-width: 768px) {
    /* Base adjustments */
    body { font-size: 14px; }
    
    /* Hide side navigation on mobile - use top nav only */
    .ml-64 { margin-left: 0 !important; }
    .ml-16 { margin-left: 0 !important; }
    
    /* Navigation - Compact horizontal scroll */
    .nav-item {
      flex-direction: column;
      padding: 8px 6px;
      font-size: 11px;
      min-width: 60px;
      text-align: center;
      gap: 4px;
    }
    .nav-item svg { width: 20px; height: 20px; }
    .nav-item span { font-size: 10px; }
    .nav-badge { 
      position: absolute;
      top: 2px;
      right: 2px;
      min-width: 16px;
      height: 16px;
      font-size: 9px;
    }
    
    /* Top nav container - horizontal scroll */
    nav .flex.items-center.space-x-2 {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 4px;
      padding-bottom: 8px;
    }
    nav .flex.items-center.space-x-2::-webkit-scrollbar {
      display: none;
    }
    
    /* Page padding */
    .p-6 { padding: 1rem; }
    .px-6 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .py-6 { padding-top: 1rem; padding-bottom: 1rem; }
    
    /* Typography */
    h1.text-2xl { font-size: 1.25rem; }
    h1.text-3xl { font-size: 1.5rem; }
    h2.text-xl { font-size: 1.125rem; }
    h2.text-lg { font-size: 1rem; }
    .text-xl { font-size: 1.125rem; }
    
    /* Grid columns - stack on mobile */
    .grid.grid-cols-6,
    .grid.grid-cols-5,
    .grid.grid-cols-4,
    .grid.grid-cols-3,
    .grid.grid-cols-2 {
      grid-template-columns: 1fr !important;
      gap: 0.75rem;
    }
    
    /* Two column layout for certain grids */
    .grid.grid-cols-2.mobile-keep-2 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Cards */
    .rounded-xl,
    .rounded-lg {
      border-radius: 0.5rem;
      padding: 0.75rem;
    }
    
    /* Spacing */
    .space-y-6 > * + * { margin-top: 1rem; }
    .space-y-4 > * + * { margin-top: 0.75rem; }
    .gap-6 { gap: 0.75rem; }
    .gap-4 { gap: 0.5rem; }
    
    /* Tables - Convert to cards on mobile */
    table.mobile-card-view {
      display: block;
    }
    table.mobile-card-view thead {
      display: none;
    }
    table.mobile-card-view tbody {
      display: block;
    }
    table.mobile-card-view tr {
      display: block;
      margin-bottom: 1rem;
      background: white;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    table.mobile-card-view td {
      display: block;
      text-align: left !important;
      padding: 0.5rem 0;
      border: none;
    }
    table.mobile-card-view td:before {
      content: attr(data-label);
      font-weight: 600;
      display: block;
      font-size: 0.75rem;
      color: #6b7280;
      margin-bottom: 0.25rem;
    }
    
    /* Buttons - Touch friendly */
    button,
    .cursor-pointer {
      min-height: 44px; /* Apple's recommended touch target */
      min-width: 44px;
    }
    
    /* Compact buttons in tables */
    td button,
    td .text-sm {
      min-height: 36px;
      padding: 0.5rem 0.75rem;
    }
    
    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
      min-height: 44px;
      font-size: 16px; /* Prevents zoom on iOS */
      padding: 0.75rem;
    }
    
    /* Modals - Full screen on mobile */
    .fixed.inset-0 > div {
      max-width: 100% !important;
      max-height: 100vh !important;
      margin: 0 !important;
      border-radius: 0 !important;
    }
    
    /* Flex direction changes */
    .flex.justify-between.mobile-stack {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    
    /* Hide on mobile */
    .mobile-hide { display: none !important; }
    
    /* Show only on mobile */
    .mobile-only { display: block !important; }
    
    /* Text sizes */
    .text-3xl { font-size: 1.5rem; }
    .text-2xl { font-size: 1.25rem; }
    .text-xl { font-size: 1.125rem; }
    
    /* Stat cards on dashboard */
    .bg-white.rounded-xl.p-6.shadow-sm {
      padding: 1rem;
    }
    .bg-white.rounded-xl.p-6.shadow-sm .text-3xl {
      font-size: 1.75rem;
    }
    
    /* Room cards */
    .bg-white.rounded-lg.shadow-sm.hover\:shadow-md {
      margin-bottom: 0.75rem;
    }
    
    /* Schedule filters */
    .flex.items-center.space-x-4.mobile-stack {
      flex-wrap: wrap;
    }
    
    /* Equipment library - responsive grid */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
      grid-template-columns: 1fr !important;
    }
    
    /* Crew cards */
    .grid.grid-cols-3 {
      grid-template-columns: 1fr !important;
    }
  }
  
  /* Small Mobile (max-width: 480px) */
  @media (max-width: 480px) {
    /* Even more compact */
    body { font-size: 13px; }
    
    /* Smaller navigation */
    .nav-item {
      min-width: 50px;
      padding: 6px 4px;
    }
    .nav-item svg { width: 18px; height: 18px; }
    .nav-item span { font-size: 9px; }
    
    /* Tighter spacing */
    .p-6 { padding: 0.75rem; }
    .px-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
    
    /* Smaller text */
    h1.text-3xl { font-size: 1.25rem; }
    h1.text-2xl { font-size: 1.125rem; }
    
    /* Single column everything */
    .grid { grid-template-columns: 1fr !important; }
    
    /* Compact cards */
    .rounded-xl,
    .rounded-lg {
      padding: 0.5rem;
    }
  }
  
  /* Landscape orientation on mobile */
  @media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical padding */
    .py-6 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .space-y-6 > * + * { margin-top: 0.5rem; }
    
    /* Compact headers */
    nav { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  }
  
  /* Touch device optimization */
  @media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, .cursor-pointer { min-height: 44px; min-width: 44px; }
    
    /* Remove hover effects that don't work on touch */
    .hover\:bg-gray-50:hover { background-color: white; }
    .hover\:shadow-md:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  }
  
  /* Print styles */
  @media print {
    nav, .nav-item, button, .mobile-hide { display: none; }
    .ml-64, .ml-16 { margin-left: 0; }
    body { background: white; }
  }
</style>
    '<style>' +
      '@page { margin: 0.35in; size: letter; }' +
      '* { margin: 0; padding: 0; box-sizing: border-box; }' +
      'body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 9pt; color: #000; }' +
      
      /* Header */
      '.hdr { border-bottom: 4px solid #000; padding-bottom: 6px; margin-bottom: 10px; }' +
      '.hdr h1 { font-size: 28pt; font-weight: 900; letter-spacing: -0.5px; line-height: 1; margin-bottom: 2px; }' +
      '.hdr p { font-size: 9pt; color: #333; font-weight: 600; }' +
      
      /* Info Bar */
      '.info { display: flex; border: 2px solid #000; margin-bottom: 12px; }' +
      '.info > div { flex: 1; padding: 5px 8px; border-right: 1px solid #ccc; }' +
      '.info > div:last-child { border-right: none; }' +
      '.info > div:nth-child(odd) { background: #f8f8f8; }' +
      '.info span { display: block; font-size: 6.5pt; font-weight: 700; text-transform: uppercase; color: #666; margin-bottom: 2px; }' +
      '.info strong { display: block; font-size: 9pt; }' +
      
      /* Category Blocks */
      '.cat-block { margin-bottom: 10px; border: 2px solid #000; page-break-inside: avoid; }' +
      '.cat-bar { background: #000; color: #fff; padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; }' +
      '.cat-bar strong { font-size: 9pt; letter-spacing: 0.5px; }' +
      '.cat-bar span { font-size: 7.5pt; opacity: 0.9; }' +
      
      /* Table */
      'table { width: 100%; border-collapse: collapse; }' +
      'tr { border-bottom: 1px solid #e0e0e0; }' +
      'tr:last-child { border-bottom: none; }' +
      'tr:nth-child(even) { background: #fafafa; }' +
      'td { padding: 5px 8px; vertical-align: middle; }' +
      'td:nth-child(1) { width: 20px; text-align: center; font-size: 13pt; color: #666; }' +
      'td:nth-child(2) { width: 52%; font-weight: 500; }' +
      'td:nth-child(3) { width: 35px; text-align: center; font-weight: 700; font-size: 10pt; }' +
      'td:nth-child(4) { width: auto; border-left: 2px solid #e5e5e5; }' +
      
      /* Signature */
      '.sig { display: flex; gap: 16px; margin: 16px 0; }' +
      '.sig > div { flex: 1; border-top: 2px solid #000; padding-top: 3px; min-height: 35px; }' +
      '.sig span { font-size: 6.5pt; font-weight: 700; text-transform: uppercase; color: #666; }' +
      
      /* Footer */
      '.ftr { margin-top: 16px; padding-top: 10px; border-top: 2px solid #000; display: flex; justify-content: space-between; align-items: center; }' +
      '.ftr-text { font-size: 6.5pt; color: #666; }' +
      '.ftr-logo { height: 25px; max-width: 150px; }' +
      
      '@media print { body { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }' +