.gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .gradient-bg-2 {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    .gradient-bg-3 {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    .card-shadow {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .grade-O { background-color: #10b981; }
    .grade-Ap { background-color: #34d399; }
    .grade-A { background-color: #60a5fa; }
    .grade-Bp { background-color: #8b5cf6; }
    .grade-B { background-color: #f59e0b; }
    .grade-C { background-color: #f97316; }
    .grade-D { background-color: #ef4444; }
    .grade-F { background-color: #6b7280; }
    
    /* Responsive adjustments */
    @media (max-width: 640px) {
      .mobile-stack {
        flex-direction: column;
      }
      .mobile-mb-2 {
        margin-bottom: 0.5rem;
      }
      .mobile-mt-2 {
        margin-top: 0.5rem;
      }
      .mobile-full-width {
        width: 100%;
      }
      .mobile-text-center {
        text-align: center;
      }
      .button-group-responsive {
        gap: 0.75rem;
      }
    }
    
    /* Hide scrollbar but keep functionality */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    /* Animation for results */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-in {
      animation: fadeIn 0.5s ease-out;
    }
    
    /* Custom styles for inputs */
    input:focus, select:focus {
      outline: none;
      ring: 2px;
    }
    
    /* Loading animation */
    .loader {
      border: 3px solid #f3f3f3;
      border-top: 3px solid #667eea;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 1s linear infinite;
      display: inline-block;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }