.group-page{min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e293b 50%,#0f172a);padding:32px 16px}.group-container{max-width:1100px;margin:0 auto}.group-header{text-align:center;margin-bottom:32px}.group-header h1{font-size:2.5rem;font-weight:800;color:#f8fafc;margin:16px 0 8px}.subtitle{color:#94a3b8;font-size:1.1rem;margin:0}.back-link{display:inline-block;color:#94a3b8;text-decoration:none;font-size:.95rem;transition:color .2s}.back-link:hover{color:#f8fafc}.group-layout{display:grid;grid-template-columns:380px 1fr;grid-gap:32px;gap:32px;align-items:start}@media (max-width:900px){.group-layout{grid-template-columns:1fr}}.input-section{display:flex;flex-direction:column;gap:16px}.input-card{background:#1e293b;border-radius:16px;padding:24px;border:2px solid #334155}.input-card h2{font-size:1.25rem;font-weight:700;color:#f8fafc;margin:0 0 8px}.input-hint{color:#64748b;font-size:.85rem;margin:0 0 16px}.input-card textarea{width:100%;padding:16px;font-size:1rem;font-family:inherit;color:#f8fafc;background:#0f172a;border:2px solid #334155;border-radius:12px;resize:vertical;outline:none;transition:border-color .2s}.input-card textarea:focus{border-color:#3b82f6}.input-card textarea::placeholder{color:#475569}.name-count{text-align:right;color:#64748b;font-size:.85rem;margin-top:8px}.select-student-card{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:16px;padding:20px 24px;text-align:center}.select-student-card h3{font-size:1rem;font-weight:600;color:#fff;margin:0 0 12px}.select-btn{padding:12px 32px;font-size:1rem;font-weight:700;color:#8b5cf6;background:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s;box-shadow:0 4px 16px rgba(0,0,0,.2)}.select-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 24px rgba(0,0,0,.3)}.selected-student{margin-top:16px;padding:16px 20px;background:hsla(0,0%,100%,.2);border-radius:12px;animation:studentPop .3s ease-out}@keyframes studentPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.selected-label{display:block;font-size:.85rem;color:hsla(0,0%,100%,.8);margin-bottom:4px}.selected-name{font-size:1.4rem;font-weight:800;color:#fff}.settings-card{background:#1e293b;border-radius:16px;padding:20px 24px;border:2px solid #334155}.settings-card h3{font-size:1rem;font-weight:600;color:#f8fafc;margin:0 0 12px}.group-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.group-num-btn{width:44px;height:44px;font-size:1.1rem;font-weight:700;color:#94a3b8;background:#0f172a;border:2px solid #334155;border-radius:12px;cursor:pointer;transition:all .2s}.group-num-btn:hover{border-color:#3b82f6;color:#f8fafc}.group-num-btn.active{border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3)}.color-preview{display:flex;gap:8px;justify-content:center}.color-dot{width:24px;height:24px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3);animation:pop-in .3s ease-out}@keyframes pop-in{0%{transform:scale(0)}to{transform:scale(1)}}.icon-set-selector{display:flex;flex-wrap:wrap;gap:8px}.icon-set-btn{padding:10px 16px;font-size:.9rem;font-weight:600;color:#94a3b8;background:#0f172a;border:2px solid #334155;border-radius:10px;cursor:pointer;transition:all .2s}.icon-set-btn:hover{border-color:#8b5cf6;color:#f8fafc}.icon-set-btn.active{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.action-buttons{display:flex;gap:12px;flex-wrap:wrap}.create-btn{flex:1 1;min-width:140px;padding:14px 24px;font-size:1.1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:12px;cursor:pointer;transition:all .3s;box-shadow:0 4px 16px rgba(59,130,246,.4)}.create-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px rgba(59,130,246,.5)}.create-btn:disabled{opacity:.5;cursor:not-allowed}.create-btn.shuffling{animation:shuffle-pulse .3s ease-in-out infinite}@keyframes shuffle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.reshuffle-btn{padding:14px 20px;font-size:1rem;font-weight:600;color:#3b82f6;background:transparent;border:2px solid #3b82f6;border-radius:12px;cursor:pointer;transition:all .2s}.reshuffle-btn:hover:not(:disabled){background:#3b82f6;color:#fff}.reshuffle-btn:disabled{opacity:.5;cursor:not-allowed}.clear-btn{padding:14px 20px;font-size:1rem;font-weight:600;color:#f87171;background:transparent;border:2px solid #f87171;border-radius:12px;cursor:pointer;transition:all .2s}.clear-btn:hover:not(:disabled){background:#f87171;color:#fff}.clear-btn:disabled{opacity:.4;cursor:not-allowed}.bot-tip{display:flex;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:14px}.bot-tip img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid hsla(0,0%,100%,.3)}.bot-tip-content{display:flex;flex-direction:column;gap:4px}.bot-tip .bot-name{font-size:1.1rem;font-weight:800;color:#fff}.bot-tip span{color:hsla(0,0%,100%,.95);font-size:.95rem;line-height:1.4}.results-section{min-height:400px}.drag-hint{text-align:center;color:#64748b;font-size:.9rem;margin-bottom:16px}.groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:20px;gap:20px}.group-card{background:var(--group-bg);border-radius:20px;overflow:hidden;animation:card-pop .4s ease-out;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:box-shadow .2s,transform .2s}.group-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.4)}@keyframes card-pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.group-card-header{display:flex;align-items:center;gap:12px;padding:18px 20px;background:rgba(0,0,0,.2)}.group-color-badge{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2)}.group-emoji{font-size:1.5rem}.group-name{flex:1 1;font-size:1.15rem;font-weight:700;color:#fff}.member-count{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;color:var(--group-bg);background:#fff;border-radius:50%}.group-members{padding:16px 20px;min-height:100px}.member-item{display:flex;align-items:center;gap:10px;padding:12px 16px;margin-bottom:8px;background:hsla(0,0%,100%,.95);border-radius:12px;font-size:1rem;font-weight:500;color:#1e293b;cursor:-webkit-grab;cursor:grab;transition:all .2s}.member-item:hover{transform:translateX(4px);background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.member-item:active{cursor:-webkit-grabbing;cursor:grabbing}.member-item:last-child{margin-bottom:0}.member-emoji{font-size:1.1rem}.member-name{flex:1 1}.drag-handle{color:#94a3b8;font-size:1rem;letter-spacing:-2px;opacity:.5;transition:opacity .2s}.member-item:hover .drag-handle{opacity:1}.empty-group{padding:20px;text-align:center;color:hsla(0,0%,100%,.6);font-size:.9rem;border:2px dashed hsla(0,0%,100%,.3);border-radius:12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;background:#1e293b;border-radius:20px;border:2px dashed #334155;padding:48px;text-align:center}.empty-colors{display:flex;gap:12px;margin-bottom:24px}.empty-color-circle{width:50px;height:50px;border-radius:50%;opacity:.6;animation:float 3s ease-in-out infinite}.empty-color-circle:first-child{animation-delay:0s}.empty-color-circle:nth-child(2){animation-delay:.5s}.empty-color-circle:nth-child(3){animation-delay:1s}.empty-color-circle:nth-child(4){animation-delay:1.5s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-state h3{font-size:1.5rem;font-weight:700;color:#f8fafc;margin:0 0 8px}.empty-state p{color:#64748b;font-size:1rem;margin:0}