html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .app-wrapper {
      min-height: 100%;
      width: 100%;
    }

    .islamic-pattern {
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.08'%3E%3Cpath d='M30 30l15-15v30L30 30zm0 0L15 15v30l15-15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .geometric-border {
      background: linear-gradient(90deg, transparent, #d4af37, transparent);
      height: 2px;
    }

    .star-decoration::before {
      content: '✦';
      color: #d4af37;
      margin-right: 0.5rem;
    }

    .star-decoration::after {
      content: '✦';
      color: #d4af37;
      margin-left: 0.5rem;
    }

    .card-shine {
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 50%, rgba(212, 175, 55, 0.05) 100%);
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out forwards;
    }

    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #d4af37, #fbbf24);
      transition: width 0.3s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }

    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 16px 24px;
      border-radius: 8px;
      color: white;
      font-weight: 500;
      z-index: 1000;
      transform: translateX(200%);
      transition: transform 0.3s ease;
    }

    .toast.show {
      transform: translateX(0);
    }

    .toast.success {
      background: linear-gradient(135deg, #059669, #047857);
    }

    .toast.error {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
    }

    /* Fix select dropdown visibility */
    select option {
      background-color: #064e3b; /* emerald-950 */
      color: white;
    }

    /* Additional styling for transparent selects in operator panel */
    select.bg-transparent option {
      background-color: #064e3b;
      color: white;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 100;
      display: none;
    }

    .modal-backdrop.show {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .input-field {
      transition: all 0.3s ease;
    }

    .input-field:focus {
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    }
    
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-down {
      animation: slideDown 0.3s ease-out forwards;
    }

    /* Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(6, 78, 59, 0.2);
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(212, 175, 55, 0.3);
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(212, 175, 55, 0.5);
    }

    body { box-sizing: border-box; }