body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            color: #1f2937;
            transition: all 0.3s ease;
            margin: 0;
            overscroll-behavior: none;
        }
        .header {
            background: linear-gradient(to right, #1d4ed8, #4f46e5);
            color: white;
            padding: 1.25rem 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .card {
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background-color: white;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        .icon-btn {
            transition: color 0.2s, transform 0.2s;
            color: #4b5563;
        }
        .icon-btn:hover {
            color: #1e3a8a;
            transform: scale(1.15);
        }
        .search-bar {
            border: 1px solid #d1d5db;
            border-radius: 12px;
            padding: 0.75rem 1rem;
            background-color: white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }
        .welcome-section {
            background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
            border-radius: 16px;
            padding: 2.5rem;
            margin-bottom: 2.5rem;
            text-align: center;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
            color: #1f2937;
        }
        .welcome-section h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .welcome-section p {
            font-size: 1rem;
            color: #4b5563;
        }
        .selector {
            border: 1px solid #d1d5db;
            border-radius: 10px;
            padding: 0.6rem 1rem;
            background-color: white;
            font-size: 0.875rem;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 24 24" stroke="%236b7280" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>');
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1em;
            cursor: pointer;
        }
        .selector:focus {
            outline: none;
            border-color: #1e3a8a;
            box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
        }
        .not-found {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            color: #6b7280;
            text-align: center;
        }
        .not-found svg {
            width: 50px;
            height: 50px;
            margin-bottom: 1.5rem;
        }
        .sidebar {
            position: fixed;
            top: 0;
            right: -100%;
            width: 85%;
            max-width: 350px;
            height: 100%;
            background-color: white;
            box-shadow: -6px 0 20px rgba(0, 0, 0, 0.15);
            transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            padding: 2rem;
            z-index: 1000;
            overflow-y: auto;
        }
        .sidebar.open {
            right: 0;
        }
        .close-btn {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            cursor: pointer;
            color: #4b5563;
        }
        .close-btn:hover {
            color: #1e3a8a;
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            max-width: 500px;
            width: 90%;
            position: relative;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        .modal-form label {
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
            display: block;
        }
        .modal-form input, .modal-form textarea, .modal-form select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        @media (min-width: 640px) {
            .welcome-section h2 {
                font-size: 2.5rem;
            }
            .welcome-section p {
                font-size: 1.125rem;
            }
        }