:root {
		            --primary: #7F5FFF;
		            --secondary: #5F9FFF;
		            --accent: #FF6B8B;
		            --success: #2ecc71;
		            --warning: #f39c12;
		            --danger: #e74c3c;
		            font-family: 'Poppins', 'Segoe UI', sans-serif;
		        }
		
		        @keyframes float {
		            0%, 100% { transform: translate(0,0) rotate(0deg); }
		            25% { transform: translate(200px,150px) rotate(90deg); }
		            50% { transform: translate(0,300px) rotate(180deg); }
		            75% { transform: translate(-200px,150px) rotate(270deg); }
		        }
		
		        .container {
		            background: rgba(255, 255, 255, 0.95);
		            backdrop-filter: blur(10px);
		            border-radius: 25px;
		            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
		            padding: 40px;
		            width: auto;
		            margin: 50px 28% 50px 28%;
		            position: relative;
		            z-index: 1;
		            border: 1px solid rgba(255,255,255,0.3);
		        }
		
		        h1 {
		            color: var(--primary);
		            text-align: center;
		            margin-bottom: 40px;
		            font-size: 2.8em;
		            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
		            position: relative;
		        }
		
		        h1::after {
		            content: '';
		            position: absolute;
		            bottom: -10px;
		            left: 50%;
		            transform: translateX(-50%);
		            width: 30%;
		            height: 3px;
		            background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
		        }
		
		        .input-area {
		            margin-bottom: 30px;
		            position: relative;
		        }
		
		        textarea {
		            width: 95%;
		            height: 200px;
		            padding: 25px;
		            border: 2px solid rgba(127,95,255,0.2);
		            border-radius: 20px;
		            resize: vertical;
		            font-size: 16px;
		            line-height: 1.6;
		            transition: all 0.3s;
		            background: rgba(255,255,255,0.9);
		            color: #333;
		            font-family: inherit;
		            margin-left: auto;
		            margin-right: auto;
		            display: block;
		        }
		
		        textarea:focus {
		            border-color: var(--primary);
		            box-shadow: 0 0 25px rgba(127,95,255,0.2);
		            background: rgba(255,255,255,1);
		            outline: none;
		        }
		
		        .button-container {
		            text-align: center;
		            margin: 40px 0;
		            display: flex;
		            justify-content: center;
		            gap: 15px;
		            flex-wrap: wrap;
		        }
		
		        button {
		            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
		            color: white;
		            border: none;
		            padding: 12px 24px;
		            border-radius: 40px;
		            font-size: 16px;
		            cursor: pointer;
		            transition: all 0.3s;
		            box-shadow: 0 5px 15px rgba(127,95,255,0.3);
		            position: relative;
		            overflow: hidden;
		            font-family: inherit;
		            font-weight: 500;
		            letter-spacing: 0.5px;
		        }
		
		        button::before {
		            content: '';
		            position: absolute;
		            top: 50%;
		            left: 50%;
		            width: 300%;
		            height: 300%;
		            background: rgba(255,255,255,0.1);
		            transform: translate(-50%, -50%) rotate(45deg);
		            transition: all 0.5s;
		        }
		
		        button:hover {
		            transform: translateY(-2px);
		            box-shadow: 0 8px 25px rgba(127,95,255,0.4);
		        }
		
		        button:hover::before {
		            width: 0;
		            height: 0;
		        }
		
		        button:active {
		            transform: translateY(1px);
		        }
		
		        .export-btn {
		            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
		        }
		        .history-export-btn {
		            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		        }
		        .history-import-btn {
		            background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
		        }
		        .reset-history-btn {
		            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
		        }
		        .save-btn {
		            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
		        }
		
		        .results-container {
		            display: grid;
		            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		            gap: 25px;
		            margin-top: 40px;
		            text-align: left;
		        }
		
		        .group-card {
		            background: rgba(255,255,255,0.95);
		            backdrop-filter: blur(5px);
		            border-radius: 20px;
		            padding: 25px;
		            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
		            opacity: 0;
		            transform: translateY(30px);
		            animation: cardAppear 0.6s forwards;
		            position: relative;
		            overflow: hidden;
		            border: 1px solid rgba(255,255,255,0.3);
		            transition: all 0.2s;
		        }
		
		        .group-card:hover {
		            transform: translateY(-2px);
		            box-shadow: 0 12px 25px rgba(127,95,255,0.15);
		        }
		
		        .group-card::before {
		            content: '';
		            position: absolute;
		            top: -50%;
		            left: -50%;
		            width: 200%;
		            height: 200%;
		            background: linear-gradient(45deg, 
		                rgba(127,95,255,0.05) 0%,
		                rgba(95,159,255,0.05) 50%,
		                rgba(255,107,139,0.05) 100%
		            );
		            transform: rotate(45deg);
		            z-index: -1;
		        }
		
		        @keyframes cardAppear {
		            to {
		                opacity: 1;
		                transform: translateY(0);
		            }
		        }
		
		        .group-member {
		            padding: 14px 18px;
		            margin: 12px 0;
		            background: rgba(255,255,255,0.9);
		            border-radius: 15px;
		            box-shadow: 0 3px 8px rgba(0,0,0,0.05);
		            transition: all 0.3s;
		            position: relative;
		            overflow: hidden;
		            font-weight: 500;
		        }
		
		        .group-member::before {
		            content: '';
		            position: absolute;
		            top: 0;
		            left: -100%;
		            width: 100%;
		            height: 100%;
		            background: linear-gradient(
		                90deg,
		                transparent,
		                rgba(127,95,255,0.1),
		                transparent
		            );
		            transition: all 0.5s;
		        }
		
		        .group-member:hover {
		            transform: translateX(2px);
		            box-shadow: 0 5px 12px rgba(0,0,0,0.1);
		        }
		
		        .group-member:hover::before {
		            left: 100%;
		        }
		
		        .team-a-member {
		            border-left: 6px solid #64b5f6;
		            background: linear-gradient(90deg, rgba(100,181,246,0.05), rgba(255,255,255,0.9));
		        }
		        .team-b-member {
		            border-left: 6px solid #ba68c8;
		            background: linear-gradient(90deg, rgba(186,104,200,0.05), rgba(255,255,255,0.9));
		        }
		
		        .group-number {
		            color: var(--primary);
		            font-size: 1.4em;
		            font-weight: 700;
		            margin-bottom: 20px;
		            padding-bottom: 10px;
		            position: relative;
		        }
		
		        .group-number::after {
		            content: '';
		            position: absolute;
		            bottom: 0;
		            left: 0;
		            width: 50px;
		            height: 3px;
		            background: linear-gradient(90deg, var(--primary), var(--secondary));
		            border-radius: 3px;
		        }
		
		        .containerr {
		            background: rgba(255, 255, 255, 0.95);
		            backdrop-filter: blur(10px);
		            border-radius: 30px;
		            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
		            padding: 40px;
		            width: auto;
		            margin: 50px 20% 50px 20%;
		            position: relative;
		            z-index: 1;
		            border: 1px solid rgba(255,255,255,0.3);
		            text-align: center;
		            overflow: hidden;
		        }
		
		        h2 {
		            margin: 0 0 2rem 0;
		            font-size: 2.2em;
		            position: relative;
		            background: linear-gradient(45deg, #64b5f6, #ba68c8);
		            -webkit-background-clip: text;
		            -webkit-text-fill-color: transparent;
		            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
		        }
		
		        .config-panel {
		            display: flex;
		            gap: 20px;
		            justify-content: center;
		            margin-bottom: 30px;
		            flex-wrap: wrap;
		            align-items: center;
		        }
		        .input-group {
		            position: relative;
		            background: rgba(255,255,255,0.9);
		            border-radius: 20px;
		            padding: 10px 20px;
		            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
		            display: inline-flex;
		            align-items: center;
		            gap: 12px;
		            backdrop-filter: blur(4px);
		            min-height: 48px;
		            box-sizing: border-box;
		        }
		        .input-group label {
		            color: var(--primary);
		            font-size: 14px;
		            font-weight: 500;
		            margin-right: 0;
		            line-height: 1.4;
		        }
		        .input-group select, .input-group input[type="checkbox"] {
		            padding: 8px 15px;
		            border: 2px solid rgba(127,95,255,0.2);
		            border-radius: 12px;
		            font-size: 15px;
		            background: white;
		            font-family: inherit;
		            cursor: pointer;
		            outline: none;
		            transition: all 0.2s;
		            margin: 0;
		        }
		        .input-group select {
		            padding: 8px 15px;
		        }
		        .input-group input[type="checkbox"] {
		            width: 20px;
		            height: 20px;
		            padding: 0;
		            accent-color: var(--primary);
		        }
		        .input-group span {
		            font-size: 12px;
		            color: #666;
		            white-space: nowrap;
		            line-height: 1.4;
		        }
		        .input-group select:focus, .input-group input:focus {
		            border-color: var(--primary);
		            box-shadow: 0 0 0 3px rgba(127,95,255,0.2);
		        }
		
		        .history-section {
		            margin-top: 50px;
		            border-top: 2px dashed rgba(127,95,255,0.3);
		            padding-top: 30px;
		            text-align: center;
		        }
		        .history-title {
		            font-size: 1.8em;
		            color: var(--primary);
		            margin-bottom: 20px;
		            font-weight: 600;
		            display: flex;
		            align-items: center;
		            justify-content: center;
		            gap: 12px;
		        }
		        .history-table-wrapper {
		            overflow-x: auto;
		            margin-top: 20px;
		            border-radius: 20px;
		            background: rgba(255,255,255,0.8);
		            padding: 15px;
		            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
		        }
		        .history-table {
		            width: 100%;
		            border-collapse: collapse;
		            font-size: 14px;
		            min-width: 600px;
		            border-radius: 16px;
		            overflow: hidden;
		        }
		        .history-table th, .history-table td {
		            border: 1px solid rgba(127,95,255,0.2);
		            padding: 12px 8px;
		            text-align: center;
		            vertical-align: top;
		        }
		        .history-table th {
		            background: linear-gradient(135deg, var(--primary), var(--secondary));
		            color: white;
		            font-weight: 600;
		        }
		        .history-table tr:nth-child(even) {
		            background: rgba(127,95,255,0.05);
		        }
		        .empty-history {
		            color: #888;
		            padding: 40px;
		            font-size: 16px;
		            background: rgba(255,255,255,0.6);
		            border-radius: 20px;
		        }
		
		        .file-input-label {
		            background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
		            padding: 12px 24px;
		            border-radius: 40px;
		            color: white;
		            cursor: pointer;
		            font-size: 16px;
		            font-weight: 500;
		            display: inline-block;
		            transition: all 0.3s;
		            box-shadow: 0 5px 15px rgba(155,89,182,0.3);
		        }
		        .file-input-label:hover {
		            transform: translateY(-2px);
		            box-shadow: 0 8px 20px rgba(155,89,182,0.4);
		        }
		        input[type="file"] {
		            display: none;
		        }
		
		        @media screen and (max-width: 1024px) {
		            .container, .containerr {
		                margin: 50px 15% 50px 15% !important;
		            }
		        }
		        @media screen and (max-width: 768px) {
		            .container, .containerr {
		                margin: 15px !important;
		                padding: 25px;
		                border-radius: 20px;
		            }
		            h1, h2 {
		                font-size: 2em !important;
		                margin-bottom: 25px;
		            }
		            textarea {
		                height: 150px;
		                padding: 15px;
		                font-size: 14px;
		            }
		            .button-container {
		                flex-direction: column;
		                gap: 12px;
		            }
		            button, .file-input-label {
		                width: 100%;
		                padding: 12px 20px;
		                font-size: 15px;
		                text-align: center;
		            }
		            .config-panel {
		                flex-direction: column;
		                gap: 10px;
		            }
		            .input-group {
		                width: 100%;
		                justify-content: center;
		            }
		            .input-group span {
		                white-space: normal;
		            }
		            .results-container {
		                grid-template-columns: 1fr;
		            }
		            .group-card {
		                padding: 15px;
		            }
		        }