body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:linear-gradient(135deg,#0f1215,#1a0a0a,#0f1215,#1a0505);background-size:400% 400%;animation:gradientShift 8s ease infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.content{flex:1;max-width:600px;margin:140px auto 0;display:flex;flex-direction:column;padding:0 15px;text-align:center;width:100%}
.card{background:rgba(26,30,36,.5);backdrop-filter:blur(5px);border:1px solid rgba(255,77,77,.3);border-radius:10px;padding:30px;margin-bottom:20px}
.card h2{color:#ff4d4d;margin-bottom:10px}
.queue-count{font-size:48px;font-weight:bold;color:#ff4d4d}
.queue-label{font-size:13px;color:#b0b8c5;margin-top:5px}
.btn,.btn-outline{min-width:200px;text-align:center;display:inline-block;padding:12px 30px;background:#ff4d4d;color:#fff;border:2px solid transparent;border-radius:8px;font-size:14px;font-weight:bold;cursor:pointer;text-decoration:none;margin:5px}
.btn-outline{background:transparent;border:2px solid #ff4d4d;color:#ff4d4d}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:6px 14px;font-size:12px}
.loader{display:inline-block;width:30px;height:30px;border:3px solid rgba(255,77,77,.2);border-top-color:#ff4d4d;border-radius:50%;animation:spin 1s linear infinite;margin:15px 0}
@keyframes spin{to{transform:rotate(360deg)}}
.lang-switch a{color:#b0b8c5;font-size:12px;text-decoration:none;margin:0 3px}
.lang-switch a.active{color:#ff4d4d;font-weight:bold}
.slots{display:flex;gap:10px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.slot{background:rgba(26,30,36,.5);border:1px solid rgba(255,77,77,.2);border-radius:8px;padding:12px;width:110px;text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.slot.filled{border-color:#ff4d4d}
.slot-avatar{width:45px;height:45px;border:2px solid #ff4d4d;border-radius:4px;object-fit:cover;margin-bottom:5px}
.slot-name{font-size:12px;color:#fff;font-weight:600;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-elo{font-size:10px;color:#b0b8c5}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:999}
.modal[style*="flex"],.modal.show{display:flex!important;align-items:center;justify-content:center}
.modal-box{background:rgba(15,18,21,.95);border:1px solid rgba(255,77,77,.3);border-radius:10px;padding:25px;width:340px;max-width:90vw;text-align:center;margin:auto}
.modal-box h3{color:#ff4d4d;margin-bottom:15px;font-size:18px}
.modal-box input{width:100%;padding:10px;margin:6px 0;background:#0f1215;border:1px solid #333;color:#fff;border-radius:4px;box-sizing:border-box}
.modal-box button{width:100%;padding:10px;background:#ff4d4d;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-top:8px;font-size:14px}
.invite-item{display:flex;justify-content:space-between;align-items:center;padding:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,77,77,.1);border-radius:5px;margin:4px 0;cursor:pointer;color:#fff;font-size:13px}
.invite-item:hover{background:rgba(255,77,77,.1);border-color:#ff4d4d}

.content {
    display: flex !important;
    flex-direction: column !important;
}

    position: relative;
    overflow: hidden;
    background: transparent;
    border: 2px solid #ff4d4d;
    color: #ff4d4d;
}
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 2px solid #2196f3;
    color: #2196f3;
}
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
    background: radial-gradient(circle at center, rgba(255,77,77,0.3) 0%, transparent 70%);
}
    background: radial-gradient(circle at center, rgba(33,150,243,0.3) 0%, transparent 70%);
}
    opacity: 1;
}

.btn:hover{background:#e04444}
.btn-outline:hover{background:#ff4d4d;color:#fff}

#cancelBtn:hover {
    background: #2196f3 !important;
    color: #fff !important;
}