.glass-panel {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
    }
    .dark .glass-panel {
      background: rgba(17, 24, 39, 0.7);
      border-color: rgba(255, 255, 255, 0.1);
    }
    .housing-card {
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }
    .housing-card:hover {
      transform: translateY(-5px);
      border-color: #6366f1;
      box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
    }
    .status-badge {
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .status-available { background: rgba(16, 185, 129, 0.1); color: #059669; border: 1px solid rgba(16, 185, 129, 0.2); }
    .status-occupied { background: rgba(239, 68, 68, 0.1); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.2); }
    .status-maintenance { background: rgba(245, 158, 11, 0.1); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.2); }
    
    /* Toast Notification */
    .toast-container {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .toast {
      background: white;
      border-radius: 8px;
      padding: 12px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-right: 4px solid #6366f1;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: slideIn 0.3s ease-out forwards;
      min-width: 250px;
    }
    .toast.success { border-right-color: #10b981; }
    .toast.error { border-right-color: #ef4444; }
    .toast.info { border-right-color: #3b82f6; }
    @keyframes slideIn {
      from { transform: translateX(-100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(-100%); opacity: 0; }
    }
    /* Ensure native select/options are readable on mobile browsers */
    #housing-modal select,
    #housing-modal input {
      color: #0f172a;
      background: #ffffff;
    }
    #housing-modal select option {
      color: #0f172a;
      background: #ffffff;
    }
    body.cq-light h1.text-white {
      color: #0f172a !important;
    }
    body.cq-light .bg-indigo-600,
    body.cq-light .hover\:bg-indigo-700:hover {
      background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
      border-color: rgba(20,184,166,0.28) !important;
      box-shadow: 0 14px 30px rgba(20,184,166,0.2) !important;
    }
    body.cq-light .bg-indigo-600.text-white,
    body.cq-light .hover\:bg-indigo-700.text-white:hover {
      color: #ffffff !important;
    }
    body.cq-light .bg-slate-100 {
      background: rgba(240, 253, 250, 0.96) !important;
      color: #0f766e !important;
      border-color: rgba(20, 184, 166, 0.16) !important;
    }
    body.cq-light .bg-slate-100.text-slate-600,
    body.cq-light .bg-slate-100.text-slate-500,
    body.cq-light .bg-slate-100.text-slate-400 {
      color: #0f766e !important;
    }
    body.cq-light .hover\:bg-slate-200:hover,
    body.cq-light .hover\:bg-slate-100:hover {
      background: rgba(204, 251, 241, 0.96) !important;
    }
    body.cq-light .text-slate-600,
    body.cq-light .text-slate-500,
    body.cq-light .text-slate-400 {
      color: #64748b !important;
    }
    body.cq-light .border-slate-200 {
      border-color: rgba(148, 163, 184, 0.22) !important;
    }